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

Question

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

我偶尔会感到沮丧CONTEXT_LOST_WEBGL Chrome 中的错误迫使用户手动重新加载页面，以便(重新)呈现页面。

我不能经常或可靠地重现该错误，但我知道它会发生，因为其他人告诉我该应用程序偶尔不显示任何数据。引发此错误的情况似乎非常依赖于上下文，因此难以概括——低功率的图形适配器，或同时打开大量选项卡等。

最终用户只会知道有 CONTEXT_LOST_WEBGL如果该用户打开了开发人员工具控制台窗口，则会出现错误。否则，网页看起来只是空白。

我尝试了以下方法来设置我的 React 应用程序以在没有手动用户干预的情况下重新加载窗口，当 webglcontextlost事件发生:

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

我不确定它是否正常工作，即，如果 webglcontextlost事件正在其他地方处理。或者我想订阅错误的事件？

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

Answer 1

is there a way in raw Javascript to periodically measure available memory for WebGL

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

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

是错的。它应该是

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

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

至于优雅地恢复，这是很多工作。基本上，您需要重新创建所有 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