Fork me on GitHub

WebGL Inspector by benvanik

An advanced WebGL debugging toolkit

About

WebGL Inspector is a tool inspired by gDEBugger and PIX with the goal of making the development of advanced WebGL applications easier. What Firebug and Developer Tools are to HTML/JS, WebGL Inspector is to WebGL.

Note: this is alpha software - if you find bugs, let me know (or better yet, fork and fix them! :)

Check out the readme on github for more information.

Status

There hasn't been an update in awhile, but the project is not dead! I'm currently working on a rewrite that enables a whole bunch of cool new features (plus a much better UI), however my new job at Google is eating up a lot of my time. v2 will go up when it's ready :)

Features

Live Demo

Click here to view a live demo (in a browser that supports WebGL, of course):

You can embed the inspector on your own pages like this if there is no extension for your browser or if you don't want to install it.

Install

ATTENTION: The extension is now hosted on the Chrome Web Store. If you have previously installed the extension you *must* remove and reinstall the Web Store version to get updates!

Chrome/Chromium extension (20+)

Browse to a page with WebGL content and click the 'GL' button that appears on the toolbar to embed the inspector.

Check out the readme on github for more information.

Changelog

v1.11 - 7/30/2012

v1.8/1.9 - 3/04/2012

v1.7 - 10/27/2011

v1.6 - 7/19/2011

v1.5 - 3/15/2011

v1.4 - 1/06/2011

v1.3 - 1/03/2011

v1.2 - 11/28/2010

Download

You can download this project in either zip or tar formats.

You can also clone the project with Git by running:

$ git clone git://github.com/benvanik/WebGL-Inspector


Screenshots

Excuse their ugliness - I'd rather code than tweak compression settings in Photoshop ^_^

Overlay/HUD

Use the overlay buttons in the top right to capture frames and show the toggle the UI. Everything sits on top of the page to prevent interruption.

Tracing

View full frame call traces with linked resources and redundant call warnings.

Isolate individual draw calls to see just what was drawn.

Step through each call in a frame to build up the scene. (too lazy to rebuild gif, so older animation)

Timeline

See realtime statistics about various GL activity. Work in progress - it'll get prettier!

State Inspector

View the current GL state at any point in time.

Textures

Browse uploaded textures and see their modification history, usage in the current frame, and other information.



Buffers

Browse all uploaded buffers and view their history, usage, contents, and inferred structure.

Programs

Inspect programs and shaders including current uniform values.