WebGL

The native 3D API

Native API

● javascript API

● brings typed arrays

● immediate mode graphical API

● no plugins needed

OpenGL legacy

● based on OpenGL ES 2.0

● shader based pipeline

● uses GLSL 1.0 for shaders

● shaders are compiled

How to get it

● create a <canvas> element

● retrieve the desired context

o myCanvasDOMElem.getContext(“3d”);

● access WebGL methods through context

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

● shader based pipeline

● vertex shader to control vertices properties

● fragment shader to control pixels properties

● allow us to keep control of the pipeline

Why?

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?

JS Frameworks for WebGL

● ThreeJS

● OSGJS

● BabylonJS

● ...yet another JS (SceneJS, ...)

ThreeJS

● originally written in ActionScript

● the most famous one

● tons of tutorials and workshops

OSGJS

● porting of OpenSceneGraph (C++)

● texture pipeline very close to Blender

● good support through forums

● production use: Sketchfab

BabylonJS

● Microsoft’s WebGL framework

● based on a Silverlight game engine

● good support and demos

● extended physics support

Let’s sell it tomorrow!

● Not just a modern browser, but a cool one

● not a HTML5 standard. Yet.

● powerful GPU is strongly suggested

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