TRE js rimozione di oggetti dalla scena (ancora riservati in HEAP)

Question

Qual è il modo corretto di rimuovere la scena della forma della mesh? In questo esempio:

removable_items = []; 
    box = new THREE.Object3D(); 
    scene.add(box); 

    function add() { 
     var mesh = new THREE.Mesh(new THREE.IcosahedronGeometry(10, 5), new THREE.MeshPhongMaterial({color: 0xFFFFFF})); 
     box.add(mesh); 
     removable_items.push(mesh); 
     //clean(); ///// when is integrated in function memory is cleaned properly 
    } 

    function clean() { 
      if(removable_items.length > 0) { 
      removable_items.forEach(function(v,i) { 
       v.parent.remove(v); 
      }); 
      removable_items = null; 
      removable_items = []; 
      } 
    } 

    function makeExperiment(r) { 
     var i = 0; 
     while (i < r) { 
     add(); 
     i++; 
     if(r === i) console.log(r+' finnished '); 
     } 
    } 

makeExperiment(50); 

/// dopo che i mannualy impostato clean();

maglie non sono visibili in scena più, come previsto, ma davanzale utilizzando la memoria, che dopo un certo tempo di rivestimento con perdita di memoria e crash del browser.

Dov'è il problema, THREE.js ha fatto altri riferimenti?

Three.js R73

EDIT: quando è clean(); integrato in funzione (commentata ora nel codice) memoria viene pulita correttamente. Ma quando ho impostato clean(); manualmente dopo che makeExperiment(); è terminato, la memoria non è impostata come libera.

Answer 1

Ho fatto alcuni esperimenti e io penso non c'è niente di veramente sbagliato nel codice. Una cosa che ho imparato, però, è che quel garbage collector potrebbe non funzionare esattamente quando pensi che lo faccia. Nel caso in cui, ho avvolto il codice in un IIFE (buona pratica ma non necessario in questo caso) e mi aspettavo che l'heap venisse cancellato non appena la funzione finisse di funzionare e uscisse dall'ambito. Ma in realtà voluto del tempo affinchè eliminino:

Così ho pensato, okey, thats non bene, che cosa se stavo creando più oggetti in quel periodo in cui il garbage collector è solo persistente, in modo ho fatto:

. 
. 
makeExperiment(50); 
clean(); 
makeExperiment(50); 
clean(); 
makeExperiment(50); 
clean(); 
makeExperiment(50); 
clean(); 
makeExperiment(50); 
clean(); 
makeExperiment(50); 
clean(); 
makeExperiment(50); 
clean(); 
makeExperiment(50); 
clean(); 

e questo è ciò che è accaduto:

L'immondizia c sembra che ollector stia facendo il suo lavoro e tu li stia cancellando correttamente per questo scopo. Tuttavia,, probabilmente stai usando anche THREE.js Renderer, e se ho capito bene, il Renderer mantiene riferimenti a materiali, geometrie e trame. Quindi, se questi non vengono smaltiti correttamente, non saranno raccolti. THREE.js ha un metodo per Geometry s, Material s e Texture s chiamato .dispose() che notificherà al Renderer di rimuoverlo. Quindi questo è come vorrei cambiare il vostro clean() funzione:

removable_items.forEach(function(v,i) { 
    v.material.dispose(); 
    v.geometry.dispose(); 
    box.remove(v); 
});