Your SlideShare is downloading. ×
0
Firefox WebGL developer tools
Firefox WebGL developer tools
Firefox WebGL developer tools
Firefox WebGL developer tools
Firefox WebGL developer tools
Firefox WebGL developer tools
Firefox WebGL developer tools
Firefox WebGL developer tools
Firefox WebGL developer tools
Firefox WebGL developer tools
Firefox WebGL developer tools
Firefox WebGL developer tools
Firefox WebGL developer tools
Firefox WebGL developer tools
Firefox WebGL developer tools
Firefox WebGL developer tools
Firefox WebGL developer tools
Firefox WebGL developer tools
Firefox WebGL developer tools
Firefox WebGL developer tools
Firefox WebGL developer tools
Firefox WebGL developer tools
Firefox WebGL developer tools
Firefox WebGL developer tools
Firefox WebGL developer tools
Firefox WebGL developer tools
Firefox WebGL developer tools
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Firefox WebGL developer tools

1,151

Published on

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

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,151
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
9
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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
  • 14. Web developers trying to WebGL
  • 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. Tools
  • 17. Shader Editor • view all programs in a WebGL context • edit vertex & fragment shaders • blackbox programs • highlight geometry
  • 18. Canvas Debugger • trace all relevant function calls • inspect both 2D and WebGL contexts • deconstruct rendering steps • analyze context state and redundancy
  • 19. Performance graphs • monitor framerate • sample function calls and cost • record platform’s responsiveness • analyze game vs. “host” performance
  • 20. Demo!
  • 21. Bugs!
  • 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. 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. 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. WebGL

×