WebGL - An Overview

3,564 views

Published on

Talk given at Webmontag Bonn in March 2012

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

No Downloads
Views
Total views
3,564
On SlideShare
0
From Embeds
0
Number of Embeds
26
Actions
Shares
0
Downloads
61
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

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

×