在三个 js 中处理 WebGL 丢失答案

【问题标题】：handling WebGL loss in three js在三个 js 中处理 WebGL 丢失
【发布时间】：2021-03-19 01:02:54
【问题描述】：

我不知道在我的应用程序（用电子 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 从未被触发过。怎么回事？捕获该上下文的方法已丢失。

感谢您的任何想法。

【问题讨论】：

标签： javascript three.js webgl electron

【解决方案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);

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

【讨论】：