尝试使用Three.js重置整个场景时性能下降 [英] Performance drops when trying to reset whole scene with Three.js

问题描述

在我目前的项目中，Im使用Threejs构建一个带有网格的级别。所有的图形东西与相机，场景，投影仪，渲染器等是在一个对象。为了测试的目的，我想用不同的参数重置整个场景，例如不同的电平大小。

In my current project Im using Threejs for buildin a level with meshes. All the graphical stuff with camera, scene, projector, renderer and so on is done in one object. For test purposes I want to reset the whole scene with different parameters, for example different level sizes.

因为我想测量算法的时间，我想要一个完全重置。所以我目前的方法是删除包含场景/画布的div框和删除具有threejs代码的整个对象。之后，我实例化一个新的对象的图形级别。不幸的是，连续10次这样做会导致严重的性能损失。

Because I want measure time of an algorithm I want a "full" reset. So my current approach is deleting the div-box containing the scene/canvas and deleting the whole object which has the threejs code. After this I instantiate a new object for the graphical level. Unfortunately doing this like 10 times in a row results in drastical performance loss.

我也尝试删除场景中的所有网格scene.delete（） ，渲染器等等，然后删除整个对象。但仍然有性能问题。

I also tried deleting all meshes in the scene with scene.delete() and deleting things like scene, renderer and so on before deleting the whole object. But still performance issues.

那么如何实现所有图形化的webgl组件的整个重置，而不会导致性能损失？

So how can I achieve a whole reset of all graphical webgl components without performance loss?

推荐答案

删除与三个相关的一切都不能解决问题，因为即使你的WebGLRenderer删除，它从不释放它的WebGL上下文，所以你最终得到多个WebGL上下文同时运行。性能将降低每个额外的现场上下文。

Deleting everything to do with three won't solve the problem, because even as your WebGLRenderer is deleted, it never releases it's WebGL context, so you end up with multiple WebGL contexts running simultaneously. Performance will degrade for each additional live context. Eventually, a limit will be hit.

请参阅

Refer to this question for a hacked way to release the context.

释放上下文不是一个简单的方法来释放上下文。支持three.js，因为你真的不应该需要重新创建上下文。在我的情况下，使用Angular与多个应用程序阶段，其中一些使用WebGL和一些不，我只是坚持在页面级控制器中的渲染器的一个实例，以便我可以访问它在子控制器，所以不需要重新创建WebGLRenderer也不是上下文。

Releasing the context is not supported by three.js since you really shouldn't need to recreate the context. In my case, using Angular with multiple application phases where some use WebGL and some don't, I simply persist an instance of the renderer in the page-level controller, such that I can access it in subcontrollers and so never need to recreate the WebGLRenderer nor, thus, the context.

这篇关于尝试使用Three.js重置整个场景时性能下降的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！