pmndrs
Leaking WebGLRenderer and more when unmounting
I am using r3f for a 3d viewer web-app. When I try to navigate outside of the 3D-containing component and then navigate back into it (change of props) (in effect rerendering the <Canvas>), It creates a new WebGL2 canvas everytime whose context is not being lost. After hitting a certain number of canvases, safari forces a reload and crashes the app. This issue is only reproduced on Safari and Chrome on iOS. On Android Chrome or web chrome it works fine. I have tried manually forcing the canvas to dispose:
gl.dispose() gl.forceContextLoss() gl = undefined
I have also disposed of all objects using dispose from react-three-fiber:
dispose(model.scene)
I have seen references to the same issue here: https://github.com/pmndrs/react-three-fiber/issues/514
@Jashpatel1 Could you share your code? It's difficult to provide any help with this issue without understanding the underlying context
I'm encountering a persistent problem involving a potential memory leak within a component of react-three-fiber, specifically with the WebGLRenderer and associated elements. Despite following the documentation diligently, I've noticed that WebGL objects continue to be retained, leading to a gradual increase in memory usage when unmounting and remounting the component.
I've managed to reproduce this issue in a CodeSandbox example, which you can access here: https://codesandbox.io/p/devbox/r3f-memory-leak-forked-x8vmfs. In this sandbox, you'll observe the WebGLRenderer leak. Furthermore, our application, which loads glTF scenes, is also prone to similar leaks with the renderer.
Any insights or guidance on addressing this potential issue with react-three-fiber would be immensely appreciated.
@emnul here is the Code-Sandbox link - https://codesandbox.io/p/devbox/r3f-memory-leak-forked-x8vmfs
Also, here is the attached video of the memory leak which we are facing : https://drive.google.com/file/d/1fUc4Fpq4lztguSoM-h929dcJ0N0OLWnH/view?usp=sharing
Please help us with this memory leak issue
