Listening in on WebGL : WebGLProfiler

I’ve been trying to learn a thing or two about WebGL, but I’ve encountered a very simple problem: Most examples you find on the web have a very complex source code that is great for demonstrating how the particular framework the developer has written/used works, but usually not so great for learning WebGL itself.

For example take a look at this sample that often turns up when you ask about realtime shadows. It’s a beautiful little thing, but it uses Google’s O3D framework, so if you want to learn about the GL code involved, without learning about O3D, you’re pretty much out of luck.

So I decided to hack up something that can give me a runnable version of all the GL calls involved in this, complete with symbolic constants at least for the most common GL calls (have a look at the top of the source to see what arguments are currently resolved). It’s very hackish and may not always work perfectly (for example, it replaces all intervals and timeout with a value of 10000 so that you don’t get flooded with frame updates, meaning that it could take a while for what you’re interested in to appear), but it creates a WebGL program that’s strictly linear and pretty easy to read. Since it was built for my own use it also has some pretty ugly hacks that could be solved more elegantly with enough time (for example it checks for the document’s load state using an interval waiting for the title tag to appear), but it works. The resulting HTML page will have snapshots of canvases or videos embedded, while the images are links to the originals.

The big drawback so far is that you’ll only get the raw values of matrices, since these are not handled by WebGL, but by a few different libraries. It’s a big drawback, since it means that you will have to look them up in the original source code, but if they are probably named (global variable names are inserted by the profiler as comments and if there is none, you can always look at the names used inside the shaders), you can usually guess them pretty well.

I’ve wrapped the whole thing into a bookmarklet for easy use. When invoked, it will load the current document into the right frame, monkeypatch it and on first use of the webgl context start reporting to the left frame. The left frame will then contain a complete HTML document that you can just copy/paste and it will produce the same output as the original page. Be warned, it will VERY likely only work in current Firefox nightlies.

Perhaps the best way to illustrate it is showing the output of a few samples (look at the source):

You can find the bookmarklet at

License is GPL3 (or later). See the sourcefor details.