Declarative instancedMesh

Demos and projects
1

There were three outstanding github issues related to InstancedMesh and performance/draw calls, so finally those made it into react-babylonjs :slight_smile: 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:

image
image3265×1702 378 KB

Future plans are to integrate that into loaded models and using React Suspense - this was a preliminary step.

3 Likes
2

This is pretty cool @brianzinn !!!