ThreeJS垃圾回收問題

我已經使用畫布渲染器（由於項目需求）構建了一個ThreeJS應用程序，我遇到了內存/垃圾回收問題。ThreeJS垃圾回收問題

應用程序邏輯的一部分會創建大量網格來實現平面2D環形/圓環段上的動畫。在每個動畫過程中，我們將刪除所有以前的網格並生成新的網格。

當對象從場景中移除時，它們不會從內存中刪除，而是移動到名爲__objectsRemoved的數組中。這是無限期地保留 - 我想有一種垃圾收集發生，最終清理一切，但我不知道如何觸發。應用程序的內存使用率不斷攀升，直到它在30-40秒內使瀏覽器停止。

我們還沒有能夠解決這個問題，並拼命尋求建議。這個項目很快就會發布，所以任何直接的指導/建議都非常感謝。

這是一個演示該問題的小提琴。 http://jsfiddle.net/729sv/

var camera, scene, renderer; 
var base = 0; 

init(); 
animate(); 

function init() { 
    renderer = new THREE.CanvasRenderer(); 
    renderer.setSize(window.innerWidth, window.innerHeight); 
    document.body.appendChild(renderer.domElement); 

    scene = new THREE.Scene(); 

    camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 1, 1000); 
    camera.position.z = 100; 

    document.addEventListener('mousedown', update, false); 

    update(); 
} 

function update() { 

    if (base) scene.remove(base); 

    base = new THREE.Object3D(); 
    scene.add(base); 

    for (var j = 0; j < 10; ++j) { 

     var geometry = new THREE.IcosahedronGeometry(50, 3); 
     var material = new THREE.MeshNormalMaterial() 
     var mesh = new THREE.Mesh(geometry, material); 
     base.add(mesh); 
    } 
} 

function animate() { 
    requestAnimationFrame(animate); 
    console.log(scene.__objectsRemoved.length); 
    renderer.render(scene, camera); 
}

我們正在運行ThreeJS R62

謝謝！

來源

2013-12-21 Funkmyer

各地無限期你爲什麼要保留的對象，我相信你的問題可能是未來從永久存儲「已刪除」對象這一事實出發，因爲你一直在寫對數組，它永遠不會刪除任何東西。要麼覆蓋你的價值觀，要麼就是放棄東西。 –

請勿在每個動畫傳遞中創建/刪除對象。而是創建一個對象池並重用它們。例如，請參閱http://threejs.org/examples/webgl_particles_shapes.html – WestLangley

嗨，大家好，感謝您的回覆。賈斯汀，我實際上是刪除對象，並且庫看起來像一個數組中的已刪除項目。這是我試圖解決的問題。 @WestLangley，我正在生成自定義形狀幾何圖形，以便在它們增長或收縮時的每個「甜甜圈」部分的「補間」。我不確定更有效的方法來完成這一任務，但歡迎提出任何建議。 – Funkmyer

這是庫中的一個錯誤。比較遺憾的是:(

我不能相信我們還沒有打這個到現在爲止...添加__objectsAdded和__objectsRemoved爲WebGLRenderer性能方面的原因，但我們忘記了副作用，這造成對其他渲染器（我看你正在使用CanvasRenderer ...）

作爲一種變通方法...您可以嘗試重寫這些陣列：

scene = new THREE.Scene(); 

if (renderer instanceof THREE.CanvasRenderer) { 

    scene.__lights = { length: 0, push: function(){}, indexOf: function(){ return -1 }, splice: function(){} } 
    scene.__objectsAdded = { length: 0, push: function(){}, indexOf: function(){ return -1 }, splice: function(){} } 
    scene.__objectsRemoved = { length: 0, push: function(){}, indexOf: function(){ return -1 }, splice: function(){} } 

}

來源

2013-12-22 00:19:56 mrdoob

謝謝！我會試一試，看看它是否分類。 – Funkmyer

這工作，再次感謝在這個和你所有的工作在一個夢幻般的圖書館的幫助。 – Funkmyer

這是固定在three.js R66？解決方法爲我創建了一些問題。 –

ThreeJS垃圾回收問題

回答

相關問題