在 chrome 中调试 webgl答案

【问题标题】：debugging webgl in chrome在 chrome 中调试 webgl
【发布时间】：2015-04-19 17:39:47
【问题描述】：

我有一个在 chrome 中运行的 webgl 页面。

chrome时不时会报如下错误。

[.WebGLRenderingContext]GL 错误：GL_INVALID_OPERATION：glDrawElements：尝试在没有缓冲区附加到启用属性 1 的情况下进行渲染

我尝试调试错误发生的位置，但我不能。我可以可靠地导致它发生，但是当我调试时，错误是在看似随机的行上报告的。我怀疑这是因为 gpu 渲染的异步特性。

有什么好的方法可以调试吗？

【问题讨论】：

尝试使用gl.vertexAttrib4f(...) 而不是gl.vertexAttrib1f(...)。我在这里遇到了类似的问题：stackoverflow.com/questions/28584589/…（仍然没有人回答）。
@Bush vertexAttrib4f 正在设置 disabled 顶点属性数组的所有值，用作 默认值，如果您打算这样做，则根本不需要实际上从缓冲区提供这些值。启用后就没有效果了。
@ScreeniusBlack 我知道并且我期望uniform1f （对于uniform 变量）也是如此，但我遇到了问题。看我的链接。

【解决方案1】：

SpectorJS 是一个针对希望了解在他们的上下文中发生了什么的 WebGl 开发人员的工具。它可以从帧中捕获所有可用信息。您将能够查看整个命令列表及其相关的视觉状态和上下文信息。

【讨论】：

【解决方案2】：

您可以使用 debug wrapper 包装 WebGL 上下文并在每个 WebGL 函数之后调用 gl.getError。

【讨论】：

【解决方案3】：

默认情况下，WebGL 不会告诉您太多关于它的信息，您必须自己查询所有需要的信息。一旦你知道如何做到这一点，这些错误就会告诉你调试它所需的一切。您的案例的吸气剂是

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

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

因此，您转到代码中设置指针并启用数组的位置，并确认您刚刚使用enableVertexAttribArray 返回的位置也返回null，如果您此时查询缓冲区。现在你知道你是否弄乱了指针。当查询返回正确的WebGLBuffer 对象时，您知道您已修复它。

所有状态都有 getter（WebGL 主要用于管理状态），它们使用起来有点棘手，但使用它们将极大地帮助您随时了解正在发生的一切，无论何时需要或不需要进行调用以更新该状态以及您犯错的位置。

您可以查看 getter 和它们占用的参数 in the spec

【讨论】：