How do we handle webgl context lost event in Three.js

Question

I want to handle a lost context event in Three.js. There is a nice documentation about that here but unfortunately it doesn't work when I apply it to my renderer.domElement. I try to lose the context by clicking and some variable in loseContext() are undefined.

I guess the structure is different in Three.js. Any expert?

John McKnight John McKnight · Accepted Answer · 2013-01-28T19:00:38

You should be able to do something like this about the renderer was initialized and assuming of course that the variable you stored the renderer into is named 'renderer'.

renderer.context.canvas.addEventListener("webglcontextlost", function(event) {
    event.preventDefault();
    // animationID would have been set by your call to requestAnimationFrame
    cancelAnimationFrame(animationID); 
}, false);

renderer.context.canvas.addEventListener("webglcontextrestored", function(event) {
   // Do something 
}, false);

BTW - loseContext is not defined by Three.JS and it isn't a standard method as of this time. You can simulate it by doing the following.

Load this script before Three.JS

https://github.com/vorg/webgl-debug

Then after you've started your renderer you can hook the loseContext to the canvas.

renderer.context.canvas = WebGLDebugUtils.makeLostContextSimulatingCanvas(renderer.context.canvas);

To trigger the loseContext you would do this.

renderer.context.canvas.loseContext();

And you can then also have it fail after a set number of calls by doing this.

renderer.context.canvas.loseContextInNCalls(5);

How do we handle webgl context lost event in Three.js

1 Answers