Fail to set instanceColor buffer attribute for instances with MeshRefractionMaterial

[franky-adl]

Dependencies on codesandbox demo:

• "@react-three/drei": "9.108.1",
• "@react-three/fiber": "8.16.8",
• "@react-three/postprocessing": "2.15.12",
• "@types/three": "0.158.3",
• "leva": "0.9.33",
• "react": "18.2.0",
• "react-dom": "18.2.0",
• "react-scripts": "5.0.1",
• "three": "0.166.1"

Problem description:

The 'instanceColor' buffer attribute has no effect on instances using MeshRefractionMaterial, no matter what color you've set in the InstancedBufferAttribute, the diamond stones in the sandbox just turn out 'white'. However, testing with other materials (e.g. meshBasicMaterial or meshPhysicalMaterial) instead of MeshRefractionMaterial proves fine, various colors can be set onto the instances like in the following image.

Relevant code:

Demo running on codesandbox: https://codesandbox.io/p/sandbox/diamond-ring-forked-fqwllc

The code for the instancedMesh component:

<instancedMesh castShadow args={[nodes.mesh_4.geometry, null, count]} instanceMatrix={nodes.mesh_4.instanceMatrix}>
        <instancedBufferAttribute attach="instanceColor" count={colorArray.length / 3} array={colorArray} itemSize={3} />
        {/* try toggle between refraction and physical material */}
        <MeshRefractionMaterial color={diamonds} side={THREE.DoubleSide} envMap={env} aberrationStrength={0.02} toneMapped={false} />
        {/* <meshPhysicalMaterial color={diamonds} side={THREE.DoubleSide} envMap={env} toneMapped={false} /> */}
</instancedMesh>

[CodyJasonBennett]

Fix released in 9.108.3.