How we handle an event lost in a webgl context in the Three.js file

Question

I want to handle the lost context event in the Three.js file. There is good documentation about this here , but unfortunately it does not work when I apply it to my renderer.domElement . I am trying to lose context by clicking, and some variable in loseContext() undefined.

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

Answer 1

You should be able to do something similar with respect to the initialization of the renderer and, of course, assuming that the variable you saved the visualizer in is called "rendering".

 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 is not a standard method this time. You can simulate it by following these steps.

Download this script to Three.JS

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

Then after you have launched the renderer, you can drag and drop the lose tag onto the canvas.

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

To start lostContext, you do this.

 renderer.context.canvas.loseContext(); 

And after that, you can also disable it after a certain number of calls.

 renderer.context.canvas.loseContextInNCalls(5);