在 WebGL 中调试

Question

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

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

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

Answer 1

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

无论如何，如果你想使用 spector，你需要构建你的代码以使其对 spector 友好。 Spector 正在寻找基于 requestAnimationFrame 的帧。

所以，让我们this example which is the last example from this page。

该代码有一个 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不会注意到canvas（select什么也没有）。在打开 spector 之后，只有在单击开始按钮后才能运行我们的代码。我们需要在 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); });
  }

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

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

您可以 download it 也可以只通过上面的 link 添加它。示例（打开 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>

在 WebGL 中调试

Debugging in WebGL

webgl

webgl-extensions

webgl2