THREE.js webGL垃圾收集

Question

我们有一个使用THREE.js渲染身体网格物体3D图像的应用程序。 我们有一个名为MeshViewer的对象，它封装了渲染功能; 在初始化方法中，我们设置

this.renderer = new THREE.WebGLRenderer({ antialias: true, preserveDrawingBuffer: true })

我们写了一个脚本来测试this.renderer没有被释放。

<script>
    var count = 0;
    function loop () {
        if (count >= 25) { 
            return; 
        }
        else {
            count++;
            var viewer = new MeshViewer(
                'mesh_viewer',
                's3_assets/textured_mean_scape_female.obj',
                []
            );

            viewer.cleanup();

            setTimeout(function () {
                loop();
            }, 500);
        }
    }
    loop();
</script>

在这种情况下，'mesh_viewer'是我们想要嵌入查看器的DOM元素的id。我们的清理方法集

this.renderer = null

清理工作，从某种意义上说，如果我们不执行清理，我们会收到一个错误，即存在太多活动的WebGL上下文，我们无法创建，如果我们进行清理，我们就不会收到错误。

我的问题是，为什么在setTimeout中在循环之前调用viewer.cleanup时会失败，并且在setTimeout之前和之前调用cleanup时调用？ （这可能是一个JavaScript问题而不是THREE.js / WebGL问题。）

Answer 1

这可能与浏览器在单个线程中执行javascript和其他内容的方式有关。

如果你把viewer.cleanup(); 在setTimeout之前，浏览器的内部函数或THREE deferred函数将在调用loop();之前找到实际释放渲染器的时间loop(); 。

其他viewer.cleanup(); 和loop()将被连续调用，其间没有时间发生任何其他事情。

注意：我没有做任何测试来证实这一点

---

还有一个建议：也许你应该把你的THREE.WebGLRenderer实例放到一个单例中THREE.WebGLRenderer用它而不是释放它。