1. WebGL Awesomeness
canvas.getContext('experimental-webgl')

2. > this
http://uberhost.de/webgl.pdf
> meta
{
"author": "Stephan Seidt",
"twitter": "evilhackerdude",
"date": new Date(2010, 2, 20),
"barcamp": "nuremberg",
"wgs84": [49.428667, 11.018128]
}
> license
{
"title": "Creative Commons Attribution-Share Alike 3.0 United States License",
"url": "http://creativecommons.org/licenses/by-sa/3.0/us/"
}

3. Factoids
slides.length = 1

5. • Code in JavaScript & Shading Language

6. • Code in JavaScript & Shading Language
• Load data via HTTP or bundle into DOM

7. • Code in JavaScript & Shading Language
• Load data via HTTP or bundle into DOM
• Textures? PNGs, JPEGs!

8. • Code in JavaScript & Shading Language
• Load data via HTTP or bundle into DOM
• Textures? PNGs, JPEGs!
• Networking? Comet, WebSockets API!

9. • Code in JavaScript & Shading Language
• Load data via HTTP or bundle into DOM
• Textures? PNGs, JPEGs!
• Networking? Comet, WebSockets API!
• Advantage? No install, rapid prototyping

10. • Code in JavaScript & Shading Language
• Load data via HTTP or bundle into DOM
• Textures? PNGs, JPEGs!
• Networking? Comet, WebSockets API!
• Advantage? No install, rapid prototyping
• Shaders operate on GPU. No bottleneck.

11. Demos
slides.length = 5

12. Spore Creature Viewer
Vladimir Vukićević
http://people.mozilla.com/~vladimir/webgl/spore/
sporeview.html

13. Fragment Shader Fun
Dag Ågren
http://wakaba.c3.cx/w/shader.html

14. “Metatunnel”
FRequency, ilmarihe, vlad
http://cs.helsinki.fi/u/ilmarihe/metatunnel.html

15. GLGE Demos
GLGE Engine by Paul Brunt
http://www.glge.org/demo/
http://www.glge.org/demos/colladademo/index.html
http://www.glge.org/demos/fogdemo/index.htm
http://www.glge.org/demos/textdemo/index.htm

16. Quake! WOHOOO!
CopperLicht Engine
http://www.ambiera.at/copperlicht/demos/
demo_quakelevel_external.html

17. Learn

18. Learn
• Tutorials
http://learningwebgl.com/

19. Learn
• Tutorials
http://learningwebgl.com/
• Reference & more
https://developer.mozilla.org/en/WebGL

20. Learn
• Tutorials
http://learningwebgl.com/
• Reference & more
https://developer.mozilla.org/en/WebGL
• OpenGL Shading Language
http://www.lighthouse3d.com/opengl/glsl/index.php

21. Learn
• Tutorials
http://learningwebgl.com/
• Reference & more
https://developer.mozilla.org/en/WebGL
• OpenGL Shading Language
http://www.lighthouse3d.com/opengl/glsl/index.php
• Vector & Matrix Math:
http://blog.vlad1.com/2010/02/05/mjs-simple-

22. Notes

23. Notes
• Use Chromium, Minefield & Webkit Nightly

24. Notes
• Use Chromium, Minefield & Webkit Nightly
• WebGL Spec isn’t final

25. Notes
• Use Chromium, Minefield & Webkit Nightly
• WebGL Spec isn’t final
• No fullscreen, ability to hide cursor yet

26. Notes
• Use Chromium, Minefield & Webkit Nightly
• WebGL Spec isn’t final
• No fullscreen, ability to hide cursor yet
• And GUESS what...

27. IE9 won’t have any of it.

28. QWESTINZ?
© happycat