The performance of Three.js noticeably declines when objects are constantly removed and added

Question

The performance of Three.js noticeably declines when objects are constantly removed and added

Recently, I started experimenting with three.js by building a basic shooting game. In this game, the user is required to shoot colored crates (boxes). When a crate is shot, it disappears and another random crate appears in its place.

if (intersects.length > 0) {
             intersects[0].object.material.color.setHex(Math.random() * 0xffffff);
                  scene.remove(object);
                  create_cube();
                  animate();
...

Initially, the game runs smoothly without any lag. However, as more boxes are shot, the game starts to experience performance issues.

I'm concerned whether I may be mishandling memory allocation or garbage collection. Any advice would be appreciated.

You can view my code on JSfiddle here: https://jsfiddle.net/k0s2nmru/

(Interestingly, while the standalone version of my code works fine, it encounters issues when integrated into JSfiddle)

Update:

To monitor the performance, I have integrated stats provided by three.js which report good frames per second (up to 150 and higher), despite the visible lag in the game. Could there be a better way to implement the stats feature?

javascript performance three.js

Answer 1

Answer №1

Upon initial inspection, I can identify 3 methods to enhance the efficiency of your code

1) Avoid unnecessary calls to animate or render

    function onDocumentMouseDown(event) {
        var mouse3D = new THREE.Vector3();
        var raycaster = new THREE.Raycaster();
        mouse3D.normalize();
        controls.getDirection(mouse3D);
        raycaster.set(controls.getObject().position, mouse3D);
        var intersects = raycaster.intersectObjects(objects);
        if (intersects.length > 0) {
     intersects[0].object.material.color.setHex(Math.random() * 0xffffff);
          scene.remove(object);
          create_cube();
          animate();     //  AVOID THIS

        }
        renderer.render(scene, camera);   //  AVOID THIS
      }

The render operation is carried out within a tight loop, managed by requestAnimationFrame. It is not necessary to call them outside of this loop as it disrupts the requestAnimationFrame optimizations due to potential concurrent loops.

2) Strive for optimal rendering at all times.

     controls.getObject().translateX(velocity.x * delta);
     controls.getObject().translateY(velocity.y * delta);
     controls.getObject().translateZ(velocity.z * delta);

     if (controls.getObject().position.y < 10) {

Consider creating a temporary variable to store the result of controls.getObject() for improved optimization.

3) Repurpose when possible

In alignment with yomotsu's suggestion, consider disabling the visibility of the impacted cube upon collision, adjusting its color and position, and then reinstating its visibility.

Answer 2

Upon initial inspection, I can identify 3 methods to enhance the efficiency of your code

1) Avoid unnecessary calls to animate or render

    function onDocumentMouseDown(event) {
        var mouse3D = new THREE.Vector3();
        var raycaster = new THREE.Raycaster();
        mouse3D.normalize();
        controls.getDirection(mouse3D);
        raycaster.set(controls.getObject().position, mouse3D);
        var intersects = raycaster.intersectObjects(objects);
        if (intersects.length > 0) {
     intersects[0].object.material.color.setHex(Math.random() * 0xffffff);
          scene.remove(object);
          create_cube();
          animate();     //  AVOID THIS

        }
        renderer.render(scene, camera);   //  AVOID THIS
      }

The render operation is carried out within a tight loop, managed by requestAnimationFrame. It is not necessary to call them outside of this loop as it disrupts the requestAnimationFrame optimizations due to potential concurrent loops.

2) Strive for optimal rendering at all times.

     controls.getObject().translateX(velocity.x * delta);
     controls.getObject().translateY(velocity.y * delta);
     controls.getObject().translateZ(velocity.z * delta);

     if (controls.getObject().position.y < 10) {

Consider creating a temporary variable to store the result of controls.getObject() for improved optimization.

3) Repurpose when possible

In alignment with yomotsu's suggestion, consider disabling the visibility of the impacted cube upon collision, adjusting its color and position, and then reinstating its visibility.

Answer 3

Answer №2

When you delete an object, it's important to also remove the associated geometry, material, and texture in order to free up resources that are cached in the renderer.

scene.remove( mesh );
// Perform cleanup
geometry.dispose();
material.dispose();
texture.dispose();

For a practical example, you can check out this demo:

Answer 4

When you delete an object, it's important to also remove the associated geometry, material, and texture in order to free up resources that are cached in the renderer.

scene.remove( mesh );
// Perform cleanup
geometry.dispose();
material.dispose();
texture.dispose();

For a practical example, you can check out this demo:

The performance of Three.js noticeably declines when objects are constantly removed and added

Answer №1

Answer №2

Similar questions

Having trouble targeting multiple dropdowns using jQuery

When switching windows or tabs, the user interface of the browser extension vanishes

JavaScript pause until image finishes uploading

Challenges with retrieving all text records in a profile using ethers.js

The specified selector is invalid or illegal in HTMLUnit

Remove a textbox dynamically in jQuery using solely jQuery without the use of traditional JavaScript code

Ways to troubleshoot setTimeout functioning during HTTP requests?

Creating an HTML file using PUG in a local environment (using npm and gulp)

Is there a way to trigger an Axios response without repeated calls or the use of a button?

How can I ensure that my text input and button are in sync in ReactJS?

The React JSX error you encountered is due to the missing return value at the end of the arrow function

Dealing with numerous Ajax calls within a single Ajax request

Prevent title flickering in Android using Ionic

Implementing Google Ads Code in NextJS for Automated Units

The Alert Component fails to display when the same Error is triggered for the second time

The art of properly indenting coffee script code

What is the best way to eliminate the space between two columns of a row in Bootstrap 5 grid system?

Unable to transfer HTML code into the TinyMCE editor

Using Jquery to make an Ajax request to an Asp.net Web Method

What is the best way to notify a user one minute before their cookie expires using PHP and JavaScript?