Hi, welcome to the WebGL debugging screencast. In this
screencast, I'm going to go through the basics of
debugging your WebGL applications.
To get started, I have here the Khronos WebGL wiki page
about debugging.
This is a nice source of links.
It links you to WebGL Inspector, which is nice for
WebGL debugging.
It also has a link to the WebGL debug scripts, which is
a little piece of JavaScript that gives you tools to debug
your WebGL applications.
In particular, it has got a WebGL debug context, which is
a special wrapper for a WebGL context that makes all GL
errors show up in the JavaScript console.
So you can also customize it to do
JavaScript style error handling.
So that instead of getting back an error number, you can
make it actually throw an exception when you get an
error on a GL call.
And what the debug context does is after each call to GL,
it calls gl.geterror to get the error code.
This causes a performance penalty if you use it in your
production code.
But for debugging, it's great.
It also has this little function,
WebGLDebugUtils.glEnumToString, which lets you take one of
those cryptic error codes and gets the name for the error.
Very useful.
Next, I'm going to show you the WebGL Inspector.
So the WebGL Inspector is a little Chrome
extension by Ben Vanik.
And it's probably easier to show you what it does.
So it is on GetHub, benvanik.gethub.
com/WebGL-Inspector.
I'm going to show you the live demo of the WebGL Inspector.
So here we have a WebGL demo running on the screen.
And click on the UI button, we get the WebGL Inspector.
And now I'm going to go through
some of the easy features.
So Programs tab, you have got the shaders and the GL
programs. And these have the uniforms, the attributes, the
shader sources, the status for the shaders.
So if you've got problems with your shaders,
you can see it here.
Then there's a Buffers pane, which shows you all the
buffers used in your WebGL program.
And here you can see what is inside of buffer, what is the
size of the buffer, and what has been done
to the buffer recently.
If we look up--
I think it's this one.
Yeah, here we have an 89k buffer.
And here is a 600k buffer.
And with these, you don't see the buffer contents directly.
But you have to click on this link to show them, which I'm
not going to click, because I think it's going to crash the
browser if I do that.
I'll do that anyway.
Let's see what happens.
Yeah.
OK, well, that was surprisingly fast. So 89k
buffer, perfectly OK.
No problem.
You also have a Textures pane that shows you all the
textures in your WebGL application, texture settings
and what has been done to the texture.
And in the Textures pane, you can see all the textures in
your WebGL program.
And you can see the texture parameters for each texture
and the texture content.
Because this is a texture that was passed as a null texture--
that is it is a GPU site texture that the WebGL program
is editing in the GPU--
we don't see anything in the texture contents.
This is one problem with WebGL Inspector at the moment which
I think could be fixed.
But if you have a normal texture, you should see the
contents of the texture A-OK.
In the State panel, you get a state snapshot of the current
WebGL context state.
It has all the blending and the blend colors, color
values, maximum attributes and such like.
In the Timeline pane, you can see what's happening in your
WebGL program.
The timeline view shows you what you are doing with WebGL.
So it shows you how much time it takes per frame to render
your WebGL scene.
And it shows you how many textures you are allocating,
how many programs you are using, and so on.
Now If we go the Trace panel--
this is the first panel, but I'm taking the class.
So the Trace panel is the last panel that I'm going to go to.
And when I click on the Capture button, what I get
here is what happened during this frame.
Here's the image that was drawn, and then all the DL
calls we did to draw that frame.
Very useful, very nice.
Let's move on.
So for Unit Testing GL, the Maps GL team here at Google
built this little thing, glsl-unit, which is a unit
testing framework for GLSL code in the WebGL.
And--
testing frameworks that allows you to write and run Unit
Tests for your WebGL GLSL code.
GLSL units will run your test code on the graphics card and
extract the results.
So it will be identical to the execution environment of your
shader coding production.
And that is the great thing about GLSL units.
If you want to hear more about GLSL units and how the Maps
team was developing WebGL, you can go to this YouTube talk
from GTAC 2011.
It's Developing and Testing WebGL.
It's by Roy Williams, one of the MapsGL engineers.
And GTAC stands for Google Test Automation Conference.
And this is a great talk for real-life WebGL use in a
non-game setting.
So go there and check it out.
This is about all I have to say about WebGL
debugging for now.
So thanks for watching and get hacking.