Three.js 中的内存泄漏 [英] Memory leak in Three.js

问题描述

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

We are trying to create a single page app in which user can switch between multiple Three.js apps. However we are noticing constant increase in memory usage by the tab. Their is no memory leakage in our app and seems Three.js variables are not getting cleared from RAM.

重新创建的步骤

1. 访问 http://threejs.org/examples/ 并在 Google Chrome 中打开任务管理器以注意内存相关标签的使用情况.
2. 在示例之间不断切换，您会注意到内存使用量不断增加，而且 GC 似乎从未发生或无法解除先前消耗的内存块的链接.
3. 对于我的具有以下配置的笔记本电脑 https://aboutmybrowser.com/pDp7aTxH 内存轻松达到 1GB 以上开始冻结.

1. Visit http://threejs.org/examples/ and open Task manager in Google Chrome to notice memory usage by the concerned tab.
2. Keep switching between examples and you will notice constant increase in memory usage and it seems like GC never happens or is unable to delink previously consumed memory block.
3. For my laptop with following configuration https://aboutmybrowser.com/pDp7aTxH memory easily shoots above 1GB when everything starts to freeze.

我已经注意到 2 个关于这个内存问题的错误在 Chrome 和 firefox 上提交，但尚未提供任何解决方案.

I have noticed 2 bugs filed on chromium and firefox about this memory issue but no solution has been provided yet.

请帮助我如何释放内存，我在互联网上找到的大多数东西都没有帮助.

Please help me on how to release memory, most of stuff I found on internet are not helping.

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

PS: I have filed a bug at Three.js as well https://github.com/mrdoob/three.js/issues/4276

推荐答案

这对我有用

1. 创建一个数组，用于保存添加到场景中的所有项目.
2. 每当向场景中添加额外的项目时，将其添加到此数组中.
3. 在销毁函数中，运行scene.remove('item name') 将它们从场景中移除.
4. 现在遍历数组并手动使所有项都未定义.

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

This way, I was able to free more than 600MB of memory post moving to another page.

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

Update Answer by Mr. Doob and WestLangley Memory leak with three.js and many shapes

在 webGLRenderer 中，使用

In webGLRenderer, after removing a mesh with

scene.remove(mesh),

你可以用

renderer.deallocateObject(mesh);

您可以使用

renderer.deallocateTexture( 纹理);

这篇关于Three.js 中的内存泄漏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！