Three.js: Add cleanup/destroy to the API

Created on 16 Dec 2016  路  5Comments  路  Source: mrdoob/three.js

Not all applications run forever with three loaded.
Sometime we need to get rid of all objects.

In my tests at least renderer.domElement held a reference to the canvas, preventing the garbage collection.

http://stackoverflow.com/questions/22565737/cleanup-threejs-scene-leak
suggests some code to cleanup which should be IMO in the library itself to be proper maintained.

The easiest way would be to have
THREE.destroy()
which removes all references to fetched or created stuff

Most helpful comment

THREE itself doesn't have a reference to all the things created, so there is no way for that to work.

I agree though that information on the best way to clean up a scene is lacking - this could be a candidate for a page in the manual.

All 5 comments

THREE itself doesn't have a reference to all the things created, so there is no way for that to work.

I agree though that information on the best way to clean up a scene is lacking - this could be a candidate for a page in the manual.

there are plenty of dispose methods everywhere.

renderer.domElement held a reference to the canvas, preventing the garbage collection.

...of canvas? also, why would you keep the renderer if you are removing the canvas

Sometime we need to get rid of all objects.
In my tests at least renderer.domElement held a reference to the canvas, preventing the garbage collection.

The perfect browser does not exist.
All the GC implementations I know are buggy.
So the best "solution" is to close all the browser windows and tabs from time to time and to reload your favorite app.

Like @makc said various dispose() methods for three.js entities like geometries, materials or textures can be used to clean things up. The following example shows the usage of those methods:

https://threejs.org/examples/#webgl_test_memory

The additional manual page @looeee suggested is tracked here: #11345

Was this page helpful?
0 / 5 - 0 ratings