WebGLtools for web development

@victorporof

@victorporof

@victorporof

WebGL !

!

WebGL WebGL demos !

WebGL WebGL demos WebGL libraries

WebGL WebGL demos WebGL libraries WebGL development

OpenGL developers had performance graphs

…asset viewers

…function calls history

…shader editors

And this is what we had for WebGL development

Web developers trying to WebGL

Web developers trying to WebGL

transformation matrices

quaternions

vertex and fragment shaders

typed array buffers

texture compression and pixel packing

texture coordinate mapping

Tools

Shader Editor• view all programs in a WebGL context • edit vertex & fragment shaders • blackbox programs • highlight geometry

Canvas Debugger• trace all relevant function calls • inspect both 2D and WebGL contexts • deconstruct rendering steps • analyze context state and redundancy

Performance graphs• monitor framerate • sample function calls and cost • record platform’s responsiveness • analyze game vs. “host” performance

Demo!

Bugs!

Known bugs!• contexts inside iframes can’t be inspected • setInterval and setTimeout not supported

• …but if you do use them for your animation loop, then i’m sorry but we can’t be friends.

Moar bugs!• please go to bugzilla.mozilla.org • or ffdevtools.uservoice.com • file bugs or feature requests! • don’t worry, we’ll deal with dupes

Future work• https://etherpad.mozilla.org/webgl-tools • inspector and highlighter

• e.g. click canvas to pick geometry

• live edit resources • overdraw analysis, etc.!

WebGL