webgl - 在 WebGL 中调试

Question

我正在学习WebGL，我感觉我的速度很慢，因为我很难调试我的代码。是否有任何扩展或工具可以帮助我知道缓冲区、属性指针、矩阵等的值？

我用谷歌搜索并了解了 chrome 扩展 spector.js 但这对我不起作用。我认为它应该向我显示框架或上下文，但是当我单击它时什么也没有显示。

---

---

当我在几秒钟后单击红色按钮时，它显示： 未检测到帧。尝试移动相机或实现 requestAnimationFrame。

标签： webglwebgl2webgl-extensions

Answer 1

是的，WebGL 很难调试，我不确定有什么能让它变得更容易。大多数错误不是调试器可以轻易找到的。浏览器已经报告了某些错误，例如无法渲染的纹理或正确大小的缓冲区。其他错误通常是数学错误、逻辑错误或数据错误。例如，没有简单的方法可以单步执行 WebGL 着色器。

在任何情况下，如果你想使用 Spector，你需要将你的代码构造成对 Spector 友好。Spector 正在寻找基于 requestAnimationFrame 的帧。

所以，让我们以这个例子为例，这是本页的最后一个例子。

代码有一个main看起来像这样的函数

function main() {
  // Get A WebGL context
  /** @type {HTMLCanvasElement} */
  var canvas = document.querySelector("#canvas");
  var gl = canvas.getContext("webgl");
  if (!gl) {
    return;
  }


  // setup GLSL program
  var program = webglUtils.createProgramFromScripts(gl, ["vertex-shader-3d", "fragment-shader-3d"]);
  ...
}

main();

我把它改成了这个。我重命名main为init并成功了，所以我在 gl 上下文中传递。

function init(gl) {
  // setup GLSL program
  var program = webglUtils.createProgramFromScripts(gl, ["vertex-shader-3d", "fragment-shader-3d"]);

  ...
}

然后我做了一个main看起来像这样的新

function main() {
  // Get A WebGL context
  /** @type {HTMLCanvasElement} */
  var canvas = document.querySelector("#canvas");
  var gl = canvas.getContext("webgl");
  if (!gl) {
    return;
  }

  const startElem = document.querySelector('button');
  startElem.addEventListener('click', start, {once: true});

  function start() {
    // run the initialization in rAF since spector only captures inside rAF events
    requestAnimationFrame(() => {
      init(gl);
    });
    // make so more frames so spector has something to look at.
    // Note: a normal webgl app would have a rAF loop: https://webglfundamentals.org/webgl/lessons/webgl-animation.html
    requestAnimationFrame(() => {});
    requestAnimationFrame(() => {});
    requestAnimationFrame(() => {});
    requestAnimationFrame(() => {});
    requestAnimationFrame(() => {});
  }
}

main();

我在我的 html 中添加了一个按钮

<button type="button">start</button>
<canvas id="canvas"></canvas>

代码是这样的，因为我们需要首先获取 webgl 上下文，否则 spector 将不会注意到画布（将没有任何选择）。之后打开spector，然后单击开始按钮运行我们的代码。我们需要在 a 中执行我们的代码，requestAnimationFrame因为那是 spector 正在寻找的。它只记录帧之间的 WebGL 函数。

它是否会帮助您找到任何错误是另一回事。

请注意，如果您使用的是 Mac，Safari 也有一个内置的 WebGL 调试器，但就像 Spector 一样，它只为帧设计。它需要你每帧画一些东西，所以这行得通

  function start() {
    // I'm not sure running the init code in a rAF is important in Safari but it worked
    requestAnimationFrame(() => {
      init(gl);
    });
    // by default safari tries to capture 3 frames so let's give it some frames
    // Note: a normal webgl app would have a rAF loop: https://webglfundamentals.org/webgl/lessons/webgl-animation.html
    requestAnimationFrame(() => { gl.clear(gl.COLOR_BUFFER_BIT); });
    requestAnimationFrame(() => { gl.clear(gl.COLOR_BUFFER_BIT); });
    requestAnimationFrame(() => { gl.clear(gl.COLOR_BUFFER_BIT); });
    requestAnimationFrame(() => { gl.clear(gl.COLOR_BUFFER_BIT); });
    requestAnimationFrame(() => { gl.clear(gl.COLOR_BUFFER_BIT); });
  }

您可以做的另一件事是gl.getError在每个 WebGL 函数之后使用帮助程序调用。这是您可以使用的脚本

<script src="https://greggman.github.io/webgl-helpers/webgl-gl-error-check.js"></script>

您可以下载它，也可以通过上面的链接包含它。示例（打开 javascript 控制台查看错误）

const gl = document.createElement('canvas').getContext('webgl');

gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
gl.vertexAttribPointer(0, 1, gl.BYE, false, 0, 0);

<script src="https://greggman.github.io/webgl-helpers/webgl-gl-error-check.js"></script>