javascript - 每个 `InstancedBufferGeometry` 实例是否可以有不同的顶点颜色？

Question

我想知道是否可以为每个 InstancedBufferGeometry 实例拥有不同的顶点颜色。

const xRes = 3;
const yRes = 2;
const numVertices = xRes * yRes;
geometry = new THREE.InstancedBufferGeometry();
geometry.copy(new THREE.PlaneBufferGeometry(3, 2, xRes, yRes));

const particleCount = 500;

const vertexColorArray = new Float32Array(particleCount * numVertices * 3);
for (let i = 0; i < particleCount * numVertices * 3; i++) {
    vertexColorArray[i] = Math.random();
}
const colors = new THREE.BufferAttribute(vertexColorArray, 3);
geometry.addAttribute("vertexColor", colors);

在这种情况下，所有实例共享相同的顶点颜色，当我执行 const color = new THREE.InstancedBufferAttribute(vertexColorArray, 3, 1); 时，每个实例都有一个单独的颜色，但不是每个实例顶点。

着色器看起来像这样:

<script id="vshader" type="x-shader/x-vertex">
    precision highp float;
    uniform mat4 modelViewMatrix;
    uniform mat4 projectionMatrix;
    uniform float time;

    attribute vec3 position;
    attribute vec3 translate;
    attribute vec3 vertexColor;

    varying vec3 vVertexColor;

    void main() {
        vec4 mvPosition = modelViewMatrix * vec4(translate, 1.0);
        vec3 trTime = vec3(
            translate.x + time,
            translate.y + time, 
            translate.z + time
        );
        float scale = 1.0;
        scale = scale * 10.0 + 10.0;
        mvPosition.xyz += position * scale;
        vVertexColor = vertexColor;
        gl_Position = projectionMatrix * mvPosition;
    }
</script>
<script id="fshader" type="x-shader/x-fragment">
    precision highp float;
    varying vec3 vVertexColor;

    void main() {
        gl_FragColor = vec4(vVertexColor, 1);
    }
</script>

Answer 1

您想知道使用InstancedBufferGeoemtry时是否可以让每个实例的每个顶点具有不同的顶点颜色。

是的，这是可能的。

一种方法是以编程方式计算着色器中的颜色，或者通过基于几何顶点 ID 和实例 ID 的查找表:

geometry.addAttribute( 'vertexID', new THREE.BufferAttribute( vertexIDs, 1 ) );

geometry.addAttribute( 'instanceID', new THREE.InstancedBufferAttribute( instanceIDs, 1 ) );

因此，在着色器中，您可以访问原始几何体的顶点 ID，并且还可以访问实例的 ID。根据这两个值，您可以在着色器中为每个实例的每个顶点设置唯一的颜色。

三.js r.84