Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
3D In the Browser                                   It’s go time.                           Presented by Pascal Rettig    ...
When last I talked...Monday, July 11, 2011
Where We are          1977-84        1985-90   1991-94   1995-2000Monday, July 11, 2011
Where we are         Q1 2010        Q4 2010   Q2 2011   Q4 2011Monday, July 11, 2011
I was wrong.         Q1 2010        Q4 2010    Q2 2011Monday, July 11, 2011
WebGL is enabled in:                    • Chrome - Stable                    • Firefox 4 Beta                    • Webkit ...
By the end of Q2                        All major supported browsers should have WebGL                                    ...
What can you do with                             WebGL?                        http://webglsamples.googlecode.com/hg/aquar...
What is WebGL?                        WebGL is a royalty-free, cross-platform API that                        brings OpenG...
WebGL is:Monday, July 11, 2011
WebGL is:                    • A 1.0 Standard (as of 3/8/11) released by                        the Khronos GroupMonday, J...
WebGL is:                    • A 1.0 Standard (as of 3/8/11) released by                        the Khronos Group         ...
WebGL is:                    • A 1.0 Standard (as of 3/8/11) released by                        the Khronos Group         ...
WebGL is:                    • A 1.0 Standard (as of 3/8/11) released by                        the Khronos Group         ...
WebGL is:                    • A 1.0 Standard (as of 3/8/11) released by                        the Khronos Group         ...
OpenGL ES 2.0Monday, July 11, 2011
OpenGL ES 2.0                    • OpenGL for Embedded SystemsMonday, July 11, 2011
OpenGL ES 2.0                    • OpenGL for Embedded Systems                    • Well-defined subsets of desktop OpenGLM...
OpenGL ES 2.0                    • OpenGL for Embedded Systems                    • Well-defined subsets of desktop OpenGL ...
OpenGL ES 2.0                    • OpenGL for Embedded Systems                    • Well-defined subsets of desktop OpenGL ...
WebGL uses shaders for                       just about everything                    • Little bits of run-time compiled c...
WebGL PipeLine                             Vertex Operation                                    ⇓                          ...
Simple(st) Shaders     Vertex Shader      attribute vec3 aVertexPosition;      void main(void) {         gl_Position = vec...
Which gets us...Monday, July 11, 2011
Simplest Full Example                             (From Mozilla IAP class)Monday, July 11, 2011
More Tutorials at                        LearningWebGl.com                        • Based on the famous NeHe Open GL      ...
Has anyone noticed a                             problem?Monday, July 11, 2011
Has anyone noticed a                             problem?             OpenGL isn’t exactly something you want to have to s...
Abstraction Please...Monday, July 11, 2011
PhiloGL                        Relatively new framework from Sencha Labs                            http://senchalabs.gith...
PhiloGL                    • “PhiloGL code is highly abbreviated                        compared to WebGL.”               ...
Mr. Doobs Three.js                           https://github.com/mrdoob/three.js/                   Generic 3D library that...
Three.jsMonday, July 11, 2011
Three.js                  • Nice, standard OO Abstractions for 3D                        programming.                  • N...
Copperlicht                    • Bills itself as “Commercial grade WebGL                        3D engine with editor”    ...
More Frameworks /                             Engines                          From the Chronos WebGL Wiki:               ...
glQueryMonday, July 11, 2011
glQuery doesn’t exist...                But it should - talk to me if you’re interested in working on                     ...
Thanks!                          Pascal Rettig                        @cykod on TwitterMonday, July 11, 2011
Upcoming SlideShare
Loading in …5
×

3D in the Browser via WebGL: It's Go Time

8,164 views

Published on

Presentation on WebGL given to the Boston HTML5 Game Development Meetup on 3/16/2011

Published in: Technology, Art & Photos
  • merci pour tout votre aide de ce matin ca m,a bcp aide.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

3D in the Browser via WebGL: It's Go Time

  1. 1. 3D In the Browser It’s go time. Presented by Pascal Rettig http://cykod.com @cykod Liberally using Material From: Mozilla MIT IAP WebGL Class http://learningwebgl.comMonday, July 11, 2011
  2. 2. When last I talked...Monday, July 11, 2011
  3. 3. Where We are 1977-84 1985-90 1991-94 1995-2000Monday, July 11, 2011
  4. 4. Where we are Q1 2010 Q4 2010 Q2 2011 Q4 2011Monday, July 11, 2011
  5. 5. I was wrong. Q1 2010 Q4 2010 Q2 2011Monday, July 11, 2011
  6. 6. WebGL is enabled in: • Chrome - Stable • Firefox 4 Beta • Webkit Nightly’s • an Opera Preview Release • IE ...Yeah, not anytime soon.Monday, July 11, 2011
  7. 7. By the end of Q2 All major supported browsers should have WebGL turned on by default.Monday, July 11, 2011
  8. 8. What can you do with WebGL? http://webglsamples.googlecode.com/hg/aquarium/ aquarium.html http://webglsamples.googlecode.com/hg/spacerocks/ spacerocks.htmlMonday, July 11, 2011
  9. 9. What is WebGL? WebGL is a royalty-free, cross-platform API that brings OpenGL ES 2.0 to the web as a 3D drawing context within HTML, exposed as low-level Document Object Model interfaces. It uses the OpenGL shading language, GLSL ES, and can be cleanly combined with other web content that is layered on top or underneath the 3D content. It is ideally suited for dynamic 3D web applications in the JavaScript programming language, and will be fully integrated in leading web browsers. http://www.khronos.org/Monday, July 11, 2011
  10. 10. WebGL is:Monday, July 11, 2011
  11. 11. WebGL is: • A 1.0 Standard (as of 3/8/11) released by the Khronos GroupMonday, July 11, 2011
  12. 12. WebGL is: • A 1.0 Standard (as of 3/8/11) released by the Khronos Group • In-browser native (Look ma, no plugins!)Monday, July 11, 2011
  13. 13. WebGL is: • A 1.0 Standard (as of 3/8/11) released by the Khronos Group • In-browser native (Look ma, no plugins!) • Implementation of OpenGL ES 2.0 (OpenGL for embedded systems)Monday, July 11, 2011
  14. 14. WebGL is: • A 1.0 Standard (as of 3/8/11) released by the Khronos Group • In-browser native (Look ma, no plugins!) • Implementation of OpenGL ES 2.0 (OpenGL for embedded systems) • A low level API (We’re not kidding around)Monday, July 11, 2011
  15. 15. WebGL is: • A 1.0 Standard (as of 3/8/11) released by the Khronos Group • In-browser native (Look ma, no plugins!) • Implementation of OpenGL ES 2.0 (OpenGL for embedded systems) • A low level API (We’re not kidding around) • Well Integrated into the DOM - can layer, use textures, etc.Monday, July 11, 2011
  16. 16. OpenGL ES 2.0Monday, July 11, 2011
  17. 17. OpenGL ES 2.0 • OpenGL for Embedded SystemsMonday, July 11, 2011
  18. 18. OpenGL ES 2.0 • OpenGL for Embedded Systems • Well-defined subsets of desktop OpenGLMonday, July 11, 2011
  19. 19. OpenGL ES 2.0 • OpenGL for Embedded Systems • Well-defined subsets of desktop OpenGL • What you’re using playing 3D games on your iPhone 3G (Orig. iPhone, Android are ES 1.0)Monday, July 11, 2011
  20. 20. OpenGL ES 2.0 • OpenGL for Embedded Systems • Well-defined subsets of desktop OpenGL • What you’re using playing 3D games on your iPhone 3G (Orig. iPhone, Android are ES 1.0) • OpenGL ES 1.X is for fixed function hardware. 2.0 is fully programmable vertex and fragement shaders.Monday, July 11, 2011
  21. 21. WebGL uses shaders for just about everything • Little bits of run-time compiled code that runs on the GPU • GLSL (OpenGL Shading Language) • “High Level” Shader language based on C • Compiled at runtime • Vertex shaders transform vertices • Fragment shaders compute pixel colorsMonday, July 11, 2011
  22. 22. WebGL PipeLine Vertex Operation ⇓ Rasterization ⇓ Fragment Operation ⇓ FrameBufferMonday, July 11, 2011
  23. 23. Simple(st) Shaders Vertex Shader attribute vec3 aVertexPosition; void main(void) { gl_Position = vec4(aVertexPosition, 1.0); } Fragment Shader void main(void) { gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0); }Monday, July 11, 2011
  24. 24. Which gets us...Monday, July 11, 2011
  25. 25. Simplest Full Example (From Mozilla IAP class)Monday, July 11, 2011
  26. 26. More Tutorials at LearningWebGl.com • Based on the famous NeHe Open GL Tutorials • Textures: http://learningwebgl.com/ lessons/lesson05/index.html • http://learningwebgl.com/blog/? page_id=1217Monday, July 11, 2011
  27. 27. Has anyone noticed a problem?Monday, July 11, 2011
  28. 28. Has anyone noticed a problem? OpenGL isn’t exactly something you want to have to see on a daily basis, especially as a Javascript ProgrammerMonday, July 11, 2011
  29. 29. Abstraction Please...Monday, July 11, 2011
  30. 30. PhiloGL Relatively new framework from Sencha Labs http://senchalabs.github.com/philogl/Monday, July 11, 2011
  31. 31. PhiloGL • “PhiloGL code is highly abbreviated compared to WebGL.” • Have transcribed the learningwebgl lessons to PhiloGL • http://senchalabs.github.com/philogl/ PhiloGL/examples/lessons/1/ • http://senchalabs.github.com/philogl/ PhiloGL/examples/lessons/5/ • Sort of neat, but kinda meh...Monday, July 11, 2011
  32. 32. Mr. Doobs Three.js https://github.com/mrdoob/three.js/ Generic 3D library that supports a WebGL rendering as one of the backends.Monday, July 11, 2011
  33. 33. Three.jsMonday, July 11, 2011
  34. 34. Three.js • Nice, standard OO Abstractions for 3D programming. • No documentation, but lots of examples in the examples directory. • Lots of Demos to look at on the Github Page • May be a little too abstract for performant WebGL games, but they are reworking the WebGL renderer, so who knows.Monday, July 11, 2011
  35. 35. Copperlicht • Bills itself as “Commercial grade WebGL 3D engine with editor” • http://www.ambiera.com/copperlicht/ • Quake 3 Level http://bit.ly/fGKoOhMonday, July 11, 2011
  36. 36. More Frameworks / Engines From the Chronos WebGL Wiki: http://www.khronos.org/webgl/wiki/Monday, July 11, 2011
  37. 37. glQueryMonday, July 11, 2011
  38. 38. glQuery doesn’t exist... But it should - talk to me if you’re interested in working on something after the meetup.Monday, July 11, 2011
  39. 39. Thanks! Pascal Rettig @cykod on TwitterMonday, July 11, 2011

×