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，则浏览器的内部函数或三个延迟函数将在调用之前找到时间来实际释放渲染器loop();。

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

注意：我没有做任何测试来确认这一点

还有一个建议：也许您应该将THREE.WebGLRenderer实例放入单例中并重用它，而不是释放它。