## Debugging webgl

From: andrew cooke <andrew@...>

Date: Sun, 4 Mar 2012 19:14:18 -0300

Here are two ways to debug webgl, taken from
http://www.khronos.org/webgl/wiki/Debugging (but adding more detail).

First, which turned out not to be useful in my case, I tried adding
webgl-debug.js.  If you're using require.js (see my other examples here) then
you need to place webgl-debug.js in the "lib" directory and add a dependency
like:

define([
'../src/assert',
'../src/utils',
'../lib/glmatrix/glMatrix.js',
'../lib/webgl-debug.js'],
function (a, u) {

// code here

});

where the code will include something like:

var gl = canvas.getContext('webgl');
if (!gl) gl = canvas.getContext('experimental-webgl');
if (debug) gl = WebGLDebugUtils.makeDebugContext(gl);

which wraps the context appropriately.  However, I had no errors (note that if
the wrapped context is undefined then you do get missing method errors).

Second, and more useful, I installed the WebGL inspector in chrome from
http://benvanik.github.com/WebGL-Inspector/

Once installed it seems that you need to load the web page and related scripts
via an http URL.  To do that, run

python -m SimpleHTTPServer

in your development root and then change the file:// URLs to http://.

Loading the page, click the GL icon in the address bar to enable the extension
and then the green UI to display the interface.

Next, I needed to delay the draw method:

setTimeout(draw, 5000);

so that I could reload the page and select *both* the red "Capture" and the
program in the "Programs" list before things ran.  After doing that, I saw
useful results.

And I now have two red triangles on a blue background.  The rest is details...

Andrew