three.js webgl benutzerdefinierte Shader Textur mit neuen Offset teilen

Question

Ich teile eine Textur 1024 x 1024 über 32x32 Kacheln * 32, Ich bin nicht sicher, ob es möglich ist, die Textur mit einem Offset zu teilen, oder würde ich eine neue Textur erstellen für jede Kachel mit dem Offset.

um den Offset zu erstellen, verwende ich einen einheitlichen Wert = 32 * i und Aktualisierung der Uniform durch jede Schleife Instanz der Erstellung von Kachel, scheinen alle Kacheln die gleichen Offset? Grundsätzlich möchte ich, dass ein Bild wie sein einziges Bild erscheint, das nicht in kleine Kacheln aufgeteilt ist. Der aktuelle Output ist jedoch der gleiche x, y-Offset auf allen 32 Kacheln..Im Verwenden des Vertex-Shaders mit three.js r71 ...

Müsste ich für jede Kachel mit dem Offset eine neue Textur erstellen?

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

Bildbeispiel:

Jedes Bild hat eine von 10 0r 20 px Offset sollte, aber sie sind alle gleich .... das ist von einer Textur .. mit

Wie vorgeschlagen habe ich versucht, die UV auf jedem Objekt mit Glück zu manipulieren, scheint es, dass alle die gleichen Scheitelpunkte haben die gleiche Position zum Beispiel 10x10 segment Ebene alle Gesichter werden die gleichen

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

Bild dieses Ergebnis erhalten Sie alle Ecken bemerken gleich sind, wenn sie nicht

-Update erneut sein sollte: ich durch jede Ecken Gesichter als zwei gehen Dreiecken bilden ein Quad das obige Problem zu vermeiden, ich denke, ich kann dieses Problem gelöst ... Hopfully

Last Update aktualisiert werden: Below ist der Quellcode, aber ich bin verloren, so dass der Algorithmus die Textur wie erwartet anzeigt.

Sie werden feststellen, dass das untere Bild in rot nahtlos ist, da die anderen Kacheln nicht mit der Textur übereinstimmen. Hier

Answer 1

ist die Antwort:

 var offset = new THREE.Vector2(w - min.x-w+(w*t), w- min.y+w+(w*-j+w)); 
     var range = new THREE.Vector2(max.x - min.x*7, max.y - min.y*7); 

, wenn Sie Antwort vergibt Bounty vereinfachen könnte: