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

问题描述

我们正在尝试创建一个页面应用程序，用户可以在其中切换多个Three.js应用程序.但是，通过该标签页我们注意到内存使用量不断增加.它们在我们的应用程序中没有内存泄漏，并且似乎尚未从RAM中清除Three.js变量.

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个关于铬和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. 现在遍历数组并手动使所有项目均未定义.

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.

这样，我能够释放超过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 )，

您可以使用以下方式取消分配内存

you can deallocate the memory with

renderer.deallocateObject( mesh );

您可以使用以下方式取消分配纹理

You can deallocate textures with

renderer.deallocateTexture( texture );

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