如何在PixiJS中更优雅地处理WebGL CONTEXT_LOST_WEBGL错误？

Question

我有一个React应用程序，该应用程序使用一个使用PixiJS的数据可视化库。

我偶尔会在Chrome中遇到令人沮丧的CONTEXT_LOST_WEBGL错误，这些错误迫使用户手动重新加载页面，以便页面得以（重新）呈现。

我无法经常或可靠地重现该错误，但是我知道发生这种错误的原因是其他人告诉我该应用程序偶尔不显示任何数据。引发此错误的情况似乎非常依赖于上下文，因此很难概括一下-低功率的图形适配器或立即打开许多选项卡，等等。

如果最终用户打开“开发人员工具”控制台窗口，则最终用户只会知道存在CONTEXT_LOST_WEBGL错误。否则，该网页将显得空白。

[发生webglcontextlost事件时，我尝试了以下操作来设置我的React应用程序以重新加载窗口，而无需人工干预：

componentDidMount() {
  ...
  window.addEventListener("webglcontextlost", (e) => { window.location.reload(); });
  ...
}

我不确定webglcontextlost事件是否在其他地方处理，即不确定。还是我尝试订阅错误的事件？

否则，为了尝试更优雅地处理此问题，是否可以在原始Javascript中或通过第三方库来定期测量WebGL的可用内存，并在可用时使用该测量值来重新加载页面内存达到某个任意阈值，可能会预测即将发生的CONTEXT_LOST_WEBGL错误情况？

Answer 1

原始Javascript中有一种方法可以定期测量WebGL的可用内存

没有，就像无法测量JavaScript内存一样

window.addEventListener("webglcontextlost", (e) => { window.location.reload(); });

错了。应该是

someCanvas.addEventListener("webglcontextlost", (e) => { window.location.reload(); });

每个画布都可以单独丢失其上下文。大多数浏览器一次只允许8到16个WebGL上下文。一旦达到极限，画布就会开始失去上下文。

关于优雅恢复，这是很多工作。基本上，您需要重新创建所有WebGL资源，这意味着您需要对代码进行结构化以使其成为可能。将应用程序的所有状态与发布到WebGL的内容（或pixi.js）分开，当您遇到上下文丢失事件时，请阻止默认值并重新创建所有WebGL内容

let gl;

someCanvas.addEventListener("webglcontextlost", (e) => {
  e.preventDefault();  // allows the context to be restored
});
someCanvas.addEventListener("webglcontextrestored", (e) => {
  initWebGL(gl);
});

gl = someCanvas.getContext('webgl');
initWebGL(gl);

请注意，pixi.js本身可能会或可能不会设计为处理contextlost