javascript Three.js 中的内存泄漏

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/20997669/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 19:47:35  来源:igfitidea点击:

Memory leak in Three.js

javascriptmemory-managementmemory-leaksthree.js

提问by Gaurav

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.

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

Steps to recreate

重新创建的步骤

  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/pDp7aTxHmemory easily shoots above 1GB when everything starts to freeze.
  1. 访问http://threejs.org/examples/并在 Google Chrome 中打开任务管理器以通过相关选项卡查看内存使用情况。
  2. 继续在示例之间切换,您会注意到内存使用量不断增加,而且 GC 似乎从未发生或无法解除先前消耗的内存块的链接。
  3. 对于我的具有以下配置的笔记本电脑https://aboutmybrowser.com/pDp7aTxH当一切都开始冻结时,内存很容易超过 1GB。

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

我注意到 2 个关于这个内存问题的 bug 提交到了 Chromium 和 firefox 上,但还没有提供任何解决方案。

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

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

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

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

回答by Gaurav

Here is what did the trick for me

这是什么对我有用

  1. Create an array which will hold all items added to scene.
  2. Whenever add an extra item to scene, add it to this array.
  3. On destroy function, run scene.remove('item name') to remove them from scene.
  4. Now iterate through array and manually make all the items undefined.
  1. 创建一个数组,该数组将保存添加到场景中的所有项目。
  2. 每当向场景添加额外项目时,将其添加到此数组中。
  3. 在销毁功能上,运行 scene.remove('item name') 将它们从场景中删除。
  4. 现在遍历数组并手动使所有项目未定义。

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

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

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

更新由杜布先生和WestLangley答案 内存与three.js所和许多形状泄漏

In webGLRenderer, after removing a mesh with

在 webGLRenderer 中,删除网格后

scene.remove( mesh ),

scene.remove( mesh ),

you can deallocate the memory with

你可以释放内存

renderer.deallocateObject( mesh );

renderer.deallocateObject( mesh );

You can deallocate textures with

您可以使用

renderer.deallocateTexture( texture );

renderer.deallocateTexture( texture );