WebGL - An Overview

1. WebGL An Overview Dienstag, 20. März 12

2. WebGL An Overview and awesome demos!! Dienstag, 20. März 12

3. Jens Arps @jensarps jensarps.de github.com/jensarps uxebu.com Dienstag, 20. März 12

4. - Introduction - Technology - History - Mobile Browsers - Use Cases - Demos Dienstag, 20. März 12

5. What is this? Dienstag, 20. März 12

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 card's Graphics Processing Unit (GPU). http://en.wikipedia.org/wiki/WebGL Dienstag, 20. März 12

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. What is this? Enable 3D applications in the web. Dienstag, 20. März 12

9. What is this? WebGL is an Open Standard (Maintained by the Khronos Group) Dienstag, 20. März 12

10. Technology Dienstag, 20. März 12

11. Technology JavaScript + OpenGL (OpenGL is the non-Microsoft standard for 3D programming) http://en.wikipedia.org/wiki/OpenGL Dienstag, 20. März 12

12. Technology OpenGL Shading Language (Not really JavaScript) http://en.wikipedia.org/wiki/GLSL Dienstag, 20. März 12

13. History Dienstag, 20. März 12

14. History Chrome: Feb 2011 Firefox: Mar 2011 Dienstag, 20. März 12

15. History Chrome: Feb 2011 Firefox: Mar 2011 Opera: Feb 2011 Dienstag, 20. März 12

16. History Chrome: Feb 2011 Firefox: Mar 2011 Opera: Feb 2011 Safari: Now Dienstag, 20. März 12

17. History Chrome: Feb 2011 Firefox: Mar 2011 Opera: Feb 2011 Safari: Now IE: Never Dienstag, 20. März 12

18. History Chrome: Feb 2011 Firefox: Mar 2011 Opera: Feb 2011 Safari: Now IE: Never Dienstag, 20. März 12

19. History Q: 3D before 2011? A: No. Dienstag, 20. März 12

20. History Q: 3D before 2011? A: No Plugins. Dienstag, 20. März 12

21. Mobile Browsers Dienstag, 20. März 12

22. Mobile Browsers Firefox mobile: yes Android webkits: some Mobile Safari: Only Ads* Chrome Android: no Opera mobile: no Dienstag, 20. März 12

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. Do we need it? Dienstag, 20. März 12

25. Do we need it? Content types in the web: Consumption Interaction Text centric Visual centric Dienstag, 20. März 12

26. Do we need it? Content types in the web: Consumption Interaction Text centric not at all still, no Visual centric yes deﬁnitely! Dienstag, 20. März 12

27. Do we need it? #1: Presentation focused websites Dienstag, 20. März 12

28. Do we need it? #2: Gaming Dienstag, 20. März 12

29. Do we need it? #2: Gaming ($$$) Dienstag, 20. März 12

30. Do we need it? #3: Art Dienstag, 20. März 12

31. Demos Dienstag, 20. März 12

32. Demos Flight of the Navigator http://videos.mozilla.org/serv/mozhacks/ﬂight-of-the-navigator/ The ﬁrst large WebGL Demo, by Mozilla. Dienstag, 20. März 12

33. Demos Rome http://www.ro.me/ Commercial project to present the artists Danger Mouse and Norah Jones. Dienstag, 20. März 12

34. Demos Quake level demo http://media.tojicode.com/q3bsp/ One of the ﬁrst level ports from a commercial game. Dienstag, 20. März 12

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. Demos Doom like map http://www.glge.org/demos/leveldemo/ Dienstag, 20. März 12

37. Demos Wloom http://plsw.net/webgl/wloom6/shooter.htm Dienstag, 20. März 12

38. Demos RavenJS http://www.youtube.com/watch?v=OWy96m8lo-U Gothic II port Dienstag, 20. März 12

39. Perspective Dienstag, 20. März 12

40. Perspective Performance will increase Dienstag, 20. März 12

41. Perspective Other specs/features will rise – e.g. NaCl, WebCL Dienstag, 20. März 12

42. Perspective Spec will increase – e.g. 3D positional Audio Dienstag, 20. März 12

43. Perspective WebGL will become usable on mobile devices Dienstag, 20. März 12

44. Libraries Dienstag, 20. März 12

45. Libraries three.js https://github.com/mrdoob/three.js/ http://mrdoob.github.com/three.js/ Dienstag, 20. März 12

46. Libraries GLGE https://github.com/supereggbert/GLGE http://www.glge.org/ Dienstag, 20. März 12

47. Thanks! @jensarps jensarps.de github.com/jensarps Dienstag, 20. März 12

WebGL - An Overview

WebGL - An Overview

Recommended

More Related Content

Recently uploaded

Recently uploaded(10)

Featured

Featured(20)

WebGL - An Overview