After a lot of testing and refactoring, I’ve narrowed down a strange rendering issue to some difference(s) between r.136 (or later) and r.135, and/or three-stdlib 2.6.4 (or later) and 2.6.3.
It’s not a reproduction that would support a bug report (it’s a large-ish, complex app), but I wonder if anyone with more three.js experience than me recognizes from some screen shots what might be going on here?
I have a three.js component (built via react-three-fiber) which renders some 3D terrain, lit by a virtual sun. On initial load, it all looks fine:
If I navigate away from the page (which unmounts the three.js r3f component, and should dispose of the various elements) and then back again, the lighting renders incorrectly:
While the camera position is slightly changed (shallower angle to the terrain, my bad), the landscape should appear as brightly lit as in the first screenshot, but instead it appears dark/blackened. No changes in my code other than in the version differences mentioned above.
This issue does not occur with r.135 + three-stdlib 2.6.3.
The terrain is rendered using a Plane with a standard material using texture, displacement, normal and alpha maps (to mask to a cylinder shape), plus a depth material (to support self-shadowing).
Do any experts recognize possible causes or avenues to explore from the visual symptoms here?
Thanks!
Stephen