Clean up Threejs WebGl contexts

Question

I have a problem while cleaning up my WebGl-Scenes. I\'m using Three.js with a WebGlRenderer. In my application I have to change the views quite often and therefore need to rend

Answer 1

You can keep the same renderer for different scenes. The renderer does not care what scene it will render. You can supply a different Scene everytime you call render() if you like.

// instantiate only once and keep it
var renderer = new THREE.WebGLRenderer();

// current scene and camera. Switch whenever you like
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(...);
fillScene(scene);

// rendering always uses current scene
function render() {
    renderer.render(scene, camera);
    requestAnimationFrame(render);
}

/* ... 
 *   somewhere in your application
 * ...
 */
if(condition) {
  // switch scene
  scene = new THREE.Scene();
  fillOtherScene(scene);
}

Answer 2

I've got same problem, but i couldn't solve it using SPA, because of requirements.

There is .forceContextLoss() method in WebGLRenderer (rev 71, maybe was early) for this situations.

So, my code in 'deallocate' method is somemethig like

_self.renderer.forceContextLoss();
_self.renderer.context = null;
_self.renderer.domElement = null;
_self.renderer = null;

Answer 3

You should create and use only one WebGlRenderer. In my SPA (single page application) I had weird problem with camera/scene in THREE.js after few redirects. It was because WebGlRenderer was created every time when one particular page was rendered. There was no error in console log (only the warning you wrote). Bug appeared as change in camera position and problems with rendering.