Computer Graphik - Wasser mit Tessellierung

Computer Graphik - Wasser mit Tessellierung
Praktikum Computer Graphik im WS 2012/13 bei Prof. Eisert
Joanathan Bräuer
Marvin Triebel
1 Beschreibung des Programms
Es wurde ein Programm geschrieben, dass durch den Einsatz der OpenGL Pipieline mit dem Tessellation
Shader eine Wasser Oberfläche erzeugt. Das Wasser bewegt sich dynamisch und durch einen Klick breitet
sich eine Welle von der Klickposition aus. Dabei werden viele Berechnungen für die Wasseroberfläche auf
der Grafikkarte durchgeführt.
Abbildung 1: Das fertige Programm
Das Programm wurde für OpenGL geschrieben und funktioniert nur auf Windows. Zudem ist es
erforderlich, dass die Grafikkarte den Tessellation Shader unterstützt.
2 Realisierung
Im folgenden werden die einzelnen Schritte der Realisierung beschrieben.
1

2.1 Erstellung des Basisprogramms
Als erstes wurde auf Grundlage von [2] ein ausführbares Programm erstellt mit der OpenGL 3.0 Pipeline
inklusive Tessellation Shader. Als einziges sichtbares Objekt ist eine Fläche zu sehen.
Abbildung 2: Die Szene ohne Tesselierung als Wireframe
2.2 Tessellierung
Als nächstes wurde die Tessellation Pipeline mit dem Tessellation Control und dem Tessellation Evaluation
Shader geschrieben, um dynamisch neue Vertices zu erzeugen.
Abbildung 3: Vergleich: Polygonnetz ohne Tessellierung und Polygonnetz mit Tessellierung (16 Inner/16
Outer)
2

2.3 Erzeugung der Welle
Die Welle wurde nach Abhängigkeit in Lage der Ebene und der Zeit mit folgender Formel erzeugt. Die
Gewichtungen wurden durch Ausprobieren herausgefunden.
d = √ x 2 + z 2
δ = d − t
{
0 , falls δ > 0
y(δ) =
15
0.1 · sin(2 · δ) ·
15+δ
, sonst
1.5
wobei x und z der Abstände zum Wellenzentrum in der Ebene und t die vergangene Zeit seit Beginn der Welle ist
Die Normale konnte dann entsprechend der Ableitung berechnet werden.
⎧⎛
⎞
⎜
⎝
⎛
⎪⎨
⎜
n(x, y) = ⎝
x
d
−1
y ′ (δ)
z
d
−x
d
1
y ′ (δ)
−z
⎟
⎠ , falls y ′ (x) < 0
⎞
⎟
⎠ , falls y ′ (x) < 0
⎛ ⎞d
0
⎜ ⎟
⎝1⎠ , falls y ′ (x) = 0
⎪⎩
0
Abbildung 4: Die Welle ohne Normalen-Noise und ohne Cubemap
3

2.4 Erkennen der Klickposition
Um das Wellenzentrum an der Stelle zu positionieren, an die geklickt wurde, mussten wir die Position
des Mauszeigers in einen Ray umwandeln. Dafür haben wir die Position des Mauszeigers im Viewport
auf die Near- und Far-Clipping Plane übertragen und somit einen Ray erzeugt. Nun suchten wir den
Schnittpunkt dieses Rays mit der Ebene E : {(x, y, z)|y = 0} und konnten so den Punkt hinter dem
Mauszeiger ermitteln, an dem sich das Wellenzentrum befinden sollte.
2.5 Verwenden von Noise
Für eine rauhe Oberfläche des Wasser wurden die Normalen des Wasser durch Einsatz von Simplex
Noise[4] jeweils ein wenig variiert. Das Simplex Noise wurde in Abhängigkeit der Position in der Ebene
sowie der Zeit berechnet. Die Implementation wurde von [4] übernommen.
Ähnlich zu dem Noise auf den Normalen wurde auch die Geomtrie durch den Einsatz von Simplex
Noise ein wenig variiert, sodass die Oberfläche des Wasser stets in Bewegung ist. Allerdings sind bei der
Ebene die Veränderungen auf der Geometrie weniger gravierend. Die meisten sichtbaren Veränderungen
wurden durch das Noise auf den Normalen erreicht.
2.6 Lichtberechnung
Es wird nur eine Punktlichtquelle eingesetzt, die ähnlich einer Abendsonne nah über dem Wasser steht
und ein gelbrotes Licht wirft. Die Lichtfarbe und Reflektion wurde nach dem Blinn-Phong-Modell[2]
berechnet. Zusätzlich wurde ein blaues Licht hinzugefügt, das ambient leuchtet.
2.7 Reflektion durch Cubemap
Abbildung 5: Das Licht der Szene im Normalennoise
Um Reflektionen auf dem Wasser zu simulieren, wurde zusätzlich eine Cubemap eingesetzt. Die Cubemap
wurde von [1] genommen.
4

2.8 Alphatransparenz mit Untergrund
Abbildung 6: Die Reflektionen der Cubemap mit Noise
Durch Verwendung der entsprechenden OpenGL Funktionen wurde die Wasseroberfläche halbtransperent
gemacht. Zusätzlich wurde eine mit Kieselsteinen texturierte Ebene unter dem Wasser eingefügt.
5

2.9 Performanz
Abbildung 7: halbe Transparenz des Wassers
Durch den Einsatz von Tesselierung ließ sich eine gute Performance bei hoher Detailstufe erreichen. Als
Testrechner wurde AMD Athlon II 3Ghz QuadCore mit 8GB Ram und einer nVIDIA Geforce GTX 550ti
Grafikkarte mit 1024MB DDR Grafikspeicher verwendet. Hier wurde mit dem Beispielprogramm bei einer
Auflösung von 800x600 und einem Tesselierungsfaktor von 40 (sowohl Inner als auch Outer Tesselation)
eine Renderzeit von rund 3-4ms (ca. 30 FPS) erreicht. Die Basisebene besteht aus 576 Vertices. Durch
Tesselierung wurden dabei etwa 2,8 Millionen neue Vertices erzeugt.
3 Weitere Ideen, Schlussfolgerungen
Der Einsatz von Noise und Wellen im Tessellation Shader ist ein mächtiges Werkzeug, um Oberflächen
durch zusätzliche Vertices natürlicher wirken zu lassen bei sehr guter Ressourcenausnutzung durch die
Berechnung auf der Grafikkarte.
3.1 Erweiterungsideen
Für das Programm gab es folgende Ideen als mögliche Erweiterungen:
6

• Abstandsabhängige Tesselierung
Die Anzahl der eingefügten Vertices könnte in Abhängigkeit des Abstandes und des Winkels zur
Betrachterposition variiert werden. Dadurch müssten weniger Punkte tesseliert werden und die
Performance ließe sich steigern.
• andere Noisefunktionen Durch den Einsatz von den anderen Noisefunktionen oder speziellen
Normalmaps könnte die rauhe Oberfläche des Wasser natürlicher wirken.
• Lichtbrechung Das Licht sollte eigentlich von dem Wasser gebrochen werden und durch Berechnung
des Brechungswinkels könnte ein Refraction- Effekt erreicht werden. Um auf Raytracing zu verzichten
könnte der flache Untergrund vorher einmal gerendert werden, um dann durch Verwendung der
Normalen des Wassers die Brechung zu berechnen.
• mehrere Wellen überlagern Das Programm kann zu einem Zeitpunkt nur eine Welle um ein
Zentrum darstellen. Eine Möglichkeit das Programm zu erweitern wäre mehrere Wellen zu überlagern.
Dadurch würden sich die Berechnung der Sinuswellen überlagern und die Berechnung der Normalen
durch die Ableitung müsste entsprechend angepasst werden, um die überlappenden Wellen zu
berechnen.
Literatur
[1] afgho (Cafu). “Skybox creation (Environmental Map, Cubemap)”. 2013. url: http://www.cafu.
de/wiki/textures:skydomes.
[2] Prof. Dr. Peter Eisert. “Halbkurs Computer Graphik”. 2012. url: http://www.informatik.huberlin.de/forschung/gebiete/viscom/teaching/computergraphik12.
[3] Jeff Molofee (NeHe) Evan Pipho (Terminate). “Loading Compressed And Uncompressed TGA’s”.
2013. url: http://nehe.gamedev.net/tutorial/loading_compressed_and_uncompressed_tga%
27s/22001/.
[4] Ashima Arts Ian McEwan. “Array and textureless GLSL 2D/3D/4D simplex noise functions”. 2011.
url: https://raw.github.com/ashima/webgl-noise/master/src/noise3D.glsl.
7