Question

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

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

对于我的网站，这意味着WebGL错误消息永远不会消失，因为每个页面都尝试使用WebGL。一旦发生错误，Chrome将不再在同一网站上使用WebGL，直到用户告知 Reload ，因此连续错误消息实际上并不表示连续错误，只是连续尝试使用WebGL。

发生WebGL错误后，只需运行以下命令即可在该网站上复制此对话框：

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

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

我无法对此进行过深入的研究，因为我无法可靠地重现WebGL错误。（即使我可以在我的电脑上复制一个，但在其他电脑上可能无法复制。）

对于依赖WebGL的网站来说，这种行为是合理的，但是我的网站没有，所以这条消息只会让用户感到分心和混淆。

有没有办法抑制此错误消息？我不介意回到忽略行为，一旦发生错误就禁用WebGL。

Answer 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()

Answer 2

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

Answer 3

可以通过在Chrome浏览器上禁用WebGL来解决此问题。如果它对您不起作用，请尝试禁用硬件加速。

您可以查看此博客文章“ https://geekermag.com/chrome-rats-webgl-hit-a-snag/”的完整详细说明