Intro to WebGL and BabylonJS

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

• Utilizes a JavaScript drawing API

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”

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

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!

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

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

: 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};

: 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;

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

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.

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

Intro to WebGL and BabylonJS

More Related Content

Similar to Intro to WebGL and BabylonJS

More from David Voyles

Recently uploaded

Intro to WebGL and BabylonJS