Is it possible to assign different vertex colors to each instance of 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);
Currently, all instances share the same vertex colors. If I try
const colors = new THREE.InstancedBufferAttribute(vertexColorArray, 3, 1);Here are the shaders:
<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>