Three.js中的Per instance UV纹理映射InstancedBufferGeometry。

Question

我有一个由单个平面构成的InstancedBufferGeometry：

const plane = new THREE.PlaneBufferGeometry(100, 100, 1, 1);
const geometry = new THREE.InstancedBufferGeometry();
geometry.maxInstancedCount = 100;
geometry.attributes.position = plane.attributes.position;

geometry.index = plane.index;
geometry.attributes.uv = plane.attributes.uv;

geometry.addAttribute( 'offset', new THREE.InstancedBufferAttribute( new Float32Array( offsets ), 3 ) ); // an offset position

我正在为每个平面应用纹理，这部分工作已经按预期完成，但是我希望为每个实例应用不同的纹理区域，而我不确定正确的方法。

目前，我尝试根据单个平面的uv结构为每个实例建立独立的uv，但效果并不理想：

let uvs = [];

for (let i = 0; i < 100; i++) {
    const tl = [0, 1];
    const tr = [1, 1];
    const bl = [0, 0];
    const br = [1, 0];
    uvs = uvs.concat(tl, tr, bl, br);
}

...

geometry.addAttribute( 'uv', new THREE.InstancedBufferAttribute( new Float32Array( uvs ), 2) );

当我这样做时，没有任何错误，但每个实例只有一种颜色（所有实例都是相同的颜色）。我尝试过更改实例大小，以及每个属性的网格数（我不完全理解，难以在文档中找到一个好的解释）。

我感觉我离成功很近了，但我还缺少一些东西，所以指点一下方向就太棒了！

（供参考，这是我的着色器）：

const vertexShader = `
    precision mediump float;

    uniform vec3 color;
    uniform sampler2D tPositions;

    uniform mat4 modelViewMatrix;
    uniform mat4 projectionMatrix;

    attribute vec2 uv;
    attribute vec2 dataUv;
    attribute vec3 position;
    attribute vec3 offset;
    attribute vec3 particlePosition;
    attribute vec4 orientationStart;
    attribute vec4 orientationEnd;

    varying vec3 vPosition;
    varying vec3 vColor;
    varying vec2 vUv;

    void main(){
        vPosition = position;
        vec4 orientation = normalize( orientationStart );
        vec3 vcV = cross( orientation.xyz, vPosition );
        vPosition = vcV * ( 2.0 * orientation.w ) + ( cross( orientation.xyz, vcV ) * 2.0 + vPosition );

        vec4 data = texture2D( tPositions, vec2(dataUv.x, 0.0));
        vec3 particlePosition = (data.xyz - 0.5) * 1000.0;
        vUv = uv;

        vColor = data.xyz;

        gl_Position = projectionMatrix * modelViewMatrix * vec4(  position + particlePosition + offset, 1.0 );
    }
`;

const fragmentShader = `
    precision mediump float;

    uniform sampler2D map;

    varying vec3 vPosition;
    varying vec3 vColor;
    varying vec2 vUv;

    void main() {
        vec3 color = texture2D(map, vUv).xyz;

        gl_FragColor = vec4(color, 1.0);
    }
`;

- Jack Wild

---

你可以尝试为每个实例添加一个纹理变换矩阵。 - Jeroen van Langen

Answer 1

作为所有实例都需要占据相同大小的矩形区域，但是需要偏移（就像精灵表一样），我已经为每个实例添加了UV偏移和UV缩放属性，并使用它来定义要使用地图的哪个区域：

const uvOffsets = [];
for (let i = 0; i < INSTANCES; i++) {
    const u = i % textureWidthHeight;
    const v = ~~ (i / textureWidthHeight);
    uvOffsets.push(u, v);
}

...

geometry.attributes.uv = plane.attributes.uv;
geometry.addAttribute( 'uvOffsets', new THREE.InstancedBufferAttribute( new Float32Array( uvOffsets ), 2 ) );

uniforms: {
    ...
    uUvScale: { value: 1 / textureWidthHeight }
}

在片段着色器中：

void main() {
    vec4 color = texture2D(map, (vUv * uUvScale) + (vUvOffsets * uUvScale));
    gl_FragColor = vec4(1.0, 1.0, 1.0, color.a);
}

\o/

- Jack Wild