instancedMesh + postprocessing + Suspense Heisenbug
See original GitHub issueI 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… 🤷♂️
Issue Analytics
- State:
- Created 3 years ago
- Reactions:1
- Comments:9 (6 by maintainers)
Top GitHub Comments
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
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
, andskinning
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