在Chrome中调试WebGL

Question

我在Chrome浏览器中运行了一个WebGL页面。

偶尔，Chrome会报告以下错误：

[.WebGLRenderingContext]GL ERROR :GL_INVALID_OPERATION : glDrawElements:尝试进行渲染，但未启用属性1的缓冲区附加

我已经试图调试发生错误的位置，但无法找到。我可以可靠地引发它，但当我调试时，错误会在看似随机的代码行上报告。我怀疑这是因为GPU渲染的异步性质造成的。

有没有一种好的方法来调试此问题？

- Cyril MacIsaac

---

尝试使用gl.vertexAttrib4f(...)代替gl.vertexAttrib1f(...)。我在这里遇到了类似的问题：http://stackoverflow.com/questions/28584589/why-i-cant-use-uniform1f-instead-of-uniform4f-for-the-gl-fragcolor-initializing（目前还没有人回答）。 - Andrey Bushman

@Bush vertexAttrib4f是设置所有值的禁用顶点属性数组，作为默认值，如果您计划从缓冲区实际提供这些值，则根本不需要。一旦启用它，它就没有任何效果。 - Winchestro

@ScreeniusBlack 我知道并且我也期望uniform1f（对于uniform变量）会有同样的结果，但是我遇到了问题。请看我的链接。 - Andrey Bushman

Answer 1

您可以使用调试包装器来包装WebGL上下文，并在每个WebGL函数调用后调用gl.getError。

官方WebGL Wiki上有一个示例可用。

- gman

---

我最终使用了这个。看起来当我用这个调试代码包装GL上下文时，它会在每次报告相同的行上的错误。非常方便。现在我只需要弄清楚为什么它出问题了。 - Cyril MacIsaac

Answer 2

默认情况下，WebGL不会提供有关其的详细信息，您需要自己查询所需的所有信息。一旦您知道如何做到这一点，这些错误将告诉您所有需要调试的内容。在您的情况下，获取器应该是

var attribLocation = 1;
gl.getVertexAttrib ( attribLocation, gl.VERTEX_ATTRIB_ARRAY_BUFFER_BINDING );

如果在绘制调用之前查询它，它可能会返回 null，这意味着你在设置或切换缓冲区时没有正确地调用 vertexAttribPointer。

因此，你需要查找代码中设置指针和启用数组的位置，并确认使用 enableVertexAttribArray 刚刚启用的位置也返回 null。现在你知道是否弄乱了指针。当查询返回正确的 WebGLBuffer 对象时，你就知道你已经修复了它。

对于所有状态都有getter（WebGL 主要是关于管理状态），使用它们有点棘手，但使用它们将极大地帮助你理解始终发生的所有事情，在何时需要或不需要进行调用以更新该状态以及你犯了哪些错误。

你可以在规范文档中查看所有getter和它们所控制的参数。

- Winchestro

Answer 3

SpectorJS是一个旨在帮助WebGL开发人员了解其上下文中发生情况的工具。它可以捕获帧中所有可用信息。您将能够查看完整的命令列表及其相关的视觉状态和上下文信息。

https://github.com/BabylonJS/Spector.js

- Ray Hulha