内存泄漏在Three.js

Question

我们正在尝试创建一个单页应用,用户可以在多个Three.js应用之间切换.但是,我们注意到选项卡的内存使用量不断增加.它们在我们的应用程序中没有内存泄漏,似乎Three.js变量没有从RAM中清除.

重新创建的步骤

1. 访问http://threejs.org/examples/并在Google Chrome中打开任务管理器,以通知相关标签的内存使用情况.
2. 继续在示例之间切换,您会发现内存使用量不断增加,似乎GC从未发生或无法脱钩以前消耗的内存块.
3. 对于我的笔记本电脑具有以下配置https://aboutmybrowser.com/pDp7aTxH内存轻松拍摄超过1GB时,一切都开始冻结.

我注意到有关于这个内存问题的关于chrome和firefox的2个错误,但尚未提供解决方案.

请帮我解释如何释放内存,我在互联网上找到的大部分内容都无济于事.

PS:我已经在Three.js上提交了一个错误https://github.com/mrdoob/three.js/issues/4276

Answer 1

这就是我的诀窍

1. 创建一个数组,用于保存添加到场景中的所有项目.
2. 每当向场景添加额外项目时,将其添加到此阵列.
3. 在destroy函数上,运行scene.remove('item name')将它们从场景中删除.
4. 现在迭代数组并手动使所有项目未定义.

通过这种方式,我可以在移动到另一个页面后释放超过600MB的内存.

更新 先生Doob和WestLangley的回答 内存泄漏有three.js和许多形状

在webGLRenderer中,删除网格后

scene.remove( mesh ),

你可以释放内存

renderer.deallocateObject( mesh );

您可以使用释放纹理

renderer.deallocateTexture( texture );