instancedMesh + postprocessing + Suspense Heisenbug

I am running into a bizarre bug that has something to do with the interaction of 3 components in react-three-fiber. (Per @drcmda’s suggestion in https://github.com/react-spring/react-three-fiber/issues/570#issuecomment-658409888, I’m opening a issue here since it seems like postprocessing is a key component of the bug.)

→ Codesandbox (important section reproduced below)

<Particles count={100} />{/* instancedMesh */}
<Suspense fallback={null}>
    <Box />{/* mesh */}
    <StandardEffects bloom={{ luminanceThreshold: 0.99 }} />{/* postprocessing effects pass, from drei */}
</Suspense>

Running the code throws the following error:

Uncaught TypeError: Cannot read property 'isInterleavedBufferAttribute' of undefined
   at Object.get (three.module.js:11557)
   at setupVertexAttributes (three.module.js:12415)
   at Object.setup (three.module.js:12244)
   at WebGLRenderer.renderBufferDirect (three.module.js:17278)
...

Here’s the weird part: removing any one of <Particles/> (which is an instanced mesh), <Box/> (just a regular mesh, but crucially one inside a <Suspense/> wrapper) or <StandardEffects/> (a drei wrapper around postprocessing) seems to fix the issue.

I’m not even sure where to start debugging this one… the TypeError comes from three.js trying to read object.instanceMatrix which doesn’t exist. This seems to point to an issue with InstancedMesh and postprocessing, although as I mentioned above, removing the regular mesh from inside the react-three-fiber Suspense wrapper also gets rid of the error… 🤷‍♂️

[vanruesc]

Is it possible it has something to do with the fact that the NormalPass uses a material that always sets morphTargets, morphNormals, and skinning to true?

Yes, that’s probably it - I haven’t seen three crash with this error before, though.

Enabling the override material workaround fixes the issue: https://codesandbox.io/s/r3f-bug-fix-standardeffects-btfxe?file=/src/StandardEffects.js

[s3ththompson]

It looks like the issue is related to the Normal Pass. Here’s a version of the Codesandbox that works with the normal pass commented out.

Is it possible it has something to do with the fact that the NormalPass uses a material that always sets morphTargets, morphNormals, and skinning to true?

I’m a little over my head, but reading around the area in three.js where the TypeError is thrown (renders/webgl/WebGLBindingStates.js:L295) it looks like setupVertexAttributes is looking for an instanceMatrix on a mesh (L384) because the program’s attributes say it should be there (L311)

cc @drcmda