A brief presentation of WebGL API I made for the event "MM Open Mic" by M&M Mean Milan at Mikamai

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