Download as KEY, PPTX
![> 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/"
}](https://image.slidesharecdn.com/webgl-100321200850-phpapp01/85/WebGL-Awesomeness-2-320.jpg)
![> 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/"
}](https://image.slidesharecdn.com/webgl-100321200850-phpapp01/75/WebGL-Awesomeness-2-2048.jpg)
Uploaded byStephan Seidt
WebGL Awesomeness
This document provides an overview of WebGL capabilities including: - Code can be written in JavaScript and shader languages - Data can be loaded from HTTP or bundled in the DOM - Textures like PNGs and JPEGs can be used - Networking APIs allow features like Comet and WebSockets - WebGL runs on the GPU avoiding bottlenecks It also shares several demos of WebGL and provides resources for learning WebGL.
WebGL Awesomeness
- 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.
- 5. • Code inJavaScript & Shading Language
- 6. • Code inJavaScript & Shading Language • Load data via HTTP or bundle into DOM
- 7. • Code inJavaScript & Shading Language • Load data via HTTP or bundle into DOM • Textures? PNGs, JPEGs!
- 8. • Code inJavaScript & Shading Language • Load data via HTTP or bundle into DOM • Textures? PNGs, JPEGs! • Networking? Comet, WebSockets API!
- 9. • Code inJavaScript & Shading Language • Load data via HTTP or bundle into DOM • Textures? PNGs, JPEGs! • Networking? Comet, WebSockets API! • Advantage? No install, rapid prototyping
- 10. • Code inJavaScript & 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.
- 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.
- 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.
- 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 haveany of it.
- 28.