Memory leak in Three.js

Question

We are trying to create a single page app in which user can switch between multiple Three.js apps. However we are noticing constant increase in memory usage by the tab. Their is no memory leakage in our app and seems Three.js variables are not getting cleared from RAM.

Steps to recreate

1. Visit http://threejs.org/examples/ and open Task manager in Google Chrome to notice memory usage by the concerned tab.
2. Keep switching between examples and you will notice constant increase in memory usage and it seems like GC never happens or is unable to delink previously consumed memory block.
3. For my laptop with following configuration https://aboutmybrowser.com/pDp7aTxH memory easily shoots above 1GB when everything starts to freeze.

I have noticed 2 bugs filed on chromium and firefox about this memory issue but no solution has been provided yet.

Please help me on how to release memory, most of stuff I found on internet are not helping.

PS: I have filed a bug at Three.js as well https://github.com/mrdoob/three.js/issues/4276

Answer 1

Here is what did the trick for me

1. Create an array which will hold all items added to scene.
2. Whenever add an extra item to scene, add it to this array.
3. On destroy function, run scene.remove('item name') to remove them from scene.
4. Now iterate through array and manually make all the items undefined.

This way, I was able to free more than 600MB of memory post moving to another page.

Update Answer by Mr. Doob and WestLangley Memory leak with three.js and many shapes

In webGLRenderer, after removing a mesh with

scene.remove( mesh ),

you can deallocate the memory with

renderer.deallocateObject( mesh );

You can deallocate textures with

renderer.deallocateTexture( texture );