Debugging

Interactive Debugging of WebGL applications

The WebGL Inspector provides an interactive set of tools for debugging and diagnosing advanced WebGL applications. It provides the ability to capture entire frames' rendering calls and interactively step through them, an annotated call log with stepping/resource navigation and redundant call warnings, resource browsers for textures, buffers, and programs, and much more.

Programmatically Debugging WebGL applications

WebGL's error reporting mechanism involves calling getError and checking for errors. As it can be burdensome to put a getError call after every WebGL function call here is small library to help with make this easier.

https://cvs.khronos.org/svn/repos/registry/trunk/public/webgl/sdk/debug/webgl-debug.js

To use the library, download it, put it on your server and include it with

<script src="webgl-debug.js"></script>

Then you can wrap your WebGLRenderingContext in an object that checks all calls like this

ctx = WebGLDebugUtils.makeDebugContext(canvas.getContext("webgl"));

This will make any GL errors show up in your browser JavaScript console.

If you want to do something else, like throw an exception you can pass in your own error handling function.

function throwOnGLError(err, funcName, args) {
  throw WebGLDebugUtils.glEnumToString(err) + " was caused by call to" + funcName;
};

ctx = WebGLDebugUtils.makeDebugContext(canvas.getContext("webgl"), throwOnGLError);

Printing Errors and other constants

WebGL uses many constants and returns errors as numbers. It's often easier to display those numbers as strings. With that in mind you can call WebGLDebugUtils.glEnumToString to convert a WebGL constant to a string.

Example:

WebGLDebugUtils.init(ctx);
alert(WebGLDebugUtils.glEnumToString(ctx.getError()));