Properly removing an object from a THREE.js scene while still preserving it in the HEAP

Question

Properly removing an object from a THREE.js scene while still preserving it in the HEAP

Is there a correct way to remove mesh from a scene without causing memory leaks?

    removable_items = [];
    box = new THREE.Object3D();
    scene.add(box);

    function add() {
        var mesh = new THREE.Mesh( new THREE.IcosahedronGeometry( 10, 5 ), new THREE.MeshPhongMaterial( {color: 0xFFFFFF}) );   
        box.add( mesh );
        removable_items.push(mesh);
        //clean(); ///// when is integrated in function memory is cleaned properly
    }   

    function clean() {
          if( removable_items.length > 0 ) {
            removable_items.forEach(function(v,i) {
               v.parent.remove(v);
            });
            removable_items = null;
            removable_items = [];
          }
    }

    function makeExperiment(r) {
      var i = 0;
      while (i < r) {
        add();
        i++;
        if( r === i ) console.log(r+' finnished ');
      }
    }

makeExperiment(50);

/// after that i mannualy set clean();

After removing meshes from the scene, they are no longer visible, but memory still shows signs of leaking. Is THREE.js creating additional references?

THREE.js R73

EDIT: When clean(); is integrated within a function (currently commented out in the code), memory is properly cleaned. However, setting clean(); manually after makeExperiment(); does not free up memory correctly.

javascript three.js

Answer 1

Answer №1

After conducting a series of experiments, I have come to the conclusion that there is nothing inherently wrong with your code. However, one thing to note is that the garbage collector may not run exactly when you expect it to. I wrapped your code in an IIFE as a precaution, although it was not necessary in this case, and anticipated the heap to be cleared once the function completed and went out of scope. Surprisingly, it took some time for the heap to be cleared:

https://i.sstatic.net/ut2HQ.png

Concerned by this delay, I decided to create more objects during the timeframe where the garbage collector was lingering. Here is what I did:

.
.
makeExperiment(50);
clean();
makeExperiment(50);
clean();
makeExperiment(50);
clean();
makeExperiment(50);
clean();
makeExperiment(50);
clean();
makeExperiment(50);
clean();
makeExperiment(50);
clean();
makeExperiment(50);
clean();

And here are the results:

https://i.sstatic.net/mT6Jz.png

It appears that the garbage collector is indeed functioning properly, and you are correctly deleting the objects for this particular purpose. Nevertheless, if you are also using the THREE.js Renderer, it retains references to materials, geometries, and textures. If these are not disposed of correctly, they will not be garbage collected. THREE.js provides a method for Geometries, Materials, and Textures called .dispose(), which alerts the Renderer to remove them as well. Therefore, I would recommend updating your clean() function as follows:

removable_items.forEach(function(v,i) {
  v.material.dispose();
  v.geometry.dispose();
  box.remove(v);
});

Answer 2

After conducting a series of experiments, I have come to the conclusion that there is nothing inherently wrong with your code. However, one thing to note is that the garbage collector may not run exactly when you expect it to. I wrapped your code in an IIFE as a precaution, although it was not necessary in this case, and anticipated the heap to be cleared once the function completed and went out of scope. Surprisingly, it took some time for the heap to be cleared:

https://i.sstatic.net/ut2HQ.png

Concerned by this delay, I decided to create more objects during the timeframe where the garbage collector was lingering. Here is what I did:

.
.
makeExperiment(50);
clean();
makeExperiment(50);
clean();
makeExperiment(50);
clean();
makeExperiment(50);
clean();
makeExperiment(50);
clean();
makeExperiment(50);
clean();
makeExperiment(50);
clean();
makeExperiment(50);
clean();

And here are the results:

https://i.sstatic.net/mT6Jz.png

It appears that the garbage collector is indeed functioning properly, and you are correctly deleting the objects for this particular purpose. Nevertheless, if you are also using the THREE.js Renderer, it retains references to materials, geometries, and textures. If these are not disposed of correctly, they will not be garbage collected. THREE.js provides a method for Geometries, Materials, and Textures called .dispose(), which alerts the Renderer to remove them as well. Therefore, I would recommend updating your clean() function as follows:

removable_items.forEach(function(v,i) {
  v.material.dispose();
  v.geometry.dispose();
  box.remove(v);
});

Properly removing an object from a THREE.js scene while still preserving it in the HEAP

Answer №1

Similar questions

Conflicting node module versions arise during the installation of modules for electron

Verifying the functionality of a m3u8 URL with Javascript

Using Node.js, Express.js, and Redis.io for efficient order processing

The npm package installation process encountered difficulties in accessing the Chart.Js library

Why is Angular.orderBy not displaying any data on the Page?

Fetching Data Using Cross-Domain Ajax Request

Instructions for adding the more-vert icon from material-ui into a react project

The Action Creator is not being waited for

unable to retrieve access-token and uid from the response headers

Mastering the Art of Tab Selection with Jquery

Adding a custom script with wp_enqueue_script() upon form submission: Steps and guidelines

Printing in HTML is limited to only one page

Tips for improving the efficiency of your search feature

Closing an Angular Modal Service from External Elements - Learn the Techniques

Need help setting parsed values on jQuery Autocomplete after Keyup event?

Tips for transferring parameters between functions in AngularJS

JavaScript code that activates several hovering elements

Encountering an unforeseen identifier error while attempting to install GitHub using

Choosing comparable choices from the drop-down menu

Modify a property within an object stored in an array using React with Redux