There were three outstanding github issues related to InstancedMesh and performance/draw calls, so finally those made it into react-babylonjs
The basic syntax is that you need to create a mesh and then it can be passed in as the
source
to an InstancedMesh.
export const Instances = () => {
const [hexMesh, setHexMesh] = useState(null);
const hexRef = useCallback((node) => {
if (node) {
const mesh = node.hostInstance;
mesh.registerInstancedBuffer("color", 4);
setHexMesh(mesh);
}
}, []);
return (
<disc
ref={hexRef}
name="hex"
radius={1}
tessellation={6}
isVisible={false}
/>
{hexMesh &&
instances.map(instance => {
return (
<instancedMesh
source={hexMesh}
key={instance.id}
name={`hex-${instance.id}`}
position={new Vector3(instance.xpos, instance.ypos, 0)}
instancedBuffers={{color: instance.color}}
/>
)
})
}
)
}
Here is a live hex demo:
https://brianzinn.github.io/react-babylonjs/?path=/story/babylon-basic--instances
Click on the button to change the instancedBuffer for color for all of the instances:
Future plans are to integrate that into loaded models and using React Suspense - this was a preliminary step.