A high level overview of WebGL programming and the open source BabylonJS framework

3. • OpenGL ES™ in a browser
• JavaScript API bindings
• Introduced in early 2011
• supported in nearly all modern browsers

4. • Utilizes a JavaScript drawing API

6. Data Visualization

7. Score Rush
Gaming

8. http://code.tutsplus.com/articles/webgl-essentials-part-i--net-25856,
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”

9. IE 11 has support (Win Phone)
Safari 8.1 has support (iOS)
Android Browser 37 has partial support

10. For iOS and Android, you have a bit more work.
CocoonJS (both)
Sencha (iOS)
Crosswalk (Android)
For Windows Phone or Windows 8:
Just write a Win8 or Win Phone 8 app!

12. 1. create <canvas> element
2. obtain drawing context
3. initialize the viewport
4. create buffers
5. create matrices
6. create shaders
7. initialize shaders
8. draw primitives

13. http://code.tutsplus.com/articles/webgl-essentials-part-i--net-25856
Fancy way of saying "position calculator" & "color chooser"

14. : http://msdn.microsoft.com/en-us/library/ie/dn385809(v=vs.85).aspx
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};

15. : http://msdn.microsoft.com/en-us/library/ie/dn385809(v=vs.85).aspx
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;

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

17. BabylonJS
An open source webGL gaming framework, written by several Microsoft employees
ThreeJS
Turbulenz
Open source HTML5 game engine for developing games under the MIT license.

18. BabylonJS
http://www.babylonjs.com/
ThreeJS
http://tutorialzine.com/2013/09/20-impressive-examples-for-learning-webgl-with-three-js/
Turbulenz
https://ga.me/games/scorerush

19. BabylonJS

20. Why build a WebGL Engine?

28. @DaveVoyles