ThreeJS垃圾收集问题 [英] ThreeJS garbage collection issue

问题描述

我使用canvas渲染器构建了一个ThreeJS应用程序（由于项目需求），我已经遇到了内存/垃圾收集问题。

部分应用程序逻辑创建了大量网格，以实现平面2D环形/圆环上的动画片段。在每个动画过程中，我们将删除所有以前的网格并生成新的网格。

当从场景中移除对象时，它们不会从内存中删除，移动到名为__objectsRemoved的数组。这是无限期地保留 - 我想有一种垃圾收集发生，最终清理一切，但我不知道如何触发。应用程序的内存使用率不断攀升，直到它在30-40秒内使浏览器停止。

我们一直无法解决这个问题，并且正在拼命寻求建议。这个项目将很快推出，所以任何直接的指导/建议非常感谢。

下面是一个演示这个问题的小提琴。 http://jsfiddle.net/729sv/

  var camera，scene，renderer; 
 var base = 0; 
 
 init（）; 
 animate（）; 
 
函数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）; （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）; 
} 
} 
 
函数animate（）{
 requestAnimationFrame（animate）; 
 console.log（scene .__ objectsRemoved.length）; 
 renderer.render（scene，camera）; 
} 
  

我们正在运行ThreeJS R62

谢谢！

解决方案

这是库中的一个错误。对不起：（$ / b>

我不敢相信直到现在我们还没有碰到...... __ 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（）{}} 
场景.__ objectsAdded = {length：0，push：function（）{}，indexOf：function（）{return -1}，splice：function（）{}} 
 scene .__ objectsRemoved = {length：0， push：function（）{}，indexOf：function（）{return -1}，splice：function（）{}} 
 $ b} 
  

I have built a ThreeJS app using the canvas renderer (due to project requirements) that I've run into a memory/garbage collection issue with.

Part of the application logic creates a lot of meshes to achieve animations on segments of a flat 2d donut/ring. On each animation pass, we are removing all the previous meshes and generating new ones.

When objects are removed from the scene, they're not deleted from memory but instead, moved to an array called __objectsRemoved. This is kept around indefinitely - I imagine there is some kind of garbage collection that happens to clean everything up eventually but I don't know how to trigger that. The memory usage of the application continuously climbs until it grinds the browser to a halt within 30-40 seconds.

We have not been able to solve this issue and are desperately seeking advice. This project is due for launch for very soon so any immediate guidance/advice is greatly appreciated.

Here is a fiddle that illustrates the issue. 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);
}

We are running ThreeJS R62

Thank you!

解决方案

This is a bug in the library. Sorry about that :(

I can't believe we haven't hit this until now... __objectsAdded and __objectsRemoved were added for WebGLRenderer for performance reasons. However, we forgot about the side-effects this creates on other renderers (I see you're using CanvasRenderer...)

As a workaround... You can try overriding these arrays:

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(){} }

}

这篇关于ThreeJS垃圾收集问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！