Three.js WebGL Пользовательский шейдер обмена текстурой с новым смещением
Я разделяю текстуру 1024 x 1024 на 32x32 плитки * 32, я не уверен, возможно ли разделить текстуру со смещением или мне нужно создать новую текстуру для каждой плитки со смещением.
чтобы создать смещение, я использую унифицированное значение = 32 * i и обновляю униформу через каждый экземпляр цикла создания плитки, все плитки кажутся одинаковыми смещением? так как в основном я хотел, чтобы изображение выглядело так, как будто его единственное изображение не разбито на маленькие плитки. Но текущим выходным значением является одинаковое смещение по оси x, y на всех 32 плитах. Я использую вершинный шейдер с three.js r71. ...
Нужно ли создавать новую текстуру для каждой плитки со смещением?
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) ;
Пример изображения:
Каждое изображение должно иметь смещение 10 0r 20 px, но все они одинаковы .... это из-за использования одной текстуры.
Как и предполагалось, я пытался манипулировать уф на каждом объекте без удачи, похоже, что все вершины имеют одинаковое положение, например, плоскость сегмента 10x10, все грани будут одинаковыми
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)]);
}
Изображение этого результата, вы заметите, что все вершины одинаковы, когда они не должны быть
Обновите снова: Мне нужно пройти через каждую вершину граней, так как два треугольника образуют квадрат, чтобы избежать вышеуказанной проблемы. Думаю, я могу решить эту проблему ... обновлю
Последнее обновление с надеждой: Ниже приведен исходный код, но я потерял, заставляя алгоритм отображать текстуру, как и ожидалось.
/*
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 )
]);
}
Вы заметите, что изображение ниже в красном цвете является бесшовным, поскольку другие плитки не выровнены с текстурой.