Javascript 是否可以为每个“InstancedBufferGeometry”实例使用不同的顶点颜色？

我想知道是否可以为每个

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

---

您想知道，在使用

instancedbuffergeometry

时，是否可能使每个实例的每个顶点都具有不同的顶点颜色

是的，这是可能的

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

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

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

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

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

---

three.js r.84

好的，通过索引和顶点ID查找值是有意义的。-但我仍然不完全确定如何实际实现这一点：因此

vertexIds

和

instanceIds

将是

Uint16Array

s，因为我想将它们用作颜色值数组的索引（将作为

uniform vec3

？）传入。但是，

int

s似乎不允许作为

属性

s，使用

uniform vec3

我必须事先指定数组的大小，对吗？（1）可以将顶点颜色数据打包到纹理中。（2） 读取。最终生成了某种精灵纹理，使用实例id计算右uv坐标偏移。@WestLangley如何在着色器中为每个实例的每个顶点唯一设置颜色？有进一步的信息吗？