WebGL Awesomeness

6,071 views

Published on

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

No Downloads
Views
Total views
6,071
On SlideShare
0
From Embeds
0
Number of Embeds
30
Actions
Shares
0
Downloads
83
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

























  • WebGL Awesomeness

    1. 1. WebGL Awesomeness canvas.getContext('experimental-webgl')
    2. 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. 3. Factoids slides.length = 1
    4. 4. • Code in JavaScript & Shading Language
    5. 5. • Code in JavaScript & Shading Language • Load data via HTTP or bundle into DOM
    6. 6. • Code in JavaScript & Shading Language • Load data via HTTP or bundle into DOM • Textures? PNGs, JPEGs!
    7. 7. • Code in JavaScript & Shading Language • Load data via HTTP or bundle into DOM • Textures? PNGs, JPEGs! • Networking? Comet, WebSockets API!
    8. 8. • 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
    9. 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 • Shaders operate on GPU. No bottleneck.
    10. 10. Demos slides.length = 5
    11. 11. Spore Creature Viewer Vladimir Vukićević http://people.mozilla.com/~vladimir/webgl/spore/ sporeview.html
    12. 12. Fragment Shader Fun Dag Ågren http://wakaba.c3.cx/w/shader.html
    13. 13. “Metatunnel” FRequency, ilmarihe, vlad http://cs.helsinki.fi/u/ilmarihe/metatunnel.html
    14. 14. 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
    15. 15. Quake! WOHOOO! CopperLicht Engine http://www.ambiera.at/copperlicht/demos/ demo_quakelevel_external.html
    16. 16. Learn
    17. 17. Learn • Tutorials http://learningwebgl.com/
    18. 18. Learn • Tutorials http://learningwebgl.com/ • Reference & more https://developer.mozilla.org/en/WebGL
    19. 19. Learn • Tutorials http://learningwebgl.com/ • Reference & more https://developer.mozilla.org/en/WebGL • OpenGL Shading Language http://www.lighthouse3d.com/opengl/glsl/index.php
    20. 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 • Vector & Matrix Math: http://blog.vlad1.com/2010/02/05/mjs-simple-
    21. 21. Notes
    22. 22. Notes • Use Chromium, Minefield & Webkit Nightly
    23. 23. Notes • Use Chromium, Minefield & Webkit Nightly • WebGL Spec isn’t final
    24. 24. Notes • Use Chromium, Minefield & Webkit Nightly • WebGL Spec isn’t final • No fullscreen, ability to hide cursor yet
    25. 25. Notes • Use Chromium, Minefield & Webkit Nightly • WebGL Spec isn’t final • No fullscreen, ability to hide cursor yet • And GUESS what...
    26. 26. IE9 won’t have any of it.
    27. 27. QWESTINZ? © happycat

    ×