O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Firefox WebGL developer tools

2.468 visualizações

Publicada em

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

Publicada em: Software
  • Seja o primeiro a comentar

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

×