Talk given at Webmontag Bonn in March 2012

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 definitely!
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/flight-of-the-navigator/
The first 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 first 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