Performance Drops When Trying To Reset Whole Scene With Three.js

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 pu

Solution 1:

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.

Solution 2:

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

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