javascript - 老鼠! WebGL 遇到障碍——如何调试？

Question

调用 canvas.getContext("webgl"); 让 Chrome 触发“Rats!WebGL hit a snag”消息，但不提供任何信息。我该如何解决？

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

这是一个函数的一部分，该函数应该通过创建新 Canvas 和获取 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。

Answer 1

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

实际上有一个事件应该为此目的触发:webglcontextcreationerror

它确实包含一个 statusMessage 属性，该属性应该为您提供有关创建上下文失败的“原因”的更多信息。

来自 MDN:

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

但是，我不知道您是否可以对收到的消息做任何事情...