Entfernen vieler Objekte aus Three.js Szene langsam

Question

Wir beschäftigen uns mit großen Three.js Szenen mit vielen einzelnen Objekten. Es ist leicht, mit Szenen zu enden, die 25k bis 50k Object3D Instanzen haben. Ja, das ist viel, aber wir sehen derzeit keinen einfachen Weg, diese Zahl zu senken. Das Löschen einer solchen Szene durch Entfernen aller Objekte dauert normalerweise etwa zwei Minuten. Dies ist der Fall, wenn Sie jedes Element einzeln mit scene.remove(element); entfernen und alle Elemente zuerst sammeln und scene.remove(element1, element2, ...); aufrufen. Wir haben auch versucht, die komplette Szeneninstanz zu ersetzen, aber ohne Erfolg: Es war immer noch langsam.

Wir haben einige Unterschiede zwischen verschiedenen Grafikkarten gesehen und vermuten, dass dies mit der Verwendung vieler Puffergeometrien zu tun hat, die vermutlich von der Grafikkarte entfernt werden müssten (was dann die Leistung beeinflussen würde).

Da der Browser während der Entfernung des Objekts blockiert, wird die Website für diesen Zeitraum unbrauchbar. Sehen Sie eine Möglichkeit, die Leistung der Objektentfernung zu verbessern oder nicht blockierend zu machen (ohne setTimeout() zum Entfernen einzelner Elemente)?

Dies zeigt das Problem in einer vereinfachten Art und Weise (mit 50k Würfel, nach dem ersten Rahmen entfernt, aber einige unserer Objekte sind viel komplexer): http://jsfiddle.net/ua2mg5ty/

Answer 1

Try Mesh merge und Entfernen eines einzelnen Netzes.

http://jsfiddle.net/2t8j5caj/

Removal Zeit: 0.13500000000021828ms, Renderzeit: 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);