liberating RAM in three.js

Question

liberating RAM in three.js

My application is loading a large number of meshes. When I try to dispose of old meshes to free up memory, it seems the memory is not actually being released. Am I missing something?

Here is a simple example to reproduce the issue:

Load 100 large binary meshes
Dispose of all the meshes

After disposal, Chrome task manager shows that 250mb of memory is still being used, the same as before step 2.

memtest

var scene = new THREE.Scene();
var mymesh=Array();

// 1. Load a lot of geometry/meshes...

for(var i=0;i<100;i++)
{
    var bloader;
    bloader = new THREE.BinaryLoader();

    bloader.load( "objekte/presto_6.js" , function( geometry ) 
    {
        mymesh.push(new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( {color:0xffffff } ) ));
        scene.add(mymesh.length-1);
    });
}

// 2. Try to dispose objects and free memory...

for(var j=0;j<mymesh.length;j++)
{
    mymesh[j].geometry.dispose();
    mymesh[j].material.dispose();
    screne.remove(mymesh[j]);
}

mymesh=Array();

</script>

javascript memory three.js

Answer 1

Answer №1

Seems like a small mistake, but just in case: screne.remove(mymesh[j]); should actually be scene.remove(mymesh[j]);

Aside from that, remember to understand how JavaScript handles memory. Its garbage collector works by flagging objects that are no longer referenced and cleaning them up during the next garbage collection cycle:

for(var j=0;j<mymesh.length;j++)
{
    mymesh[j].geometry.dispose();
    mymesh[j].material.dispose();
    scene.remove(mymesh[j]);
}

The mymesh array still holds references to the mesh objects you are trying to release. The garbage collector sees these references and doesn't flag the objects for removal. To free up memory, consider reassigning or deleting the unnecessary keys in the array:

for(var j=0;j<mymesh.length;j++)
{
    mymesh[j].geometry.dispose();
    mymesh[j].material.dispose();
    scene.remove(mymesh[j]);
    mymesh[j] = undefined;//or
    delete(mymesh[j]);
}
//or simply:
mymesh = undefined;//or another value

This will release the memory, unless there are other variables referencing these objects as well.
Also, avoid using Array() as it is considered bad practice in JavaScript. Constructors should be used with the new keyword, but it's recommended to use array literals instead for simplicity:

mymesh = [];//an array literal
//example of unexpected behavior:
mymesh = new Array(10);//[undefined, undefined, undefined....]
mymesh = [10];
mymesh = new Array('10');//['10']
mymesh = new Array(1.2);//RangeError
var o = new Object(123);//returns new Number
o = new Object('something');//new String
o = new Object(false);//new Boolean
o = new Object('foo', 'bar');//new String('foo')!!!
o = {foo: 'bar'};//<-- a simpler way to create an object

Answer 2

Seems like a small mistake, but just in case: screne.remove(mymesh[j]); should actually be scene.remove(mymesh[j]);

Aside from that, remember to understand how JavaScript handles memory. Its garbage collector works by flagging objects that are no longer referenced and cleaning them up during the next garbage collection cycle:

for(var j=0;j<mymesh.length;j++)
{
    mymesh[j].geometry.dispose();
    mymesh[j].material.dispose();
    scene.remove(mymesh[j]);
}

The mymesh array still holds references to the mesh objects you are trying to release. The garbage collector sees these references and doesn't flag the objects for removal. To free up memory, consider reassigning or deleting the unnecessary keys in the array:

for(var j=0;j<mymesh.length;j++)
{
    mymesh[j].geometry.dispose();
    mymesh[j].material.dispose();
    scene.remove(mymesh[j]);
    mymesh[j] = undefined;//or
    delete(mymesh[j]);
}
//or simply:
mymesh = undefined;//or another value

This will release the memory, unless there are other variables referencing these objects as well.
Also, avoid using Array() as it is considered bad practice in JavaScript. Constructors should be used with the new keyword, but it's recommended to use array literals instead for simplicity:

mymesh = [];//an array literal
//example of unexpected behavior:
mymesh = new Array(10);//[undefined, undefined, undefined....]
mymesh = [10];
mymesh = new Array('10');//['10']
mymesh = new Array(1.2);//RangeError
var o = new Object(123);//returns new Number
o = new Object('something');//new String
o = new Object(false);//new Boolean
o = new Object('foo', 'bar');//new String('foo')!!!
o = {foo: 'bar'};//<-- a simpler way to create an object

liberating RAM in three.js

Answer №1

Similar questions

How to troubleshoot Path Intellisense in VScode when using jsconfig.json for Next.js

When trying to access the same path, useEffect does not trigger

Using animation.width() in Javascript to create a countdown

Choose a portion of the content within a div element

Running a 2D JavaScript game script on a React page - A step-by-step guide!

Unable to consistently select a radio button via code across different browsers

Displaying the product quantity counter in the shopping cart immediately after adding the item

Switching from "Straight Quotes" to "Curly Quotes"

At what point is it necessary to generate a new vertex array object when sketching numerous objects?

Dealing with empty POST request bodies in Node.js Express is a common challenge

Stop the Sidebar from showing up on certain pages with Next.js

Generating a JSON outcome from a SQL server database

Tips for creating a hover-activated dropdown menu

What are the most effective ways to manage state in form components using React?

The CSS styling is not being rendered correctly on the AngularJS HTML page

Is it possible to directly add a child in HTML from nodejs?

What are the risks of using react + bootstrap without importing bootstrap.js?

Using JavaScript, the list of items (images) will be displayed and placed into HTML panels

What could be causing the error with firebase Sign In in next.js?

What is the best way to declare a variable within a VueJS v-if condition without it being visible?