Performance drops when trying to reset whole scene with Three.js

4
votes

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.

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.

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.

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

Thanks in advance.

2
javascriptcanvaswebglthree.js
What browser are you using? For about a month I've noticed slowdowns in my WebGL page on Chrome which persist across reloading the page, and reset if I close and reopen the tab. – Kevin Reid
Yes I use Chrome in the newest Version (19). But my performance issues stop when reloading the page. As an intermediate solution I now wrote a function for my object which cleans all objects instead of deleting the whole object. This works without noticable performance drop but it would be good to know if there is a way to make a "full" reset. – DerDree
renderer.deallocateObject might be somewhere to look? – Paul Kaplan

2 Answers

4
votes

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.

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.

1
votes

Two functions that may increase your performance resetting: for each object obj in your scene, try both:

scene.remove( obj );
renderer.deallocateObject( obj );