在三个 js 中处理 WebGL 损失

Question

我不知道在我的应用程序（用电子 js 编写）中的 webgl 丢失的情况下该怎么做，其中包含三个 js。我们有这两个函数

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

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