Wikip3dia 
Kornelius Kalnbach & Oliver Stadie
● OpenGL ES 2.0 für JavaScript 
● Shader! 
● Standard noch in Arbeit 
● läuft in 
● Gecko (Firefox 3.7) 
● WebKit (Safari,...
Idee 
● Wikipedia als Gebäude 
● Artikel = Raum 
● Link = Tür, Tunnel 
● automatisch generiert 
● Raum mit Platz für alle ...
Demo
Features 
● MipMaps 
● Ambient Lighting 
● Directional Lighting 
● Point Lighting 
● Fake Shadow 
● Reflektion 
● Phong Sh...
Technik 
● JavaScript 
● komplett im Browser 
● keine Serverlast 
● plattform-unabhängig 
● MediaWiki API 
● WebGL 
Betrie...
Danke! 
Fragen?
Lense Flare 
● Textur mit Alphakanal & Alpha Blending 
● 3 orthogonale Ebenen 
● Depth-Buffer-Test deaktiviert. 
+ - = Dep...
Reflektion 
● Boden zeichnen 
● Tiefenbuffer manipulieren 
gl.depthFunc(gl.GREATER); 
gl.depthMask(false); 
● Szene am Bod...
Wikip3dia - Wikipedia as a Building
Nächste SlideShare
Wird geladen in …5
×

Wikip3dia - Wikipedia as a Building

303 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Software
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
303
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
52
Aktionen
Geteilt
0
Downloads
1
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Wikip3dia - Wikipedia as a Building

  1. 1. Wikip3dia Kornelius Kalnbach & Oliver Stadie
  2. 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. 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. 4. Demo
  5. 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. 6. Technik ● JavaScript ● komplett im Browser ● keine Serverlast ● plattform-unabhängig ● MediaWiki API ● WebGL Betriebssystem Hardware Browser JavaScript WebGL OpenGL Grafikkarte
  7. 7. Danke! Fragen?
  8. 8. Lense Flare ● Textur mit Alphakanal & Alpha Blending ● 3 orthogonale Ebenen ● Depth-Buffer-Test deaktiviert. + - = Depth- Buffer
  9. 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);

×