抑制“Rats！WebGL 遇到障碍”。谷歌浏览器中的错误栏答案

【问题标题】：Suppressing the "Rats! WebGL hit a snag." error bar in Google Chrome抑制“Rats！WebGL 遇到障碍”。谷歌浏览器中的错误栏
【发布时间】：2019-10-14 17:35:13
【问题描述】：

我最近开始在我正在开发的网站上使用 WebGL。它被用作增强功能，如果 WebGL 不受支持或出现错误，网站将回退到画布渲染。

很遗憾，当 Google Chrome 中出现 WebGL 异常时，会出现错误消息栏。在用户与之交互之前，该栏不会消失。如果他们重新加载或导航到其他页面，则该消息将在网站下次尝试使用 WebGL 时重新出现。

就我的网站而言，这意味着 WebGL 错误消息永远不会消失，因为每个页面都尝试使用 WebGL。一旦发生错误，Chrome 将不会在同一站点上再次使用 WebGL，直到用户告诉它重新加载，因此连续错误消息实际上并不表示连续错误，只是连续尝试使用 WebGL。

一旦发生 WebGL 错误，只需运行以下命令即可在该站点上重现此对话框：

document.createElement('canvas').getContext('experimental-webgl');

这不会引发任何异常，并且我在 canvas 元素上的 .onerror 方法没有被调用。

我无法对此进行深入调查，因为我无法可靠地重现 WebGL 错误。（即使我可以在我的计算机上复制一个，它可能无法在其他人上复制。）

这种行为对于依赖 WebGL 的网站来说是合理的，但我的网站不这样做，因此该消息只会让用户分心和困惑。

有没有办法抑制这个错误信息？我不介意回到 Ignore 一旦发生错误就禁用 WebGL 的行为。

【问题讨论】：

标签： javascript google-chrome webgl

【解决方案1】：

如果你想忽略异常，那么下面的就足够了。

canvas.addEventListener("webglcontextlost", function(e) { e.preventDefault(); Stopdrawing(); }, false);

如果你想重试加载 webgl 上下文

canvas.addEventListener("webglcontextrestored", function (event) {initializeResources();  }, false);

编辑：

如果您想测试上下文是否得到正确处理，请在 webgl 上下文中使用 WEBGL_lose_context 扩展。

gl.getExtension("WEBGL_lose_context").loseContext()
gl.getExtension("WEBGL_lose_context").restoreContext()

【讨论】：

我似乎无法完成这项工作。 OpenGL 似乎仍然经常给我 RATS 异常。

【解决方案2】：

我花了很长时间才解决这个问题 - 似乎老鼠！使用 Chrome 调整具有基于它的 3D 上下文的画布大小时出现错误。解决方案是通过侦听器捕获调整大小并在该点重新创建画布和上下文。希望对您有所帮助。

【讨论】：