CODEWITHSUNDEEP
reactjsthree.jsmemory-leaksout-of-memorywebgl
cmtrswtng
cmtrswtng

Reputation: 1

Memory Leak and WebGLContextLost

I have a TypeScript React component that loads multiple 3D models using Three.js and displays them in specific positions based on the values of an array from the backend (data[frame]). I create a renderer and a camera using useRef, and I also have OrbitControls. I can switch frames as much as I want and view the desired frames. However, when viewing approximately 80-100 frames, the browser suddenly turns black for a few seconds, and then the blackness disappears, then the following message is logged in the console:

WebGL: CONTEXT_LOST_WEBGL: loseContext: context lost

I clear the scene and renderer, but it doesn't really help with this error.

return () => {
    renderer.current?.dispose();
    renderer.current?.clear();
    scene.clear();
};

I tried to stop using useRef on the camera and disable OrbitControls. I also tried not to change the position of the models but instead load new models in their place. However, things only got worse because of the latter approach, so I gave up on that idea. I found out that for first 20 frames memory using is like 1-10mb per frame, but later it became 30-50mb. I turned off cache saving but it didn't help at all, something is saving somewhere, but what and where I don't know

Upvotes: 0

Views: 156

Answers (1)

cmtrswtng
cmtrswtng

Reputation: 1

I fixed my problem by clearing groups that contains models, not only scene

Upvotes: 0

Related Questions