• Like
Firefox WebGL developer tools
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Firefox WebGL developer tools

  • 1,019 views
Published

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
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,019
On SlideShare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
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