C[omp]ute

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