Significant slowdown observed when deleting multiple objects from the Three.js scene

Question

Significant slowdown observed when deleting multiple objects from the Three.js scene

We are facing a challenge when dealing with large Three.js scenes that consist of many individual objects. In some cases, our scenes can contain anywhere from 25,000 to 50,000 instances of Object3D. While this may seem like a lot, we haven't found an easy way to reduce this number without compromising the scene itself. When attempting to clear such a scene by removing all objects, it typically takes around two minutes to complete the process. This holds true whether we remove each element individually using scene.remove(element); or if we gather all elements first and then call

scene.remove(element1, element2, ...);

. We've even tried replacing the entire scene instance, but unfortunately, it was still slow.

Our observations have shown variations in performance based on different graphics cards, leading us to believe that the issue may be related to the use of numerous buffer geometries that need to be removed from the graphics card, impacting overall performance.

Due to the fact that the browser is blocked during object removal, the website becomes unresponsive for a significant period of time. Are there any suggestions for improving the performance of object removal or making it non-blocking (without resorting to setTimeout() for removing individual elements)?

To demonstrate the issue in a simplified manner (using 50,000 cubes removed after the first frame), you can refer to the following example: http://jsfiddle.net/ua2mg5ty/

javascript three.js

Answer 1

Answer №1

Experiment with mesh merging and removing a single mesh element.

Check out this JSFiddle demo for reference!

Removal time: 0.13500000000021828ms, Render time: 3.6000000000012733ms

var mesh = new THREE.Mesh(singleGeometry, material);
for (var i = 0; i < nCubes; i++) {
  var box = new THREE.BoxGeometry(1, 1, 1);
  var cube = new THREE.Mesh(box);
  cube.position.x = (Math.random() - 0.5) * 5;
  cube.position.y = (Math.random() - 0.5) * 5;
  cube.position.z = (Math.random() - 0.5) * 5;
  cube.scale.set((Math.random() - 1 * cubeSize), (Math.random() - 1 * cubeSize), (Math.random() - 1 * cubeSize))
  cube.updateMatrix();

  singleGeometry.merge(cube.geometry, cube.matrix);
}
var mesh = new THREE.Mesh(singleGeometry, material);
scene.add(mesh);

Answer 2

Experiment with mesh merging and removing a single mesh element.

Check out this JSFiddle demo for reference!

Removal time: 0.13500000000021828ms, Render time: 3.6000000000012733ms

var mesh = new THREE.Mesh(singleGeometry, material);
for (var i = 0; i < nCubes; i++) {
  var box = new THREE.BoxGeometry(1, 1, 1);
  var cube = new THREE.Mesh(box);
  cube.position.x = (Math.random() - 0.5) * 5;
  cube.position.y = (Math.random() - 0.5) * 5;
  cube.position.z = (Math.random() - 0.5) * 5;
  cube.scale.set((Math.random() - 1 * cubeSize), (Math.random() - 1 * cubeSize), (Math.random() - 1 * cubeSize))
  cube.updateMatrix();

  singleGeometry.merge(cube.geometry, cube.matrix);
}
var mesh = new THREE.Mesh(singleGeometry, material);
scene.add(mesh);

Significant slowdown observed when deleting multiple objects from the Three.js scene

Answer №1

Similar questions

I am looking to enhance the readability of my asynchronous function calls

the object '[object Object]' of a distinct supporting nature

"Learn the art of refreshing data in AngularJS following the use of $emit event handling

Select multiple rows by checking the checkboxes and select a single row by clicking on it in the MUI DataGrid

Guide to implementing a real-time countdown timer for days, hours, minutes, and seconds leading up to a specific date and time with JavaScript

Using nodeJS's util module to format and pass an array

The app has crashed, currently waiting for any file changes before starting again

React cannot be utilized directly within HTML code

How can these lines be drawn in a simple manner?

Guide on combining two arrays of similar objects and performing operations on a specific field within them

When zooming out, Leaflet displays both tile layers

Transfer the data-url attribute to the jQuery ajax URL

Increase the space below the footer on the Facebook page to allow for an

Rendering a dynamic list of asynchronous components in Vue 3, with support for extension

Encountering an "undefined" error when implementing the useReducer hook in React

Express JS redirect does not update the URL and fails to load static files

The choice between invoking a function within a route handler or employing a middleware for the task

Instead of the typical Three.js pointer lock first person controls, how about experimenting with orbit

Utilizing a JavaScript variable within an HTML style attribute value

Is it possible for me to create a lineString connecting two points in OpenLayers3?