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