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.
WebGL                        An OverviewDienstag, 20. März 12
WebGL                             An Overview                        and awesome demos!!Dienstag, 20. März 12
Jens Arps                             @jensarps                             jensarps.de                        github.com/...
- Introduction                        - Technology                        - History                        - Mobile Browse...
What is this?Dienstag, 20. März 12
What is this?                        WebGL (Web-based Graphics Library) is a software library                        that ...
What is this?                        Use JavaScript to program                           the GPU and display              ...
What is this?                        Enable 3D applications in                                the web.Dienstag, 20. März 12
What is this?                        WebGL is an Open Standard                        (Maintained by the Khronos Group)Die...
TechnologyDienstag, 20. März 12
Technology                            JavaScript + OpenGL            (OpenGL is the non-Microsoft standard for 3D programm...
Technology                        OpenGL Shading Language                          (Not really JavaScript)                ...
HistoryDienstag, 20. März 12
History                        Chrome: Feb 2011                        Firefox: Mar 2011Dienstag, 20. März 12
History                        Chrome: Feb 2011                        Firefox: Mar 2011                        Opera: Feb...
History                        Chrome: Feb 2011                        Firefox: Mar 2011                        Opera: Feb...
History                        Chrome: Feb 2011                        Firefox: Mar 2011                        Opera: Feb...
History                        Chrome: Feb 2011                        Firefox: Mar 2011                        Opera: Feb...
History                        Q: 3D before 2011?                              A: No.Dienstag, 20. März 12
History                        Q: 3D before 2011?                          A: No Plugins.Dienstag, 20. März 12
Mobile BrowsersDienstag, 20. März 12
Mobile Browsers                        Firefox mobile: yes                        Android webkits: some                   ...
Mobile Browsers                             Firefox mobile: yes                             Android webkits: some         ...
Do we need it?Dienstag, 20. März 12
Do we need it?                            Content types in the web:                                         Consumption   ...
Do we need it?                            Content types in the web:                                         Consumption   ...
Do we need it?                        #1: Presentation focused websitesDienstag, 20. März 12
Do we need it?                        #2: GamingDienstag, 20. März 12
Do we need it?                        #2: Gaming                          ($$$)Dienstag, 20. März 12
Do we need it?                        #3: ArtDienstag, 20. März 12
DemosDienstag, 20. März 12
Demos                                 Flight of the Navigator                 http://videos.mozilla.org/serv/mozhacks/fligh...
Demos                                     Rome                               http://www.ro.me/                        Comm...
Demos                               Quake level demo                        http://media.tojicode.com/q3bsp/           One...
Demos                                     Team Fortress 2              http://www.youtube.com/watch?v=DQrC5YLKFUY         ...
Demos                                  Doom like map                        http://www.glge.org/demos/leveldemo/Dienstag, ...
Demos                                        Wloom                        http://plsw.net/webgl/wloom6/shooter.htmDienstag...
Demos                              RavenJS             http://www.youtube.com/watch?v=OWy96m8lo-U                         ...
PerspectiveDienstag, 20. März 12
Perspective                        Performance will increaseDienstag, 20. März 12
Perspective              Other specs/features will rise – e.g. NaCl, WebCLDienstag, 20. März 12
Perspective                        Spec will increase – e.g. 3D positional AudioDienstag, 20. März 12
Perspective                   WebGL will become usable on mobile devicesDienstag, 20. März 12
LibrariesDienstag, 20. März 12
Libraries                                     three.js                        https://github.com/mrdoob/three.js/         ...
Libraries                                       GLGE                        https://github.com/supereggbert/GLGE          ...
Thanks!                             @jensarps                             jensarps.de                        github.com/je...
Upcoming SlideShare
Loading in …5
×

WebGL - An Overview

3,871 views

Published on

Talk given at Webmontag Bonn in March 2012

Published in: Technology, Art & Photos
  • Be the first to comment

WebGL - An Overview

  1. 1. WebGL An OverviewDienstag, 20. März 12
  2. 2. WebGL An Overview and awesome demos!!Dienstag, 20. März 12
  3. 3. Jens Arps @jensarps jensarps.de github.com/jensarps uxebu.comDienstag, 20. März 12
  4. 4. - Introduction - Technology - History - Mobile Browsers - Use Cases - DemosDienstag, 20. März 12
  5. 5. What is this?Dienstag, 20. März 12
  6. 6. What is this? WebGL (Web-based Graphics Library) is a software library that extends the capability of the JavaScript programming language to allow it to generate interactive 3D graphics within any compatible web browser. WebGL code executes on a computer display cards Graphics Processing Unit (GPU). http://en.wikipedia.org/wiki/WebGLDienstag, 20. März 12
  7. 7. What is this? Use JavaScript to program the GPU and display output in a browser, without the use of plugins.Dienstag, 20. März 12
  8. 8. What is this? Enable 3D applications in the web.Dienstag, 20. März 12
  9. 9. What is this? WebGL is an Open Standard (Maintained by the Khronos Group)Dienstag, 20. März 12
  10. 10. TechnologyDienstag, 20. März 12
  11. 11. Technology JavaScript + OpenGL (OpenGL is the non-Microsoft standard for 3D programming) http://en.wikipedia.org/wiki/OpenGLDienstag, 20. März 12
  12. 12. Technology OpenGL Shading Language (Not really JavaScript) http://en.wikipedia.org/wiki/GLSLDienstag, 20. März 12
  13. 13. HistoryDienstag, 20. März 12
  14. 14. History Chrome: Feb 2011 Firefox: Mar 2011Dienstag, 20. März 12
  15. 15. History Chrome: Feb 2011 Firefox: Mar 2011 Opera: Feb 2011Dienstag, 20. März 12
  16. 16. History Chrome: Feb 2011 Firefox: Mar 2011 Opera: Feb 2011 Safari: NowDienstag, 20. März 12
  17. 17. History Chrome: Feb 2011 Firefox: Mar 2011 Opera: Feb 2011 Safari: Now IE: NeverDienstag, 20. März 12
  18. 18. History Chrome: Feb 2011 Firefox: Mar 2011 Opera: Feb 2011 Safari: Now IE: NeverDienstag, 20. März 12
  19. 19. History Q: 3D before 2011? A: No.Dienstag, 20. März 12
  20. 20. History Q: 3D before 2011? A: No Plugins.Dienstag, 20. März 12
  21. 21. Mobile BrowsersDienstag, 20. März 12
  22. 22. Mobile Browsers Firefox mobile: yes Android webkits: some Mobile Safari: Only Ads* Chrome Android: no Opera mobile: noDienstag, 20. März 12
  23. 23. Mobile Browsers Firefox mobile: yes Android webkits: some Mobile Safari: Only Ads* Chrome Android: no Opera mobile: no (But don‘t ask about performance)Dienstag, 20. März 12
  24. 24. Do we need it?Dienstag, 20. März 12
  25. 25. Do we need it? Content types in the web: Consumption Interaction Text centric Visual centricDienstag, 20. März 12
  26. 26. Do we need it? Content types in the web: Consumption Interaction Text centric not at all still, no Visual centric yes definitely!Dienstag, 20. März 12
  27. 27. Do we need it? #1: Presentation focused websitesDienstag, 20. März 12
  28. 28. Do we need it? #2: GamingDienstag, 20. März 12
  29. 29. Do we need it? #2: Gaming ($$$)Dienstag, 20. März 12
  30. 30. Do we need it? #3: ArtDienstag, 20. März 12
  31. 31. DemosDienstag, 20. März 12
  32. 32. Demos Flight of the Navigator http://videos.mozilla.org/serv/mozhacks/flight-of-the-navigator/ The first large WebGL Demo, by Mozilla.Dienstag, 20. März 12
  33. 33. Demos Rome http://www.ro.me/ Commercial project to present the artists Danger Mouse and Norah Jones.Dienstag, 20. März 12
  34. 34. Demos Quake level demo http://media.tojicode.com/q3bsp/ One of the first level ports from a commercial game.Dienstag, 20. März 12
  35. 35. Demos Team Fortress 2 http://www.youtube.com/watch?v=DQrC5YLKFUY Sadly, video only due to copyrighted material.Dienstag, 20. März 12
  36. 36. Demos Doom like map http://www.glge.org/demos/leveldemo/Dienstag, 20. März 12
  37. 37. Demos Wloom http://plsw.net/webgl/wloom6/shooter.htmDienstag, 20. März 12
  38. 38. Demos RavenJS http://www.youtube.com/watch?v=OWy96m8lo-U Gothic II portDienstag, 20. März 12
  39. 39. PerspectiveDienstag, 20. März 12
  40. 40. Perspective Performance will increaseDienstag, 20. März 12
  41. 41. Perspective Other specs/features will rise – e.g. NaCl, WebCLDienstag, 20. März 12
  42. 42. Perspective Spec will increase – e.g. 3D positional AudioDienstag, 20. März 12
  43. 43. Perspective WebGL will become usable on mobile devicesDienstag, 20. März 12
  44. 44. LibrariesDienstag, 20. März 12
  45. 45. Libraries three.js https://github.com/mrdoob/three.js/ http://mrdoob.github.com/three.js/Dienstag, 20. März 12
  46. 46. Libraries GLGE https://github.com/supereggbert/GLGE http://www.glge.org/Dienstag, 20. März 12
  47. 47. Thanks! @jensarps jensarps.de github.com/jensarpsDienstag, 20. März 12

×