It seems like Three.js does not have a good way to dispose a THREE.Scene and all of the objects within that scene.

Currently I am doing the following:

  $.each(scene.__objects, function(idx, obj) {                               
    scene.remove(obj);                                                                                     
    if (obj.geometry) {                                                                                    
      obj.geometry.dispose();                                                                              
    }                                                                                                      
    if (obj.material) {                                                                                    
      if (obj.material instanceof THREE.MeshFaceMaterial) {                 
        $.each(obj.material.materials, function(idx, obj) {                 
          obj.dispose();                                                                                   
        });                                                                                                
      } else {                                                                                             
        obj.material.dispose();                                                                            
      }                                                                                                    
    }                                                                                                      
    if (obj.dispose) {                                                                                     
      obj.dispose();                                                                                       
    }                                                                                                      
  });             

Looking at the Chrome Heap profiler, there are still many objects that do not get cleaned up (Textures, Shader Materials, Vectors, etc...).

It seems like Three.js does not have a good way to dispose a THREE.Scene and all of the objects within that scene.

Currently I am doing the following:

  $.each(scene.__objects, function(idx, obj) {                               
    scene.remove(obj);                                                                                     
    if (obj.geometry) {                                                                                    
      obj.geometry.dispose();                                                                              
    }                                                                                                      
    if (obj.material) {                                                                                    
      if (obj.material instanceof THREE.MeshFaceMaterial) {                 
        $.each(obj.material.materials, function(idx, obj) {                 
          obj.dispose();                                                                                   
        });                                                                                                
      } else {                                                                                             
        obj.material.dispose();                                                                            
      }                                                                                                    
    }                                                                                                      
    if (obj.dispose) {                                                                                     
      obj.dispose();                                                                                       
    }                                                                                                      
  });             

Looking at the Chrome Heap profiler, there are still many objects that do not get cleaned up (Textures, Shader Materials, Vectors, etc...).

• javascript
• memory-leaks
• three.js

• update to r.55 and see mrdoob.github./three.js/examples/webgl_test_memory.html – WestLangley Commented Jan 25, 2013 at 21:27
• I had the wrong version number in the title. I am on r55. That sample is what I went off to create the above code. – zfedoran Commented Jan 25, 2013 at 22:30

1 Answer 1

I agree with arriu that there should be a cleaner and generic way to dispose of memory in three.js, probably starting from the scene node and traversing all the way down. I also think that his generic function above should be extended in order to handle more types of memory allocation.

• Looking at the example webgl_test_memory.html it does something very specific to the example and frees up memory right after its allocation.
• Looking at webgl_test_memory2.html this example also does something very specific by adding meshes to an array and then going through and disposing the elements of the array. This method can not handle many memory allocations that have been made within the function calls.

I am not saying that the two examples do not free up memory. I think that the scene node should have a method to free all the memory below it.