Slides are in German Presentation for our Wikipedia built as a Building / Labyrinth - each article is a room - each link is a door We built it in an university computer graphics course, when WebGL was very young. We had to use some "pre-alpha" version of WebGL back then and some browser nightly-builds. Author page: http://waog.net

1. Wikip3dia
Kornelius Kalnbach & Oliver Stadie

2. ● OpenGL ES 2.0 für JavaScript
● Shader!
● Standard noch in Arbeit
● läuft in
● Gecko (Firefox 3.7)
● WebKit (Safari, Chrome)
● Opera, nicht IE
● mobile Varianten

3. Idee
● Wikipedia als Gebäude
● Artikel = Raum
● Link = Tür, Tunnel
● automatisch generiert
● Raum mit Platz für alle Links
● Textur mit Linktiteln

4. Demo

5. Features
● MipMaps
● Ambient Lighting
● Directional Lighting
● Point Lighting
● Fake Shadow
● Reflektion
● Phong Shading
● Lens Flare
● Backface Culling
● generierte Texturen
● Alpha Blending
● Nebel
● Shader
● …

6. Technik
● JavaScript
● komplett im Browser
● keine Serverlast
● plattform-unabhängig
● MediaWiki API
● WebGL
Betriebssystem Hardware
Browser
JavaScript WebGL OpenGL Grafikkarte

7. Danke!
Fragen?

8. Lense Flare
● Textur mit Alphakanal & Alpha Blending
● 3 orthogonale Ebenen
● Depth-Buffer-Test deaktiviert.
+ - = Depth-
Buffer

9. Reflektion
● Boden zeichnen
● Tiefenbuffer manipulieren
gl.depthFunc(gl.GREATER);
gl.depthMask(false);
● Szene am Boden spiegeln
mvMatrix = mvScale(mvMatrix, 1, -1, 1);
● Szene zeichnen, bei Kisten nur Vorderseite
gl.enable(gl.CULL_FACE);
● Boden nochmal zeichnen (mit Alpha)
gl.depthFunc(gl.EQUAL);
gl.enable(gl.BLEND);
setAlpha(gl, shaderProgram, 0.6);