firefox webgl developer tools
DESCRIPTION
The shader editor and canvas debugger WebGL developer tools in Firefox, explained.TRANSCRIPT
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