在 chrome 中调试 webgl
debugging webgl in chrome
我在 chrome 中有一个 webgl 页面 运行。
时不时chrome会报如下错误
[.WebGLRenderingContext]GL 错误：GL_INVALID_OPERATION：glDrawElements：尝试在没有附加到已启用属性 1 的缓冲区的情况下进行渲染
我试过调试错误发生的地方，但我做不到。我可以可靠地导致它发生，但是当我调试时，错误是在看似随机的行上报告的。我怀疑这是因为 gpu 渲染的异步性质。
有什么好的调试方法吗？
默认情况下，WebGL 不会告诉您太多信息，您必须自己查询所需的所有信息。一旦您知道该怎么做，这些错误就会告诉您调试它所需的一切。您的案例的 getter 是
var attribLocation = 1;
gl.getVertexAttrib ( attribLocation, gl.VERTEX_ATTRIB_ARRAY_BUFFER_BINDING );
其中，如果您在绘图调用之前查询它，可能会 return null，这意味着您在设置或切换缓冲区时没有正确调用 vertexAttribPointer。
因此，您转到代码中设置指针并启用数组的位置，并确认您刚刚使用 enableVertexAttribArray returns 和 returns 启用的位置null 如果此时查询缓冲区。现在你知道你是否弄乱了指针。你知道你修复了它，当查询 return 是正确的 WebGLBuffer 对象时。
所有状态都有 getters（WebGL 主要是关于管理状态），它们使用起来有点棘手，但使用它们将极大地帮助您了解所有情况，当你需要或不需要打电话来更新那个状态和你犯错误的地方。
你可以看看 getters 和它们占用的参数 in the spec
您可以使用 debug wrapper 包装 WebGL 上下文并在每个 WebGL 函数之后调用 gl.getError。
有an example of one available on the official WebGL Wiki.
SpectorJS 是一个针对 WebGl 开发人员的工具，他们希望了解在他们的上下文中发生了什么。它可以从帧中捕获所有可用信息。您将能够查看整个命令列表及其关联的视觉状态和上下文信息。
我在 chrome 中有一个 webgl 页面 运行。
时不时chrome会报如下错误
[.WebGLRenderingContext]GL 错误：GL_INVALID_OPERATION：glDrawElements：尝试在没有附加到已启用属性 1 的缓冲区的情况下进行渲染
我试过调试错误发生的地方，但我做不到。我可以可靠地导致它发生，但是当我调试时，错误是在看似随机的行上报告的。我怀疑这是因为 gpu 渲染的异步性质。
有什么好的调试方法吗？
默认情况下，WebGL 不会告诉您太多信息，您必须自己查询所需的所有信息。一旦您知道该怎么做，这些错误就会告诉您调试它所需的一切。您的案例的 getter 是
var attribLocation = 1;
gl.getVertexAttrib ( attribLocation, gl.VERTEX_ATTRIB_ARRAY_BUFFER_BINDING );
其中，如果您在绘图调用之前查询它，可能会 return null，这意味着您在设置或切换缓冲区时没有正确调用 vertexAttribPointer。
因此，您转到代码中设置指针并启用数组的位置，并确认您刚刚使用 enableVertexAttribArray returns 和 returns 启用的位置null 如果此时查询缓冲区。现在你知道你是否弄乱了指针。你知道你修复了它，当查询 return 是正确的 WebGLBuffer 对象时。
所有状态都有 getters（WebGL 主要是关于管理状态），它们使用起来有点棘手，但使用它们将极大地帮助您了解所有情况，当你需要或不需要打电话来更新那个状态和你犯错误的地方。
你可以看看 getters 和它们占用的参数 in the spec
您可以使用 debug wrapper 包装 WebGL 上下文并在每个 WebGL 函数之后调用 gl.getError。
有an example of one available on the official WebGL Wiki.
SpectorJS 是一个针对 WebGl 开发人员的工具，他们希望了解在他们的上下文中发生了什么。它可以从帧中捕获所有可用信息。您将能够查看整个命令列表及其关联的视觉状态和上下文信息。