Debugging Webgl In Chrome

I have a webgl page running in chrome. Every now and then chrome will report the following error. [.WebGLRenderingContext]GL ERROR :GL_INVALID_OPERATION : glDrawElements: attempt t

Solution 1:

You can use a debug wrapper to wrap the WebGL context and call gl.getError after every WebGL function.

There is an example of one available on the official WebGL Wiki.

Solution 2:

Per default WebGL doesn't tell you much about it, you have to query all the information you need yourself. Once you know how to do that, those errors will tell you all you need to debug it. The getter for your case would be

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

Which, if you query it before your draw call, will probably return null, which means you're not calling vertexAttribPointer correctly when setting up or switching buffers.

So you go to the point in your code where you set the pointers and enable the arrays and confirm that the location you just enabled with enableVertexAttribArray returns also returns null if you query the buffer at this point. Now you know if you messed up with the pointer. You know you fixed it, when the query returns the correct WebGLBuffer Object.

There are getters for all the states (WebGL is mostly about managing state), they are a bit tricky to use, but using them will greatly help you understand everything going on all the time, when you need or don't need to make calls in order to update that state and where you made mistakes.

You can look the getters and the arguments they take up in the spec

Solution 3:

SpectorJS is a tool aimed at WebGl developers wanting to know what happens in their context. It enables capturing of all the available information from a frame. You will be able to look at your entire commands list with their associated visual states and context information.

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