处理三个js中的WebGL丢失

Question

我无法弄清楚在我的应用程序（使用电子js编写）中使用三个js丢失webgl时该怎么做。我们有这两个功能

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

当我使用类似的东西模拟上下文丢失时

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();

然后webglcontextrestored事件触发，一切恢复原样。

当webgl被真实杀死或使用类似的东西时

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

然后这个事件webglcontextrestored永远不会被解雇。 怎么回事？如何捕捉这种背景已经失去了。

感谢任何想法。

Answer 1

您应该使用与释放上下文相同的扩展引用来使用对象的 restoreContext() 方法恢复上下文：

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);

您也可以从检查器中以迭代方式进行模拟...