The issue of memory leakage in Three.js

Question

The issue of memory leakage in Three.js

I have come across an unusual memory leak in three.js (r73). Here are the steps to reproduce it:

1) Go to the following link using Google Chrome (version 46.0.2490.80 m)

2) Open DevTools -> Profiles -> Take Heap Snapshot. Check out my screenshot below:

3) Take another heap snapshot after 10 seconds. You'll notice that the heap size has increased.

However, if you open this page locally on your computer without a server, the heap size remains within the range of 5-6 Mb.

Why does the used memory size keep increasing in the example but stays constant when opening the page locally?

Thank you in advance!

Best regards, Vasily.

javascript memory-leaks three.js

Answer 1

Answer №1

The memory allocation and deallocation example is showing signs of leakage not just at the provided link: , but also when accessed from a local web server using Three.js r74.

There seems to be no significant increase in GPU memory usage.

Upon inspection, it seems that the example is being aggressively garbage collected and does not exhibit any leaks when executed directly from the file path instead of through a web server.

I experimented with calling additional dispose methods in my evaluation:

function render() {
var geometry = new THREE.SphereGeometry( 50, Math.random() * 64, Math.random() * 32 );

var texture = new THREE.Texture(createImage());
texture.needsUpdate = true;

var material = new THREE.MeshBasicMaterial({ map: texture, wireframe: true })
var mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
renderer.render( scene, camera );

scene.remove( mesh );

mesh.geometry.dispose();
mesh.material.dispose();
texture.dispose();

renderer.dispose( mesh );
renderer.dispose(texture);
renderer.dispose(mesh.geometry);
renderer.dispose(mesh.material);
}

Answer 2

The memory allocation and deallocation example is showing signs of leakage not just at the provided link: , but also when accessed from a local web server using Three.js r74.

There seems to be no significant increase in GPU memory usage.

Upon inspection, it seems that the example is being aggressively garbage collected and does not exhibit any leaks when executed directly from the file path instead of through a web server.

I experimented with calling additional dispose methods in my evaluation:

function render() {
var geometry = new THREE.SphereGeometry( 50, Math.random() * 64, Math.random() * 32 );

var texture = new THREE.Texture(createImage());
texture.needsUpdate = true;

var material = new THREE.MeshBasicMaterial({ map: texture, wireframe: true })
var mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
renderer.render( scene, camera );

scene.remove( mesh );

mesh.geometry.dispose();
mesh.material.dispose();
texture.dispose();

renderer.dispose( mesh );
renderer.dispose(texture);
renderer.dispose(mesh.geometry);
renderer.dispose(mesh.material);
}

Answer 3

Answer №2

After conducting the test in Firefox, I did not notice any spike in memory usage. It's possible that either Three.js addressed the issue or it could be specific to Chrome's WebGL engine.

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

Answer 4

After conducting the test in Firefox, I did not notice any spike in memory usage. It's possible that either Three.js addressed the issue or it could be specific to Chrome's WebGL engine.

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

The issue of memory leakage in Three.js

Answer №1

Answer №2

Similar questions

Ways to achieve outcomes from functions employing concatMap within rxjs?

Introducing the World of Wordpress Blogging

Prevent image upload until text is clicked on

What are some ways to prevent manual page reloading in Node.js when using EJS?

Error message: "The property is not found within the specified type when using the OR operator with

JavaScript throws an error when attempting to access an object's methods and attributes

Executing functions with directive controllers

Having an issue with displaying the country name and country code in a table using the Angular7 custom pipe

Is using async/await with setState() in React.js the best approach for handling asynchronous operations?

Trouble with formatting a HTML form

Contrasting onevent with addEventListener

Is there a way to execute a node script via command line sans the need for installation and external packages?

Troubleshooting Challenges in JavaScript/jQuery Hangman Game

Error: Unexpected character encountered

Angular code is failing to send a signal to the server following a $http.post request

Traverse JSON data using associative loops

Problem with character encoding in Node.js

Generate 2 configurations for webpack

Is verifying email and password with jquery possible?

When the clearOnBlur setting is set to false, Material UI Autocomplete will not