three.js webgl custom shader que compartilha textura com novo deslocamento

Estou dividindo uma textura 1024 x 1024 sobre 32x32 azulejos * 32, não tenho certeza se é possível compartilhar a textura com um deslocamento ou seria necessário criar uma nova textura para cada azulejo com o deslocamento ..

Para criar o deslocamento, estou usando um valor uniforme = 32 * ie atualizando o uniforme em cada instância de loop da criação de blocos, todos os blocos parecem ter o mesmo deslocamento? como basicamente eu quero que uma imagem apareça como sua única imagem não dividida em pequenos ladrilhos. Mas a saída atual é o mesmo x, y-offset em todos os 32 ladrilhos. ...

Eu precisaria criar uma nova textura para cada bloco com o deslocamento?

      for ( j = 0; j < row; j ++ ) {

           for ( t = 0; t < col; t ++ ) {

                customUniforms.tX.value = tX; 
                customUniforms.tY.value = tY;
                console.log(customUniforms.tX.value);
                customUniforms.tX.needsUpdate = true;
                customUniforms.tY.needsUpdate = true;
                mesh = new THREE.Mesh( geometry,mMaterial);// or new material
           }
       }

       //vertex shader :
       vec2 uvOffset = vUV + vec2( tX, tY) ;    

Exemplo de imagem:

Cada imagem deve ter um deslocamento de 10 0r 20 px, mas são todos iguais ... isso ocorre ao usar uma textura.

Como sugerido, tentei manipular o UV em cada objeto sem sorte, parece fazer com que todos os mesmos vértices tenham a mesma posição, por exemplo, plano segmant 10x10 com todas as faces iguais

    var geometry = [
    [ new THREE.PlaneGeometry( w, w ,64,64),50 ],
    [ new THREE.PlaneGeometry( w, w ,40,40), 500 ],
    [ new THREE.PlaneGeometry( w, w ,30,30), 850 ],
    [ new THREE.PlaneGeometry( w, w,16,16 ), 1200 ]
];

    geometry[0][0].faceVertexUvs[0] = [];

    for(var p = 0; p < geometry[0][0].faces.length; p++){ 
        geometry[0][0].faceVertexUvs[0].push([
        new THREE.Vector2(0.0, 0.0),
        new THREE.Vector2(0.0, 1),
        new THREE.Vector2( 1, 1 ), 
        new THREE.Vector2(1.0, 0.0)]);  
    }

imagem desse resultado, você notará que todos os vértices são iguais quando não deveriam ser

Atualize novamente: Eu tenho que passar por cada vértices de faces como dois triângulos formam um quad para evitar o problema acima, acho que posso ter isso resolvido ... será atualizado

Última atualização: Abaixo está o código fonte, mas estou perdido fazendo o algoritmo exibir a textura conforme o esperado.

            /*
            j and t are rows & columns looping by 4x4 grid
            row = 4 col = 4;
            */

            for( i = 0; i < geometry.length; i ++ ) {
            var mesh = new THREE.Mesh( geometry[ i ][ 0 ], customMaterial);
            mesh.geometry.computeBoundingBox();
            var max     =  mesh.geometry.boundingBox.max;
            var min     =  mesh.geometry.boundingBox.min;
            var offset  = new THREE.Vector2(0 - min.x*t*j+w, 0- min.y*j+w);//here is my issue
            var range   = new THREE.Vector2(max.x - min.x*row*2, max.y - min.y*col*2);
            mesh.geometry.faceVertexUvs[0] = [];
            var faces =  mesh.geometry.faces;

            for (p = 0; p <  mesh.geometry.faces.length ; p++) {
                var v1 =  mesh.geometry.vertices[faces[p].a];
                var v2 =  mesh.geometry.vertices[faces[p].b];
                var v3 =  mesh.geometry.vertices[faces[p].c];
                mesh.geometry.faceVertexUvs[0].push([
                new THREE.Vector2( ( v1.x + offset.x ) / range.x , ( v1.y + offset.y ) / range.y ),
                new THREE.Vector2( ( v2.x + offset.x ) / range.x , ( v2.y + offset.y ) / range.y ),
                new THREE.Vector2( ( v3.x + offset.x ) / range.x , ( v3.y + offset.y ) / range.y )
                ]);

            }

Você notará que a imagem abaixo em vermelho é perfeita, pois os outros blocos não estão alinhados com a textura.

questionAnswers(1)

yourAnswerToTheQuestion