0
WebGL 
tools 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
transformation 
Web developers 
trying to WebGL 
matrices 
quaternions 
vertex and fragment 
shaders 
typed array buffers ...
Tools
Shader Editor 
• view all programs in a WebGL context 
• edit vertex & fragment shaders 
• blackbox programs 
• highlight ...
Canvas Debugger 
• trace all relevant function calls 
• inspect both 2D and WebGL contexts 
• deconstruct rendering steps ...
Performance graphs 
• monitor framerate 
• sample function calls and cost 
• record platform’s responsiveness 
• analyze g...
Demo!
Bugs!
Known bugs! 
• contexts inside iframes can’t be inspected 
• setInterval and setTimeout not supported 
• …but if you do us...
Moar bugs! 
• please go to bugzilla.mozilla.org 
• or ffdevtools.uservoice.com 
• file bugs or feature requests! 
• don’t ...
Future work 
• https://etherpad.mozilla.org/webgl-tools 
• inspector and highlighter 
• e.g. click canvas to pick geometry...
WebGL
Firefox WebGL developer tools
Firefox WebGL developer tools
Upcoming SlideShare
Loading in...5
×

Firefox WebGL developer tools

1,172

Published on

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

Published in: Software
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,172
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
9
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "Firefox WebGL developer tools"

  1. 1. WebGL tools for web development
  2. 2. @victorporof
  3. 3. @victorporof
  4. 4. @victorporof
  5. 5. WebGL ! !
  6. 6. WebGL WebGL demos !
  7. 7. WebGL WebGL demos WebGL libraries
  8. 8. WebGL WebGL demos WebGL libraries WebGL development
  9. 9. OpenGL developers had performance graphs
  10. 10. …asset viewers
  11. 11. …function calls history
  12. 12. …shader editors
  13. 13. And this is what we had for WebGL development
  14. 14. Web developers trying to WebGL
  15. 15. transformation Web developers trying to WebGL matrices quaternions vertex and fragment shaders typed array buffers texture compression and pixel packing texture coordinate mapping
  16. 16. Tools
  17. 17. Shader Editor • view all programs in a WebGL context • edit vertex & fragment shaders • blackbox programs • highlight geometry
  18. 18. Canvas Debugger • trace all relevant function calls • inspect both 2D and WebGL contexts • deconstruct rendering steps • analyze context state and redundancy
  19. 19. Performance graphs • monitor framerate • sample function calls and cost • record platform’s responsiveness • analyze game vs. “host” performance
  20. 20. Demo!
  21. 21. Bugs!
  22. 22. 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.
  23. 23. 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
  24. 24. Future work • https://etherpad.mozilla.org/webgl-tools • inspector and highlighter • e.g. click canvas to pick geometry • live edit resources • overdraw analysis, etc.!
  25. 25. WebGL
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×