Estoy dividiendo una textura de 1024 x 1024 sobre 32x32 mosaicos * 32, no estoy seguro de si es posible compartir la textura con un desplazamiento o si necesitaría crear una nueva textura para cada mosaico con el desplazamiento.

para crear el desplazamiento estoy usando un valor uniforme = 32 * i y actualizando el uniforme a través de cada instancia de bucle de creación de mosaico, ¿todos los mosaicos parecen ser el mismo desplazamiento? básicamente, quiero que una imagen aparezca como su única imagen no dividida en pequeños mosaicos. Pero la salida actual es el mismo desplazamiento x, y en los 32 mosaicos ... Estoy usando el sombreador de vértices con three.js r71 ...

¿Necesitaría crear una nueva textura para cada mosaico con el desplazamiento?

      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) ;    

Ejemplo de imagen:

Cada imagen debe tener un desplazamiento de 10 0r 20 px pero son todos iguales ... esto es por usar una textura ...

Como sugerí, he tratado de manipular el UV en cada objeto sin suerte, parece que todos los mismos vértices tienen la misma posición, por ejemplo, 10x10 plano segmentado, todas las caras serán iguales

    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)]);  
    }

imagen de este resultado, notará que todos los vértices son iguales cuando no deberían

Actualizar de nuevo: Tengo que pasar por cada vértice de caras ya que dos triángulos forman un cuadrante para evitar el problema anterior, creo que puedo tener esto resuelto ... se actualizará

Última actualización con suerte: A continuación se muestra el código fuente, pero estoy perdido haciendo que el algoritmo muestre la textura como se esperaba.

            /*
            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 )
                ]);

            }

Notará que la imagen a continuación en rojo es perfecta ya que los otros mosaicos no están alineados con la textura.