• OpenGL ES™ in a browser
• JavaScript API bindings
• Introduced in early 2011
• supported in nearly all modern browsers
• Utilizes a JavaScript drawing API
Data Visualization
Score Rush
Gaming
http://code.tutsplus.com/articles/webgl-essentials-part-i--net-25856,
Sony PS4 UI
“When you login to your PS4 you are runn...
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 Windo...
1. create <canvas> element
2. obtain drawing context
3. initialize the viewport
4. create buffers
5. create matrices
6. cr...
http://code.tutsplus.com/articles/webgl-essentials-part-i--net-25856
Fancy way of saying "position calculator" & "color ch...
: http://msdn.microsoft.com/en-us/library/ie/dn385809(v=vs.85).aspx
Data coming in from your JavaScript code is passed by ...
: http://msdn.microsoft.com/en-us/library/ie/dn385809(v=vs.85).aspx
Attributes are variables that relate to a specific ver...
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 HTML...
BabylonJS
http://www.babylonjs.com/
ThreeJS
http://tutorialzine.com/2013/09/20-impressive-examples-for-learning-webgl-with...
BabylonJS
Why build a WebGL Engine?
@DaveVoyles
Intro to WebGL and BabylonJS
Intro to WebGL and BabylonJS
Intro to WebGL and BabylonJS
Intro to WebGL and BabylonJS
Intro to WebGL and BabylonJS
Intro to WebGL and BabylonJS
Intro to WebGL and BabylonJS
Intro to WebGL and BabylonJS
Intro to WebGL and BabylonJS
Intro to WebGL and BabylonJS
Intro to WebGL and BabylonJS
Upcoming SlideShare
Loading in …5
×

Intro to WebGL and BabylonJS

3,269 views
3,114 views

Published on

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

Published in: Technology, Art & Photos
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,269
On SlideShare
0
From Embeds
0
Number of Embeds
1,803
Actions
Shares
0
Downloads
22
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Intro to WebGL and BabylonJS

  1. 1. • OpenGL ES™ in a browser • JavaScript API bindings • Introduced in early 2011 • supported in nearly all modern browsers
  2. 2. • Utilizes a JavaScript drawing API
  3. 3. Data Visualization
  4. 4. Score Rush Gaming
  5. 5. 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”
  6. 6. IE 11 has support (Win Phone) Safari 8.1 has support (iOS) Android Browser 37 has partial support
  7. 7. 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!
  8. 8. 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
  9. 9. http://code.tutsplus.com/articles/webgl-essentials-part-i--net-25856 Fancy way of saying "position calculator" & "color chooser"
  10. 10. : 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};
  11. 11. : 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;
  12. 12. That sounds like a ton of work. Let’s use a library, instead.
  13. 13. 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.
  14. 14. 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
  15. 15. BabylonJS
  16. 16. Why build a WebGL Engine?
  17. 17. @DaveVoyles

×