Demistifying the 3D Web - part 2
Download as PPTX, PDF2 likes256 views
WebGL is a JavaScript API that allows 3D graphics in the browser without plugins. It is based on OpenGL ES 2.0 and uses shader programs to control the graphics pipeline. Developers can create a <canvas> element and use WebGL methods through the context to render 3D graphics. Popular JavaScript frameworks like Three.js, BabylonJS, and OSGJS make it easier to use WebGL by handling lower level details. While WebGL provides powerful 3D capabilities, browser and system compatibility can vary.
Demistifying the 3D Web - part 2
- 1. WebGL The native 3D API
- 2. Native API ● javascript API ● brings typed arrays ● immediate mode graphical API ● no plugins needed
- 3. OpenGL legacy ● based on OpenGL ES 2.0 ● shader based pipeline ● uses GLSL 1.0 for shaders ● shaders are compiled
- 4. How to get it ● create a <canvas> element ● retrieve the desired context o myCanvasDOMElem.getContext(“3d”); ● access WebGL methods through context
- 5. And what about shaders? ● passed as strings. Very long strings. ● C like syntax and statically typed ● two flavors: vertex and fragment shader ● native matrix and vector operators
- 6. ● shader based pipeline ● vertex shader to control vertices properties ● fragment shader to control pixels properties ● allow us to keep control of the pipeline Why?
- 7. Dealing with complexity ● WebGL uses points, lines and triangles ● geometries can have thousands of triangles ● lot of boilerplate even for trivial examples ● string composition in JS? Really?
- 8. JS Frameworks for WebGL ● ThreeJS ● OSGJS ● BabylonJS ● ...yet another JS (SceneJS, ...)
- 9. ThreeJS ● originally written in ActionScript ● the most famous one ● tons of tutorials and workshops
- 10. OSGJS ● porting of OpenSceneGraph (C++) ● texture pipeline very close to Blender ● good support through forums ● production use: Sketchfab
- 11. BabylonJS ● Microsoft’s WebGL framework ● based on a Silverlight game engine ● good support and demos ● extended physics support
- 12. Let’s sell it tomorrow! ● Not just a modern browser, but a cool one ● not a HTML5 standard. Yet. ● powerful GPU is strongly suggested
- 13. Let’s sell it tomorrow! ● Depends on the whole stack o video adapter o OS and drivers o browser version, vendor, build... o blacklists, security paranoias, luck