The shader editor and canvas debugger WebGL developer tools in Firefox, explained.

1. WebGL
tools for web development

2. @victorporof

3. @victorporof

4. @victorporof

5. WebGL
!
!

6. WebGL
WebGL demos
!

7. WebGL
WebGL demos
WebGL libraries

8. WebGL
WebGL demos
WebGL libraries
WebGL development

9. OpenGL developers had
performance graphs

10. …asset viewers

11. …function calls
history

12. …shader editors

13. And this is what we had for
WebGL development

16. Web developers
trying to WebGL

17. transformation
Web developers
trying to WebGL
matrices
quaternions
vertex and fragment
shaders
typed array buffers
texture compression
and pixel packing
texture coordinate
mapping

18. Tools

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

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

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

22. Demo!

23. Bugs!

24. 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.

25. 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

26. Future work
• https://etherpad.mozilla.org/webgl-tools
• inspector and highlighter
• e.g. click canvas to pick geometry
• live edit resources
• overdraw analysis, etc.!

27. WebGL