Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

three.js

webgl

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?

like image 226
BaptisteB Avatar asked Jan 16 '13 02:01

BaptisteB


People also ask

How do I fix WebGL rendering context lost?

Solution: To resolve the behavior: Update the graphics card drivers and retest. Reduce file/model size or complexity, then reupload.

Does Three Js use WebGL?

js. Three. js is a cross-browser JavaScript library and application programming interface (API) used to create and display animated 3D computer graphics in a web browser using WebGL.


1 Answers

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);
like image 157
John McKnight Avatar answered Dec 22 '22 01:12

John McKnight