Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Leaking WebGLRenderer and more when unmounting #3093

Open
Jashpatel1 opened this issue Nov 10, 2023 · 3 comments
Open

Leaking WebGLRenderer and more when unmounting #3093

Jashpatel1 opened this issue Nov 10, 2023 · 3 comments

Comments

@Jashpatel1
Copy link

Jashpatel1 commented Nov 10, 2023

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 ), 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)
Screenshot 2023-11-10 at 5 19 21 PM

I have seen references to the same issue here: #514

@emnul
Copy link

emnul commented Nov 20, 2023

@Jashpatel1 Could you share your code? It's difficult to provide any help with this issue without understanding the underlying context

@lalitkumar1994
Copy link

lalitkumar1994 commented Mar 7, 2024

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.

@prabhasjoshiavataar
Copy link

@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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants