Postprocessing: instancedMesh + postprocessing + Suspense Heisenbug

[s3ththompson]

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... 🤷‍♂️

[s3ththompson]

[vanruesc]

[vanruesc]

[drcmda]

[s3ththompson]

[vanruesc]

[s3ththompson]

[drcmda]

[vanruesc]