Why scene.remove() Does Not Free GPU Memory in Three.js and How to Fix It
Removing a mesh from a Three.js scene graph does not release the underlying GPU resources such as vertex buffers, textures, and compiled shaders, which must be freed explicitly. Developers need to call dispose() separately on the geometry, each material, and every texture a material references, since material.dispose() alone does not clear texture uploads. Entire object hierarchies, render targets, post-processing composers, and OrbitControls each require their own dispose() calls to prevent cumulative memory leaks. Browsers typically allow only around 16 WebGL contexts per page, so failing to dispose the renderer itself in single-page apps can eventually cause a blank canvas error. Three.js exposes renderer.info.memory to track active geometries and textures, offering a straightforward way to confirm whether resources are returning to baseline after a scene teardown.
This is an AI-generated summary. ShortSingh links to the original source for the complete article.
Discussion (0)
Log in to join the discussion and vote.
Log in