大 鼠！WebGL遇到了一个障碍 - 如何调试

Rats! WebGL hit a snag - how to debug?

本文关键字：调试 何调试 一个 WebGL 遇到      更新时间：2023-09-26

调用canvas.getContext("webgl");会让Chrome触发"老鼠！WebGL遇到了障碍"消息，并且没有提供任何信息。我该如何解决这个问题？

除了canvas.getContext("webgl")返回的信息外，我没有收到其他信息null如果我自己不使用该设备，我什至不知道 Chrome 会失败并显示一条占用手机屏幕 25% 的消息，因为这不会触发错误。

这是一个函数的一部分，该函数应该通过创建新画布并获取webGL上下文来测试WebGL是否受支持：

var webGLIsSupported = function() {
  if (typeof window.webGLIsSupported !== 'undefined') {return window.webGLIsSupported;}
  var canvas = $('<canvas></canvas>')[0];
  var ctx;
  try {
    ctx = canvas.getContext('webgl'); // <- this triggers the message, and fails
  }
  catch (e) {
    window.webGLIsSupported = false;
    return false;
  }
  window.webGLIsSupported = !!ctx;
  return window.webGLIsSupported;
};

我可以从哪里开始获取有关不起作用的信息？没有任何日志是相当令人沮丧的。

将canvas.getContext('webgl')更改为canvas.getContext('experimental-webgl')没有任何区别。

我在三星S6上运行Chrome 49.0.2623.105。

正如您所注意到的，检查null是了解上下文创建是否成功的一种方法。但是，当您只检查它时，没有关于"为什么"的信息。

实际上有一个事件应该为此而触发：webglcontextcreationerror

它确实包含一个statusMessage属性，该属性应提供有关"为什么"无法创建上下文的更多信息。

来自 MDN ： 

canvas.addEventListener("webglcontextcreationerror", function(e) {
  console.log(e.statusMessage || "Unknown error"); 
}, false);

但是，我不知道你是否能对你收到的消息做点什么......

相关文章：