Intro to WebGL

Dave VoylesSr. Tech Evangelist | Microsoft@DaveVoyles

About MePreviously a Sr. Engineer on the Xbox team at Comcast

Have been dabbling in the games industry for 4 years

Construction worker turned software engineer!

I’m a recent transplant from Long Island, NY.

• OpenGL ES™ in a browser

• JavaScript API bindings

• Introduced in early 2011

• supported in nearly all modern browsers

What is WebGL?

• Utilizes a JavaScript drawing API• Draw to a canvas element using a webGL context

• Low-level drawing – buffers, primitives, textures and shaders • Shaders are done in GLSL, similar to C

• Visuals are accelerated by graphics hardware (GPU)

• Can draw 2D or 3D

How does it work?

Uses for WebGLData Visualization

Uses for WebGL

Source: Score Rush – Xona Games, Turbulenz

Gaming

What else uses webGL?

Source: http://code.tutsplus.com/articles/webgl-essentials-part-i--net-25856, Don Olmstead, Sony, 2014

Sony PS4 UI“When you login to your PS4 you are running WebGL code. The PlayStation Store, the Music and Video Applications, as well as a good chunk of UX are all rendered within the browser”

1. create <canvas> element2. obtain drawing context3. initialize the viewport4. create buffers5. create matrices6. create shaders7. initialize shaders8. draw primitives

Steps

Shaders

Source: http://code.tutsplus.com/articles/webgl-essentials-part-i--net-25856, Gabriel Manricks, 2012

Fancy way of saying "position calculator" & "color chooser"

Shaders (cont’d)

Source: http://msdn.microsoft.com/en-us/library/ie/dn385809(v=vs.85).aspx , Microsoft, 2014

Data coming in from your JavaScript code is passed by two types of qualifier variables: uniforms and attributes.

Uniform variables are global variables. They can be used by either the vertex or fragment shader, and define values that stay the same during the run of the program. An example is a value to use to scale vertex points.

uniform vec4 myVector = {0.5, 0.2, 0.7, 1.0};

Shaders (cont’d)

Source: http://msdn.microsoft.com/en-us/library/ie/dn385809(v=vs.85).aspx , Microsoft, 2014

Attributes are variables that relate to a specific vertex point. Attributes can only be used in the vertex shader, and could be used to set a specific color for each vertex point.

There's a third qualifier variable, the varying variable, that's declared only in the GLSL shader code. A varying variable is set in the vertex shader and consumed in the fragment shader.

in vec3 position;

That sounds like a ton of work. Let’s use a library, instead.

Popular WebGL LibrariesBabylonJSAn open source webGL gaming framework, written by several Microsoft employees

ThreeJSA lightweight cross-browser JS library/API used to create and display animated 3D graphics

TurbulenzOpen source HTML5 game engine for developing games under the MIT license.

Impressive SamplesBabylonJShttp://www.babylonjs.com/

ThreeJShttp://tutorialzine.com/2013/09/20-impressive-examples-for-learning-webgl-with-three-js/

Turbulenzhttps://ga.me/games/scorerush

I wrote a WebGL app – now what?For Windows Phone or Windows 8:

Just write a Win8 or Win Phone 8 app!

For iOS and Android, you have a bit more work:

CocoonJS

Ludei (CocoonJS)

BabylonJS

Why build a WebGL Engine?

@DaveVoyles