具有新偏移量的three.js webgl自定义着色器共享纹理 [英] three.js webgl custom shader sharing texture with new offset

问题描述

我正在将 1024 x 1024 的纹理拆分为 32x32 的图块 * 32，我不确定是否可以使用偏移量共享纹理，或者我是否需要为每个具有偏移量的图块创建一个新纹理..

I am splitting a texture 1024 x 1024 over 32x32 tiles * 32, Im not sure if its possible to share the texture with an offset or would i need to create a new texture for each tile with the offset..

要创建偏移量，我使用统一值 = 32 * i 并通过创建图块的每个循环实例更新统一值，所有图块似乎都是相同的偏移量?因为基本上我希望图像看起来像它的一个图像没有分解成小块.但是当前的输出在所有 32 个块上都是相同的 x,y 偏移量..我使用带有three.js r71 的顶点着色器...

to create the offset i am using a uniform value = 32 * i and updating the uniform through each loop instance of creating tile, all the tiles seem to be the same offset? as basically i wanting an image to appear like its one image not broken up into little tiles.But the current out-put is the same x,y-offset on all 32 tiles..Im using the vertex-shader with three.js r71...

我是否需要为每个具有偏移量的图块创建一个新纹理?

Would i need to create a new texture for each tile with the offset?

      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 的偏移量，但它们都是一样的......这是使用一种纹理......

Each image should have an offset of 10 0r 20 px but they are all the same.... this is from using one texture..

正如我所建议的那样，我试图在运气不佳的情况下尝试操纵每个对象上的 uv，这似乎使所有相同的顶点具有相同的位置，例如 10x10 段平面所有面都将相同

As suggested i have tried to manipulate the uv on each object with out luck, it seems to make all the same vertexes have the same position for example 10x10 segmant plane all faces will be the same

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

此结果的图像，您会注意到所有顶点在不应该相同时都相同

image of this result, you will notice all vertices are the same when they shouldn't be

再次更新:我必须遍历面的每个顶点，因为两个三角形组成一个四边形以避免上述问题，我想我可能已经解决了这个问题......会更新

Update again: I have to go through each vertices of faces as two triangles make a quad to avoid the above issue, I think i may have this solved... will update

最后一次更新:以下是源代码，但我无法让算法按预期显示纹理.

Last Update Hopfully: Below is the source code but i am lost making the algorithm display the texture as expected.

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

            }

您会注意到下面的红色图像是无缝的，因为其他图块未与纹理对齐.

You will notice the below image in the red is seamless as the other tiles are not aligned with the texture.

推荐答案

答案如下:

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

如果你能简化答案，你也会获得赏金:

if you could simplify answer will award bounty too:

这篇关于具有新偏移量的three.js webgl自定义着色器共享纹理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！