Hey everyone, I have been troubleshooting a recurring WebGL performance bottleneck and was hoping to get some insight from the community. We recently tested an interactive Three.js asset preview canvas integrated into the front-end over on this website, but we are experiencing noticeable frame drops after users browse around and interact with the viewport for a couple of minutes. Looking into Chrome DevTools, the JS heap keeps climbing and the WebGL memory snapshot indicates that buffer geometries and textures are not being released properly even after removing meshes from the scene graph. A related complication we noticed is that on lower-end mobile devices, triggering orientation changes or toggling display states occasionally throws a WebGL context lost warning that fails to restore cleanly. I went through the standard cleanup routine by traversing the scene to call dispose on materials and textures, yet memory consumption refuses to fall back to baseline. Has anyone run into a similar resource retention issue when mounting and unmounting a Three.js canvas dynamically, and what is the best practice to ensure the renderer completely flushes its GPU buffers?
It is weird that even after a clean material/geometry dispose, you are still having issues! Make sure that everything as recommended here:
Also see those examples:
If you are still experiencing issues, then check if it is only Three.js that causes the memory leak or you have other logic code that might cause this issue.