Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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

338 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
  • Als Erste(r) kommentieren

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

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);

×