handling WebGL loss in three js

Question

I can't figure out what to do in case of webgl loss in my application (written with electron js) with three js. We have these two functions

// renderer is THREE.WebGLRenderer
renderer.context.canvas.addEventListener("webglcontextlost", contextLostFunction);
renderer.context.canvas.addEventListener("webglcontextrestored", contextRestoredFunction);

When I simulate context loss using something like this

var canvas = document.getElementById("playground").childNodes[0].childNodes[0];
var gl = canvas.getContext("webgl");
var WEBGL_lose_context = gl.getExtension('WEBGL_lose_context');
WEBGL_lose_context.loseContext();

Then webglcontextrestored event fires and everything restores as should be.

When webgl is killed for real or using something like this

renderer.context.getExtension( 'WEBGL_lose_context' ).loseContext();

Then this event webglcontextrestored never has been fired. What is going ? What to do to catch that context has been lost.

Thanks for any ideas.

Answer 1

You should use same extension reference you use to loose the context to restore the context with the restoreContext() method of the object:

var canvas = document.getElementById("playground").childNodes[0].childNodes[0];
var gl = canvas.getContext("webgl");
var WEBGL_lose_context = gl.getExtension('WEBGL_lose_context');
WEBGL_lose_context.loseContext();

window.setTimeout(()=> {
WEBGL_lose_context.restoreContext();
}, 2000);

you can also do it from the inspector to simulate it in an iterative way...