Tutorial Wassereffekt - Versionsgeschichte

Glawesome: /* In the end... */ Kategorie hinzugefügt

2014-03-09T10:58:29Z

‎In the end...: Kategorie hinzugefügt

Glawesome: /* Die Wasserebene */ Ebene verlinkt, dass -> das

2013-10-20T09:33:48Z

‎Die Wasserebene: Ebene verlinkt, dass -> das

Openglerf: Reflektion -> Reflexion

2012-03-18T16:13:53Z

Reflektion -> Reflexion

DGLBot: Der Ausdruck ''(.*?)'' wurde ersetzt mit ''$1''.

2009-03-10T18:30:23Z

Der Ausdruck ''<glsl>(.*?)</glsl>'' wurde ersetzt mit ''<source lang="glsl">$1</source>''.

DGLBot: Der Ausdruck ''(.*?)'' wurde ersetzt mit ''$1''.

2009-03-10T18:15:48Z

Der Ausdruck ''<pascal>(.*?)</pascal>'' wurde ersetzt mit ''<source lang="pascal">$1</source>''.

Ireyon: /* Texturen füllen */

2009-01-03T22:56:24Z

‎Texturen füllen

Ireyon: /* Texturen füllen */

2009-01-03T19:16:33Z

‎Texturen füllen

Ireyon: /* Texturen füllen */

2009-01-03T19:13:45Z

‎Texturen füllen

Lord Horazont: Anpassung an die neuen Bilder

2008-07-17T09:16:45Z

Anpassung an die neuen Bilder

Lord Horazont: Rechtschreibfehler korrigiert, danke an LittleDave

2008-07-17T09:16:15Z

Rechtschreibfehler korrigiert, danke an LittleDave

← Nächstältere Version		Version vom 9. März 2014, 10:58 Uhr
Zeile 413:		Zeile 413:

	{{TUTORIAL_NAVIGATION\|[[Tutorial Alphamasking]]\|-}}		{{TUTORIAL_NAVIGATION\|[[Tutorial Alphamasking]]\|-}}
		+
		+	[[Kategorie:Tutorial\|Wassereffekt]]

@@ Zeile 10: / Zeile 10: @@
 = Die Wasserebene =
-Das Erste, dass  wir brauchen ist eine Ebene - am besten Quads - von mir aus auch zwei Triangles. Wichtig ist, dass es eine Ebene ist. Es darf keine Höhenunterschiede geben. Die Z-Achse sollte hierbei die Höhe darstellen, X und Y dienen als... als X und Y eben ;) Natürlich fehlt noch so ziemlich alles. Diese Ebene allein macht nicht einen Wassereffekt aus. Jetzt brauchen wir erst einmal ein paar Texturen. Diese sollten der "Power of Two"-Regel gemäß und quadratisch sein. Dabei muss man beachten, dass sie keinesfalls größer als der maximal beschreibbare Viewport sein sollten, weil die Texturen komplett gefüllt werden müssen. Der Grund dafür ist, dass man nicht über den Rand des Framebuffers (des Fensters) zeichnen kann, zuminest nicht ohne Erweiterungen, also muss die Textur kleiner oder genauso groß wie der Framebuffer sein. Diese Texturen sollten bereits zu Anfang des Programms erstellt und initialisiert werden. Genau genommen brauchen wir zwei Stück. Jeweils eine für die Reflexions- und Refraktionsmap. Wenn wir ohne Shader arbeiten, sollten sie nur als RGB initialisiert werden. Wenn wir später den Shader zuschalten, brauchen wir auch den Alphakanal. Die Größe sollte sich am originalen Viewport ausrichten. Die Texturen lassen sich übrigens am Besten mit glCopyTexImage2D initialisieren, da man dort keinen Puffer mit Pixeldaten braucht, den man übergeben muss.
+Das Erste, das  wir brauchen ist eine Ebene - am besten Quads - von mir aus auch zwei Triangles. Wichtig ist, dass es eine [[Ebene]] ist. Es darf keine Höhenunterschiede geben. Die Z-Achse sollte hierbei die Höhe darstellen, X und Y dienen als... als X und Y eben ;) Natürlich fehlt noch so ziemlich alles. Diese Ebene allein macht nicht einen Wassereffekt aus. Jetzt brauchen wir erst einmal ein paar Texturen. Diese sollten der "Power of Two"-Regel gemäß und quadratisch sein. Dabei muss man beachten, dass sie keinesfalls größer als der maximal beschreibbare Viewport sein sollten, weil die Texturen komplett gefüllt werden müssen. Der Grund dafür ist, dass man nicht über den Rand des Framebuffers (des Fensters) zeichnen kann, zuminest nicht ohne Erweiterungen, also muss die Textur kleiner oder genauso groß wie der Framebuffer sein. Diese Texturen sollten bereits zu Anfang des Programms erstellt und initialisiert werden. Genau genommen brauchen wir zwei Stück. Jeweils eine für die Reflexions- und Refraktionsmap. Wenn wir ohne Shader arbeiten, sollten sie nur als RGB initialisiert werden. Wenn wir später den Shader zuschalten, brauchen wir auch den Alphakanal. Die Größe sollte sich am originalen Viewport ausrichten. Die Texturen lassen sich übrigens am Besten mit glCopyTexImage2D initialisieren, da man dort keinen Puffer mit Pixeldaten braucht, den man übergeben muss.
 = Texturen füllen =

@@ Zeile 10: / Zeile 10: @@
 = Die Wasserebene =
-Das Erste, dass  wir brauchen ist eine Ebene - am besten Quads - von mir aus auch zwei Triangles. Wichtig ist, dass es eine Ebene ist. Es darf keine Höhenunterschiede geben. Die Z-Achse sollte hierbei die Höhe darstellen, X und Y dienen als... als X und Y eben ;) Natürlich fehlt noch so ziemlich alles. Diese Ebene allein macht nicht einen Wassereffekt aus. Jetzt brauchen wir erst einmal ein paar Texturen. Diese sollten der "Power of Two"-Regel gemäß und quadratisch sein. Dabei muss man beachten, dass sie keinesfalls größer als der maximal beschreibbare Viewport sein sollten, weil die Texturen komplett gefüllt werden müssen. Der Grund dafür ist, dass man nicht über den Rand des Framebuffers (des Fensters) zeichnen kann, zuminest nicht ohne Erweiterungen, also muss die Textur kleiner oder genauso groß wie der Framebuffer sein. Diese Texturen sollten bereits zu Anfang des Programms erstellt und initialisiert werden. Genau genommen brauchen wir zwei Stück. Jeweils eine für die Reflektions- und Refraktionsmap. Wenn wir ohne Shader arbeiten, sollten sie nur als RGB initialisiert werden. Wenn wir später den Shader zuschalten, brauchen wir auch den Alphakanal. Die Größe sollte sich am originalen Viewport ausrichten. Die Texturen lassen sich übrigens am Besten mit glCopyTexImage2D initialisieren, da man dort keinen Puffer mit Pixeldaten braucht, den man übergeben muss.
+Das Erste, dass  wir brauchen ist eine Ebene - am besten Quads - von mir aus auch zwei Triangles. Wichtig ist, dass es eine Ebene ist. Es darf keine Höhenunterschiede geben. Die Z-Achse sollte hierbei die Höhe darstellen, X und Y dienen als... als X und Y eben ;) Natürlich fehlt noch so ziemlich alles. Diese Ebene allein macht nicht einen Wassereffekt aus. Jetzt brauchen wir erst einmal ein paar Texturen. Diese sollten der "Power of Two"-Regel gemäß und quadratisch sein. Dabei muss man beachten, dass sie keinesfalls größer als der maximal beschreibbare Viewport sein sollten, weil die Texturen komplett gefüllt werden müssen. Der Grund dafür ist, dass man nicht über den Rand des Framebuffers (des Fensters) zeichnen kann, zuminest nicht ohne Erweiterungen, also muss die Textur kleiner oder genauso groß wie der Framebuffer sein. Diese Texturen sollten bereits zu Anfang des Programms erstellt und initialisiert werden. Genau genommen brauchen wir zwei Stück. Jeweils eine für die Reflexions- und Refraktionsmap. Wenn wir ohne Shader arbeiten, sollten sie nur als RGB initialisiert werden. Wenn wir später den Shader zuschalten, brauchen wir auch den Alphakanal. Die Größe sollte sich am originalen Viewport ausrichten. Die Texturen lassen sich übrigens am Besten mit glCopyTexImage2D initialisieren, da man dort keinen Puffer mit Pixeldaten braucht, den man übergeben muss.
 = Texturen füllen =
@@ Zeile 38: / Zeile 38: @@
 Das sollte soweit klar sein. Jetzt zu dem eigentlichen Inhalt von RenderWaterMap.
-Dort muss zunächst einmal der komplette Viewport geleert werden. Danach sollte der Viewport auf die Größe von WaterTexSize verkleinert werden, damit das Gerenderte letztendlich auch auf die Texturen passt. Jetzt kommen wir langsam zu dem Trick, den ich weiter oben erwähnte: Erst einmal muss die Texturmatrix auf die Identitätsmatrix zurückgesetzt werden. Weiter geht es mit dem ersten Renderpass für die Reflektion. Das Ergebnis sollte in die Reflect-Textur gespeichert werden. Danach die Szene noch einmal rendern (nicht vergessen, vorher die Textur wieder zu unbinden), diesmal jedoch ohne Invertierung der Z-Achse. Das kommt dann logischerweise in die Refract-Textur, weil die ClipPlane hier alles unter der Wasseroberfläche da lässt und den Rest abschneidet. Zu guter Vorletzt den Viewport wieder auf den Zustand zurücksetzen, auf dem er vor dem Rendern war und nochmal den Framebuffer leeren.
+Dort muss zunächst einmal der komplette Viewport geleert werden. Danach sollte der Viewport auf die Größe von WaterTexSize verkleinert werden, damit das Gerenderte letztendlich auch auf die Texturen passt. Jetzt kommen wir langsam zu dem Trick, den ich weiter oben erwähnte: Erst einmal muss die Texturmatrix auf die Identitätsmatrix zurückgesetzt werden. Weiter geht es mit dem ersten Renderpass für die Reflexion. Das Ergebnis sollte in die Reflect-Textur gespeichert werden. Danach die Szene noch einmal rendern (nicht vergessen, vorher die Textur wieder zu unbinden), diesmal jedoch ohne Invertierung der Z-Achse. Das kommt dann logischerweise in die Refract-Textur, weil die ClipPlane hier alles unter der Wasseroberfläche da lässt und den Rest abschneidet. Zu guter Vorletzt den Viewport wieder auf den Zustand zurücksetzen, auf dem er vor dem Rendern war und nochmal den Framebuffer leeren.
 Jetzt wird es interessant: In der Texturmatrix müssen folgende Operationen durchgeführt werden: Verschieben um (0.5, 0.5, 0.0) und skalieren um (0.5, 0.5, 0.0). Dann eine Perspektive mit dem Seitenverhältnis, welches wir auch in unserer „echten“ Szene haben erzeugen und danach die Kameraoperationen durchführen.
@@ Zeile 127: / Zeile 127: @@
 glDisable(GL_TEXTURE_2D);
 glDisable(GL_BLEND);</source>
-Die Texturkoordinaten sollten ja jetzt klar sein. Zuerst wird die Reflektionstextur gerendert, danach folgt die Refraktionstextur. Dabei wird erstere mit vollem Alpha gerendert und die andere darüber geblendet. Bei den Shadern werden beide Texturen gebunden und an den Shadern übergeben, dazu jedoch gleich mehr. [[Bild:Ld_watertutorial_step1.jpg|thumb|right|Die einfache Wasserebene ohne Wellen (von littleDave)]] Rechts könnt ihr euch von eurem Ergebnis überzeugen.
+Die Texturkoordinaten sollten ja jetzt klar sein. Zuerst wird die Reflexionstextur gerendert, danach folgt die Refraktionstextur. Dabei wird erstere mit vollem Alpha gerendert und die andere darüber geblendet. Bei den Shadern werden beide Texturen gebunden und an den Shadern übergeben, dazu jedoch gleich mehr. [[Bild:Ld_watertutorial_step1.jpg|thumb|right|Die einfache Wasserebene ohne Wellen (von littleDave)]] Rechts könnt ihr euch von eurem Ergebnis überzeugen.
 = Auf zu den Shadern =
@@ Zeile 220: / Zeile 220: @@
    gl_FragColor = blendedColor;
 }</source>
-Das ist recht viel Quelltext auf einmal. Aber wir schauen ihn uns nun  stückchenweise an. Die ersten Zeilen deklarieren die verwendeten Uniforms.  Dann wird noch das texMat-Varying aus dem Vertexshader übernommen. Wie wir bereits vorhin gelernt haben, ist die Texturmatrix unerlässlich, um die Textur einfacher auf die Ebene zu projizieren. Im Hauptcode haben wir dann einen ganzen Haufen Variablendeklarationen. Hervor sticht offsetColor, für das zwei Texturzugriffe verwendet werden, um die Farbe aus der Bumpmap zu lesen. Zwei Zugriffe deshalb, um das Wasser ein wenig detaillierter zu machen. Danach wird offsetColor skaliert: Eine normale Bitmap hat nun einmal nicht die Möglichkeit, negative Werte zu speichern, aber es würde ohne diese sehr eintönig aussehen. Danach wird das Offset für Reflektion und Refraktion berechnet. Das läuft bei beiden ähnlich ab: Die Texturkoordinate wird mit der Matrix multipliziert und erst einmal in einer Variable gespeichert, dann wird der Wert aus der Map gelesen und das Alpha auf 1.0 gesetzt.
+Das ist recht viel Quelltext auf einmal. Aber wir schauen ihn uns nun  stückchenweise an. Die ersten Zeilen deklarieren die verwendeten Uniforms.  Dann wird noch das texMat-Varying aus dem Vertexshader übernommen. Wie wir bereits vorhin gelernt haben, ist die Texturmatrix unerlässlich, um die Textur einfacher auf die Ebene zu projizieren. Im Hauptcode haben wir dann einen ganzen Haufen Variablendeklarationen. Hervor sticht offsetColor, für das zwei Texturzugriffe verwendet werden, um die Farbe aus der Bumpmap zu lesen. Zwei Zugriffe deshalb, um das Wasser ein wenig detaillierter zu machen. Danach wird offsetColor skaliert: Eine normale Bitmap hat nun einmal nicht die Möglichkeit, negative Werte zu speichern, aber es würde ohne diese sehr eintönig aussehen. Danach wird das Offset für Reflexion und Refraktion berechnet. Das läuft bei beiden ähnlich ab: Die Texturkoordinate wird mit der Matrix multipliziert und erst einmal in einer Variable gespeichert, dann wird der Wert aus der Map gelesen und das Alpha auf 1.0 gesetzt.
-[[Bild:Ld_watertutorial_step2.jpg|thumb|right|Der zweite Schritt: Die Shader-Wellen sind deutlich sichtbar (von littleDave)]]Weiter geht es mit dem Schalter zwischen erweitertem Blending und normalem Blending. Das erweiterte Blending versucht eine Wasseroberfläche von der Lichtdurchlässigkeit möglichst realistisch darzustellen, indem die Sichtbarkeit der Objekte unterhalb der Oberfläche, also dem Teil in der Refraktionsmap, der Helligkeit der Reflektion angepasst: Wenn man mit einer Lampe auf eine Wasseroberfläche leuchtet, kann man schlechter durch die von der Lampe getroffene Stelle blicken, weil die Reflektion der Lampe das, was darunter liegt, überstrahlt. Zu guter Letzt wird im Shader noch die berechnete Farbe an OpenGL zurückgegeben, sodass sie dann in den Framebuffer geschrieben werden kann. mappingRatio legt übrigens das Verhältnis zwischen Reflektion und Refraktion fest, falls erweitertes Blending deaktiviert ist (also extendedBlending = 0). Ein Wert von 1.0 würde bedeuten, dass nur die Refraktionsmap gerendert wird, ein Blending von 0.0 bedeutet, dass nur die Reflektionsmap durchkommt. Diese Multiplikationen da oben mache ich übrigens, um ein Problem mit der Genauigkeit des Floats im Shader zu umgehen. Rechts nochmal ein Bild zum aktuellen Status. Da erkennt man schon deutlich die Wellen und, wenn man genauer hinschaut, erkennt man auch eine unschöne Linie beim Übergang von der Wasserebene zum Objekt.
+[[Bild:Ld_watertutorial_step2.jpg|thumb|right|Der zweite Schritt: Die Shader-Wellen sind deutlich sichtbar (von littleDave)]]Weiter geht es mit dem Schalter zwischen erweitertem Blending und normalem Blending. Das erweiterte Blending versucht eine Wasseroberfläche von der Lichtdurchlässigkeit möglichst realistisch darzustellen, indem die Sichtbarkeit der Objekte unterhalb der Oberfläche, also dem Teil in der Refraktionsmap, der Helligkeit der Reflexion angepasst: Wenn man mit einer Lampe auf eine Wasseroberfläche leuchtet, kann man schlechter durch die von der Lampe getroffene Stelle blicken, weil die Reflexion der Lampe das, was darunter liegt, überstrahlt. Zu guter Letzt wird im Shader noch die berechnete Farbe an OpenGL zurückgegeben, sodass sie dann in den Framebuffer geschrieben werden kann. mappingRatio legt übrigens das Verhältnis zwischen Reflexion und Refraktion fest, falls erweitertes Blending deaktiviert ist (also extendedBlending = 0). Ein Wert von 1.0 würde bedeuten, dass nur die Refraktionsmap gerendert wird, ein Blending von 0.0 bedeutet, dass nur die Reflexionsmap durchkommt. Diese Multiplikationen da oben mache ich übrigens, um ein Problem mit der Genauigkeit des Floats im Shader zu umgehen. Rechts nochmal ein Bild zum aktuellen Status. Da erkennt man schon deutlich die Wellen und, wenn man genauer hinschaut, erkennt man auch eine unschöne Linie beim Übergang von der Wasserebene zum Objekt.
 = Feintuning =
-Wenn man jetzt einfach einen Würfel in die Wasserfläche setzt, der auf der Vorder- und der Rückseite verschiedene Farben hat, dann wird sichtbar, dass durch die Wellen unschöne Kanten entstehen, weil die Refraktions-/Reflektionsmap keine Objektgrenzen kennt. Doch dafür gibt es eine simple aber dennoch wirkungsvolle Methode, die ich jetzt beschreibe. Hierzu müssen wir den Code für das Rendern der Texturen leicht anpassen:
+Wenn man jetzt einfach einen Würfel in die Wasserfläche setzt, der auf der Vorder- und der Rückseite verschiedene Farben hat, dann wird sichtbar, dass durch die Wellen unschöne Kanten entstehen, weil die Refraktions-/Reflexionsmap keine Objektgrenzen kennt. Doch dafür gibt es eine simple aber dennoch wirkungsvolle Methode, die ich jetzt beschreibe. Hierzu müssen wir den Code für das Rendern der Texturen leicht anpassen:
 <source lang="pascal">  glClear(GL_COLOR_BUFFER_BIT or GL_DEPTH_BUFFER_BIT);

@@ Zeile 136: / Zeile 136: @@
 Jetzt zu dem Shader, dem wir die Werte übergeben wollen. Erst einmal ein kurzes Brainstorming. Was brauchen wir? Zunächst müssen die Texturen entsprechend der Matrizen transformiert werden. Danach müssen sie wiederum entsprechend der Bumpmaps verschoben werden, so dass ein Welleneffekt entsteht. Dies alles passiert im Fragmentshader. Der Vertexshader dagegen sieht recht harmlos aus:
-<glsl>varying mat4 texMat;
+<source lang="glsl">varying mat4 texMat;
 void main(void)
@@ Zeile 145: / Zeile 145: @@
    gl_TexCoord[1]  = gl_MultiTexCoord1;
    gl_FrontColor   = gl_Color;
-}</glsl>
+}</source>
 Was im Vertexshader passiert, sollte wohl ziemlich klar sein. In Zeile 5 wird erst einmal der Vertex anhand der normalen Matrizen projiziert, so dass es die gleiche Wirkung hat, als wenn man es durch die normale Renderpipe jagen würde. Zeilen Sechs und Acht sind dafür zuständig, dass die Texturkoordinaten auch im Fragmentshader verwendet werden können. Zeile Sieben speichert die Texturmatrix in einer Varying, so dass wir sie ebenfalls im Fragmentshader verwenden können. Die neunte Zeile speichert noch die Farbe - eher unwichtig und man könnte es auch weglassen, aber ich fand es schön ;). Genug der Scherze, weiter mit dem Fragmentshader:
-<glsl>uniform sampler2D refractTex;
+<source lang="glsl">uniform sampler2D refractTex;
 uniform sampler2D reflectTex;
 uniform sampler2D bumpMap;
@@ Zeile 219: / Zeile 219: @@
    gl_FragColor = blendedColor;
-}</glsl>
+}</source>
 Das ist recht viel Quelltext auf einmal. Aber wir schauen ihn uns nun  stückchenweise an. Die ersten Zeilen deklarieren die verwendeten Uniforms.  Dann wird noch das texMat-Varying aus dem Vertexshader übernommen. Wie wir bereits vorhin gelernt haben, ist die Texturmatrix unerlässlich, um die Textur einfacher auf die Ebene zu projizieren. Im Hauptcode haben wir dann einen ganzen Haufen Variablendeklarationen. Hervor sticht offsetColor, für das zwei Texturzugriffe verwendet werden, um die Farbe aus der Bumpmap zu lesen. Zwei Zugriffe deshalb, um das Wasser ein wenig detaillierter zu machen. Danach wird offsetColor skaliert: Eine normale Bitmap hat nun einmal nicht die Möglichkeit, negative Werte zu speichern, aber es würde ohne diese sehr eintönig aussehen. Danach wird das Offset für Reflektion und Refraktion berechnet. Das läuft bei beiden ähnlich ab: Die Texturkoordinate wird mit der Matrix multipliziert und erst einmal in einer Variable gespeichert, dann wird der Wert aus der Map gelesen und das Alpha auf 1.0 gesetzt.
@@ Zeile 295: / Zeile 295: @@
 Wieder ein riesiger Codeblock, aber das meiste kennen wir ja bereits. Das einzige, was dazugekommen ist, sind die if UseDepthShader-Blöcke. UseDepthShader ist mal wieder eine Variable, die Ihr ruhig deklarieren solltet, um die Verwendung des DepthShaders einzuschränken. DepthShader sollte wieder mal eine Variable für den Namen des Shaderprogramms sein. Ich missbrauche hier den Alpha-Kanal der Texturen für Tiefeninformationen. Dies ist insofern sinnvoll, dass man nicht extra eine Textur braucht und daher auch die Shader relativ einfach zu erweitern sind. Aber jetzt erst einmal zum Tiefenshader. Hier haben wir wieder einen recht unspektakulären Vertexshader:
-<glsl>varying vec4 vpos;
+<source lang="glsl">varying vec4 vpos;
 varying vec4 ppos;
@@ Zeile 305: / Zeile 305: @@
    gl_FrontColor   = gl_Color;
    gl_ClipVertex = vpos;
-}</glsl>
+}</source>
 Obwohl es eher wie ein normaler Shader aussieht, ist es doch interessanter als man glaubt. Jetzt kommt uns der Vorteil zugute, dass wir die Kamera in der Projektionsmatrix haben. Wir können einfach die Kameraoptionen außen vor lassen und nur die Operationen, die in der Modelview-Matrix stehen auf den Vertex anwenden. Das erleichtert das Errechnen des Z-Wertes des Vertex ungemein. Jetzt zum Fragmentshader:
-<glsl>uniform float waterplaneZ;
+<source lang="glsl">uniform float waterplaneZ;
 varying vec4 vpos;
@@ Zeile 320: / Zeile 320: @@
    gl_FragColor = vec4(z, z, z, y);
-}</glsl>
+}</source>
 Hier werden die im Vertexshader berechneten Werte verwendet, um die Höhe des Vertices in den Alphakanal zu schreiben. Angemerkt werden sollte, dass die RGB-Informationen dank des glColorMask in RenderWaterMap verworfen werden. WaterplaneZ ist übrigens der Z-Wert der Wasserebene, in unserem Beispiel also 0.0, wie aus dem obigen Code hervorgeht.
 Jetzt müssen wir nur noch den Wassershader so verändern, dass er die jetzt im Alphakanal vorhandenen Informationen auch sinnvoll nutzt. Der Vertexshader bleibt dabei, wie er ist, aber der Fragmentshader sieht jetzt so aus:
-<glsl>uniform sampler2D refractTex;
+<source lang="glsl">uniform sampler2D refractTex;
 uniform sampler2D reflectTex;
 uniform sampler2D bumpMap;
@@ Zeile 401: / Zeile 401: @@
    gl_FragColor = blendedColor;
-}</glsl>
+}</source>
 [[Bild:Ld_watertutorial_step3.jpg|thumb|right|Der finale Wassereffekt mit Wellen und "Kantenerkennung" (von littleDave)]]Der neue Code multipliziert das Offset nochmal mit dem Alpha-Wert, in unserem Falle also die Distanz zwischen der Wasserebene und dem Pixel. Dadurch werden die Wellen je näher der Pixel an der Wasseroberfläche ist, immer niedriger. So werden an der direkten Kante zu dem Objekt, also da, wo der Alpha-Wert 0.0 ist, gar keine Wellen mehr erzeugt. Damit ist die nervige Kante weg. So sieht das ganze zum Schluss aus.

@@ Zeile 18: / Zeile 18: @@
 Wer schon etwas häufiger mit OpenGL gearbeitet hat, der kann sich vielleicht schon denken, wie man die Texturen am Besten füllen kann: natürlich mit ClipPlanes. Diese praktischen Dinger sorgen dafür, dass alles, was über bzw. unter ihnen liegt, abgeschnitten und nicht gezeichnet wird. Am besten für die Performance wäre es natürlich, wenn wir in der Anwendung noch einmal prüfen, ob das Objekt nicht vielleicht ganz unter/über Wasser ist und man es deshalb in diesem Renderpass weglassen könnte, aber das würde den Rahmen des Tutorials sprengen. Außerdem müssen wir dann noch entsprechend der aktuell zu füllenden Textur die Z-Achse invertieren je nachdem , ob wir den Teil über oder den Teil unter der Wasseroberfläche rendern wollen.
-<pascal>procedure DoRenderPass(InvertZ: Boolean);
+<source lang="pascal">procedure DoRenderPass(InvertZ: Boolean);
 const
    // Deklaration der ClipPlane
@@ Zeile 35: / Zeile 35: @@
    glDisable(GL_CLIP_PLANE0);
    glEnable(GL_CULL_FACE);
-end;</pascal>
+end;</source>
 Das sollte soweit klar sein. Jetzt zu dem eigentlichen Inhalt von RenderWaterMap.
@@ Zeile 43: / Zeile 43: @@
 Und jetzt der Code dazu:
-<pascal>
+<source lang="pascal">
    glClear(GL_COLOR_BUFFER_BIT or GL_DEPTH_BUFFER_BIT);
@@ Zeile 84: / Zeile 84: @@
    glBindTexture(GL_TEXTURE_2D, 0);
-</pascal>
+</source>
 = Wasser marsch =
 Jetzt zu der Wasserebene. Sicher kann man sich denken, dass aus dem Weiß noch mehr wird. Jetzt kommen wir zu der Sache mit der Texturmatrix. Die ist dank unserer Routine jetzt so aufgebaut, dass die übergebenen Texturkoordinaten wie in der normalen Projektionsmatrix verarbeitet werden. Das ermöglicht es als Texturkoordinaten genau die Werte zu übergeben, die auch glVertex3f bekommt. Das ist eine große Erleichterung, was vor allem nerviges hin- und hergerechne erspart. Da wir uns erst einmal mit dem non-shader-way befassen wollen, sieht unser Code für die Wasserebene jetzt so aus:
-<pascal>glEnable(GL_TEXTURE_2D);
+<source lang="pascal">glEnable(GL_TEXTURE_2D);
 glColor4f(1.0, 1.0, 1.0, 1.0);
@@ Zeile 126: / Zeile 126: @@
 glDisable(GL_TEXTURE_2D);
-glDisable(GL_BLEND);</pascal>
+glDisable(GL_BLEND);</source>
 Die Texturkoordinaten sollten ja jetzt klar sein. Zuerst wird die Reflektionstextur gerendert, danach folgt die Refraktionstextur. Dabei wird erstere mit vollem Alpha gerendert und die andere darüber geblendet. Bei den Shadern werden beide Texturen gebunden und an den Shadern übergeben, dazu jedoch gleich mehr. [[Bild:Ld_watertutorial_step1.jpg|thumb|right|Die einfache Wasserebene ohne Wellen (von littleDave)]] Rechts könnt ihr euch von eurem Ergebnis überzeugen.
@@ Zeile 227: / Zeile 227: @@
 Wenn man jetzt einfach einen Würfel in die Wasserfläche setzt, der auf der Vorder- und der Rückseite verschiedene Farben hat, dann wird sichtbar, dass durch die Wellen unschöne Kanten entstehen, weil die Refraktions-/Reflektionsmap keine Objektgrenzen kennt. Doch dafür gibt es eine simple aber dennoch wirkungsvolle Methode, die ich jetzt beschreibe. Hierzu müssen wir den Code für das Rendern der Texturen leicht anpassen:
-<pascal>  glClear(GL_COLOR_BUFFER_BIT or GL_DEPTH_BUFFER_BIT);
+<source lang="pascal">  glClear(GL_COLOR_BUFFER_BIT or GL_DEPTH_BUFFER_BIT);
    glViewport(0, 0, WaterTexSize, WaterTexSize);
@@ Zeile 292: / Zeile 292: @@
    glMatrixMode(GL_MODELVIEW);
-   glBindTexture(GL_TEXTURE_2D, 0);</pascal>
+   glBindTexture(GL_TEXTURE_2D, 0);</source>
 Wieder ein riesiger Codeblock, aber das meiste kennen wir ja bereits. Das einzige, was dazugekommen ist, sind die if UseDepthShader-Blöcke. UseDepthShader ist mal wieder eine Variable, die Ihr ruhig deklarieren solltet, um die Verwendung des DepthShaders einzuschränken. DepthShader sollte wieder mal eine Variable für den Namen des Shaderprogramms sein. Ich missbrauche hier den Alpha-Kanal der Texturen für Tiefeninformationen. Dies ist insofern sinnvoll, dass man nicht extra eine Textur braucht und daher auch die Shader relativ einfach zu erweitern sind. Aber jetzt erst einmal zum Tiefenshader. Hier haben wir wieder einen recht unspektakulären Vertexshader:

@@ Zeile 15: / Zeile 15: @@
 Jetzt geht es darum, wie wir die Szene in die Texturen und dann auf die Wasserebene bekommen. Hier kann ich einen Trick empfehlen, den ich aus einer Demo von Delphi3d.net habe- aber dazu gleich noch mehr.
-Wichtig ist vor allem, das wir uns erst einmal Gedanken machen, was die Texturen eigentlich beinhalten sollen. Refract sollte - wie der Name bereits sagt - die Refraktionsinformationen, also alles, was unter dem Wasser ist, darstellen, Reflect, daher das, was über dem Wasser ist. Damit keine Darstellungsfehler entstehen, wenn man über dem Wasser hin- und her navigiert, muss man beim Erstellen der Texturen die Parameter {{INLINE_CODE|GL_TEXTURE_WRAP_S}} und {{INLINE_CODE|GL_TEXTURE_WRAP_T}} auf {{INLINE_CODE|GL_CLAMP_TO_EDGE}} setzen.
+Wichtig ist vor allem, das wir uns erst einmal Gedanken machen, was die Texturen eigentlich beinhalten sollen. Refract sollte - wie der Name bereits sagt - die Refraktionsinformationen, also alles, was unter dem Wasser ist, darstellen, Reflect, daher das, was über dem Wasser ist. Damit keine Darstellungsfehler entstehen, wenn die Kamera über dem Wasser ist, müssen wir beim Erstellen der Texturen die Parameter {{INLINE_CODE|GL_TEXTURE_WRAP_S}} und {{INLINE_CODE|GL_TEXTURE_WRAP_T}} auf {{INLINE_CODE|GL_CLAMP_TO_EDGE}} setzen.
 Wer schon etwas häufiger mit OpenGL gearbeitet hat, der kann sich vielleicht schon denken, wie man die Texturen am Besten füllen kann: natürlich mit ClipPlanes. Diese praktischen Dinger sorgen dafür, dass alles, was über bzw. unter ihnen liegt, abgeschnitten und nicht gezeichnet wird. Am besten für die Performance wäre es natürlich, wenn wir in der Anwendung noch einmal prüfen, ob das Objekt nicht vielleicht ganz unter/über Wasser ist und man es deshalb in diesem Renderpass weglassen könnte, aber das würde den Rahmen des Tutorials sprengen. Außerdem müssen wir dann noch entsprechend der aktuell zu füllenden Textur die Z-Achse invertieren je nachdem , ob wir den Teil über oder den Teil unter der Wasseroberfläche rendern wollen.