0

I get a memory leak when load several obj mesh with mtl file by three.js, here is my step:

First, open this page: http://idazhenhan.github.io/threejs/loader/index.html, after data loaded click 'load', you will see some yellow meshes on screen when you move your mouse slightly;

Then, if you use windows, just open you task manager, see how much memory the browser tab cost, record it.

Last, click 'reload' re-click 'load' or 'clear' on top-left of the page, watch the memory cost in task manager again, you will see, the memory is growing up and/or seemed will never free.

I write some release code at the end of the index.js, here it is:

function reload() {
    var indexes = [];
    for (var index in scene.children) {
        if(scene.children[index].name.indexOf('test') !== -1){
            indexes.push(scene.children[index]);
        }
    }
    for(var index in indexes){
        scene.remove(indexes[index]);
    }
    load();
};

I have change the two main functions:

function load() {
    clear();
    var paths = [];
    for(var i=1;i<=4;i++){
        paths.push({obj: i + '/model_1v.obj', mtl: i + '/model_1v.mtl'});
    }

    var onProgress = function(xhr) {
        if (xhr.lengthComputable) {
            var percentComplete = xhr.loaded / xhr.total * 100;
        }
    };

    var onError = function(xhr) {};

    THREE.Loader.Handlers.add(/\.dds$/i, new THREE.DDSLoader());
    for(var i=0;i<paths.length;i++){
        var path = paths[i];
        var loader = new THREE.OBJMTLLoader();
        loader.load(path.obj, path.mtl, function(model) {
            model.name='test-' + i;
            scene.add(model);
        }, onProgress, onError);
    }
}

function clear() {
    THREE.Cache.clear();
    var models = [];
    for (var i in scene.children) {
        if(scene.children[i].name.indexOf('test') !== -1){
            models.push(scene.children[i]);
        }
    }
    for(var i in models){
        scene.remove(models[i]);
        models[i].traverse(
           function(obj){
                if (obj instanceof THREE.Mesh) {
                    obj.geometry.dispose();
                    obj.material.dispose();
                }
            }, true
        );
    }
    models.length = 0;
};

But it is still invalid, if you are interested of this, you can clone the code at here : https://github.com/idazhenhan/idazhenhan.github.io.git , then run the code on you local server, you will see the problem clearly.

Is there any one can help me to solve it?

8
  • Geometry has a dispose() method.
    – gaitat
    Jun 27, 2015 at 12:26
  • I have change the main function above, but it's still invalid.
    – derek
    Jun 27, 2015 at 12:41
  • take a look at stackoverflow.com/questions/12945092/…
    – gaitat
    Jun 27, 2015 at 13:12
  • yes, i read the answer several days ago, and i tried the method, now i find there is a global cache in Three.js, THREE.Cache, i find some cache data in it's 'files' property, so, before execute load(), i invoke THREE.Cache.clear(), the new code is upload, i saw the problem still is here :(
    – derek
    Jun 27, 2015 at 13:27
  • are you still using the reload() function? because the link on top still uses reload().
    – gaitat
    Jun 27, 2015 at 14:08

1 Answer 1

0

For the javascript garbage collector (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_Management) to kick in all references to an object must be zero. One way to tell javascript that you are done with an object is to set it to undefined. In addition you need to dispose() all of the group of objects underneath. Here is my version of disposing a hierarchy.

After your call to scene.remove(models[i]);

Use it: disposeHierarchy (object, disposeNode); or disposeNode (node);

var debugging = false;
var indent = "", indent_level = 0;

function disposeNode (node)
{
    if (debugging) console.log (indent_level + " " + indent + "\"" + node.name + "\"");

         if (node instanceof THREE.Camera)
    {
        if (debugging) console.log (indent + "\"" + node.name + "\"" + " " + "\"" + node.type + "\"" + " Camera");

        node = undefined;
    }
    else if (node instanceof THREE.Light)
    {
        if (debugging) console.log (indent + "\"" + node.name + "\"" + " " + "\"" + node.type + "\"" + " Light");

        node.dispose ();
        node = undefined;
    }
    else if (node instanceof THREE.Mesh)
    {
        if (debugging) console.log (indent + "\"" + node.name + "\"" + " " + "\"" + node.type + "\"" + " Mesh");

        if (node.geometry)
        {
            if (debugging) console.log (indent + indent + "I have Geometry");

            node.geometry.dispose ();
            node.geometry = undefined;
        }

        if (node.material)
        {
            if (node.material instanceof THREE.MeshFaceMaterial)
            {
                if (debugging) console.log (indent + indent + "I have many Materials");

                $.each (node.material.materials, function (idx, mtrl)
                {
                    if (mtrl.map)           mtrl.map.dispose ();
                    if (mtrl.lightMap)      mtrl.lightMap.dispose ();
                    if (mtrl.bumpMap)       mtrl.bumpMap.dispose ();
                    if (mtrl.normalMap)     mtrl.normalMap.dispose ();
                    if (mtrl.specularMap)   mtrl.specularMap.dispose ();
                    if (mtrl.envMap)        mtrl.envMap.dispose ();

                    mtrl.dispose ();    // disposes any programs associated with the material
                    mtrl = undefined;
                });
            }
            else
            {
                if (debugging) console.log (indent + indent + "I have Material");

                if (node.material.map)          node.material.map.dispose ();
                if (node.material.lightMap)     node.material.lightMap.dispose ();
                if (node.material.bumpMap)      node.material.bumpMap.dispose ();
                if (node.material.normalMap)    node.material.normalMap.dispose ();
                if (node.material.specularMap)  node.material.specularMap.dispose ();
                if (node.material.envMap)       node.material.envMap.dispose ();

                node.material.dispose ();   // disposes any programs associated with the material
                node.material = undefined;
            }
        }

        node = undefined;
    }
    else if (node instanceof THREE.Object3D)
    {
        if (debugging) console.log (indent + "\"" + node.name + "\"" + " " + "\"" + node.type + "\"" + " Object3D");

        node = undefined;
    }
    else
    {
        if (debugging) console.log (indent + "UNKNOWN " + "\"" + node.name + "\"" + " " + "\"" + typeof node + "\"");
    }
}

function disposeHierarchy (node, callback)
{
    indent += "    ";
    indent_level++;

    for (var i = node.children.length - 1; i >= 0; i--)
    {
        var child = node.children[i];
        disposeHierarchy (child, callback);
        callback (child);
    }

    indent = indent.substr (4); // remove 4 spaces from indent
    indent_level--;
}
1
  • GREAT ! The memory usage is reduced a lot, thank you very much!
    – derek
    Jun 27, 2015 at 15:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.