Minimal instancedMesh example

[mattrossman]

I'm learning the basics of instancing meshes, but my minimal example isn't working as expected.
The constructor for InstancedMesh looks fairly straightforward -- it just takes a geometry, a material, and a count. The r3f examples that use instancing set those first two arguments to null (example) as a placeholder for an attached child geometry and material. However, when I try this in a stripped down example, nothing gets rendered.

// This displays a box
function Thing() {
  return (
    <mesh>
      <boxBufferGeometry args={[1, 1, 1]} />
      <meshNormalMaterial />
    </mesh>
  )
}

// This doesn't display anything
function InstancedThing() {
  return (
    <instancedMesh args={[null, null, 1]}>
      <boxBufferGeometry args={[1, 1, 1]} />
      <meshNormalMaterial />
    </instancedMesh>
  )
}

"json" on Discord noted that they've had the same trouble recently and could only get around it by imperatively creating the geometry and material, but it's unclear to my why the declarative approach doesn't work. Am I doing something wrong or is this a problem with r3f?

Edit: even when creating the geometry and material imperatively it doesn't work. Here's a sandbox that shows all three approaches, uncomment to see each component's result

[mattrossman]

Answering my own question for future readers:

A THREE.InstancedMesh stores all the 4x4 transformation matrices of all the instances inside a one flat Float32Array, which gets initialized to all zeros. A transformation matrix full of zeros means that the instances get squashed into the abyss, hence nothing gets rendered. To solve this you need to give the instances a more reasonable tranformation matrix, like an identity matrix. A THREE.Matrix4() will initialize to an identity matrix by default, so a minimal working version of the above example looks like:

function InstancedThing() {
  const ref = useRef()
  useEffect(() => {
    ref.current.setMatrixAt(0, new THREE.Matrix4())
  }, [])
  return (
    <instancedMesh ref={ref} args={[null, null, 1]}>
      <boxBufferGeometry args={[1, 1, 1]} />
      <meshNormalMaterial />
    </instancedMesh>
  )
}

Note that the Three.js docs say you need to flag ref.current.instanceMatrix.needsUpdate = true after the .setMatrix() call. I found it wasn't necessary for this example but you may need to include if you do something more complex.

[drcmda]

Ideally this should not be a useEffect but useLayoutEffect, then even the first paint is complete, unlike now where it paints a single frame wrong and then corrects.

[mattrossman]

Thanks Paul, that's a mistake I keep making. Out of curiosity, I recently learned about useUpdate as another way to handle imperative stuff -- would that run before or after the first paint? e.g.,

function InstancedThing() {
  const ref = useUpdate(imesh => {
    imesh.setMatrixAt(0, new THREE.Matrix4())
  }, [])
  return (
    <instancedMesh ref={ref} args={[null, null, 1]}>
      <boxBufferGeometry args={[1, 1, 1]} />
      <meshNormalMaterial />
    </instancedMesh>
  )
}

[sonisourabh]

Thanks @mattrossman for having this conversation. It was very useful for me. Here is an another thing about instancedMesh, I discovered after lot of time being spent on debugging. instancedMesh need to have predefined maximum number of instances. I used to get a crash in gl.render method when I happen to change the number of instances. Following is the way I fixed the mentioned crash i.e. by simply adding an another component which forces React to create new instance of instancedMesh for different number of instances.

function InstancedThing({instances}) {
  const ref = useUpdate(imesh => {
    instances.forEach((data, index) => {
		imesh.setMatrixAt(index, data.mat4)
		imesh.setColorAt(index, data.col3)
	})
	imesh.instanceMatrix.needsUpdate = true
	imesh.instanceColor.needsUpdate = true
  }, [instances])
  return (
    <instancedMesh ref={ref} args={[null, null, instances.length]}>
      <boxBufferGeometry args={[1, 1, 1]} />
      <meshNormalMaterial />
    </instancedMesh>
  )
}

function AnotherThing({instances}) {
  const numInstances = instances?.length || 0
  if (numInstances < 1) return null
  const key = 'instanced-thing-' + numInstances // IMPORTANT: to include numInstances in key, otherwise gl will crash on change
  return <InstancedThing key={key} instances={instances} />
}

Above fix is working for me. I am wondering if there is any better way to handle this.