Erstellung eines Voxel-Wasser/Lava-Shaders mit Unity

In diesem Blog benutzte Tools

Für das Rendering benutze ich die Game-Engine Unity - Version 2020.3.2f1 - und für die Erstellung der Shader das visuelle Tool Shadergraph von Unity.

Was ist ein Shader? 

Shader sind kurz gesagt Programme, die nur auf einer GPU-Grafikkarte laufen und ursprünglich für die "Schattierung" von 3D-Szenen benutzt wurden.

Mittlerweile werden sie auch für komplexe Spezialeffekte, Nachbearbeitungsarbeiten

und sogar Funktionen eingesetzt, die gar nichts mehr mit einer grafischen Darstellung zu tun haben.

Durch die Parallelisierung einer Grafikkarte sind Shader extrem schnell und performant. So lassen sich auch rechenintensive Probleme wie z. B. künstliche Intelligenz mit Pathfinding auf die Grafikkarte übertragen.

Welche Shader gibt es?

Die zwei häufigsten Shader sind Fragment-/Pixel- Shader und Vertex-Shader. Des Weiteren gibt es noch Compute-Shader für rechenintensive Anwendungen, Geometrie-Shader, Tessellation-Shader und Raytracing-Shader.

Ich beziehe mich hier allerdings nur auf Fragment-/Pixel- und Vertex-Shader.

Fragment-Shader

Fragment-Shader oder auch Pixel-Shader sind zuständig für die Farbe eines "Fragments" bzw. Pixel. Hiermit werden bspw. Texturen auf Objekten dargestellt.

Fragment- bzw. Pixel-Shader laufen für jeden einzelnen Pixel auf dem Bildschirm. Bei einer HD-Auflösung von 1920 x 1080 Pixel bedeutet dies exakt 2,073,600 mal.

Vertex-Shader 

Vertex-Shader werden benutzt, um die "Vertices" eines 3D-Objekts zu verändern.

Gemeint sind hier die einzelnen Eckpunkte, aus denen ein 3D-Objekt besteht (s. grüne Markierung).

Da wir nun wissen, dass wir mit einem Vertex-Shader die einzelnen Punkte beliebig verschieben können, müssen wir dies nur noch dem Shader mitteilen.

Mit Shadergraph geht das ganz leicht, indem wir zur aktuellen Position der Vertices einfach etwas hinzufügen und diesen Wert dann für das Objekt umwandeln.

Wir haben unser Objekt nun um drei Einheiten nach oben verschoben.
Insgesamt ist dieser Effekt jedoch noch recht unspektakulär.

Noise, zu Deutsch "Rauschen", ist im Prinzip genau das.

Es gibt eine Funktion, mit der wir solch ein Rauschen mit einem wiedererkennbaren Muster erzeugen können.

Die Eingabewerte heißen hier "Scale" (Skalierung) und "Cell Density" (Zellen-Dichte). Wenn wir diese jeweils mit Zahlen füllen, erzeugen wir genau so einen Rauscheffekt.

Um fortzufahren, müssen wir den Begriff "UV" klären. "U" und "V" sind die Texturkoordinaten. Diese bestimmen, welcher Teil einer Textur wo auf das 3D-Modell "gemalt", also projiziert, werden soll. U und V haben hier keine sprachliche Bedeutung.

UV-Koordinaten beginnen unten links auf einer Textur mit den Koordinaten "0, 0" und enden oben rechts mit den Koordinaten "1, 1".

UVs bewegen für richtige Wellen

Da Wellen sich bewegen, müssen wir auch die UVs unserer Noise-Muster bewegen. Das passiert mit "Tiling and Offset" (s. o. Screenshot).

Hier werden die Texturkoordinaten mit einer Zeitangabe und einem Wert multipliziert, um den Bewegungseffekt zu erzeugen.

Noise-Muster sind wiedererkennbar

Normalerweise würden Texturen grob gesagt "verschwinden", sobald wir die UVs zu weit bewegen.

Jedoch haben unsere Noise-Muster den Vorteil, dass sie wiedererkennbar sind und sich ihre UVs beliebig weit bewegen lassen.

Nun heißt es alles zusammenmischen

In Shadergraph gibt es die Funktion "Blend", mit der wir unsere Noise-Muster vermischen können. Wenn wir unsere beiden Muster eingeben, vermischt die Blend-Funktion diese um dem Wert einer Zahl.

Wir mixen nun zuerst die zwei Gradient-Noise-Muster und vermischen dieses neue Muster dann mit dem Voronoi-Muster.

Da wir jetzt ein schönes bewegtes Wellenmuster haben, können wir damit die Vertices verändern.

Hierzu werden die Werte unseres finalen Noise-Musters normalisiert. Das heißt lediglich, dass die Werte dort nur noch zwischen "0" und "1" liegen.

Dann können wir dieses Muster für die Angabe der Wellenhöhe mit einer Zahl multiplizieren und zu unserer Position hinzufügen.

Hier ist es wichtig, dass wir nur den Wert für die Höhe bearbeiten. Sonst bewegt sich unser Objekt nach links und rechts, was unnatürlich wirken würde.

Daher teilen wir die Position auf, sodass nur der Wert für die Höhe das Noise-Muster bekommt.

Da wir hier direkt mit der "Objekt"-Position arbeiten, müssen wir diese nicht umwandeln wie zu Beginn des Blogs. Allerdings bedeutet dies, dass wir die Z-Koordinate anstatt die Y-Koordinate für die Höhe nutzen müssen. Im Screenshot stehen "R, G, B, A" für die Koordinaten "X, Y, Z, W".

Um den Effekt zu erzeugen, dass unser Wasser aus Voxel (3D-Pixeln oder auch Würfeln) besteht, können wir die Texturkoordinaten vor dem Übergang in die Noise-Muster kacheln. .

Alternativ kann dieser Teil auch entfallen, z. B. wenn Sie "normales" Wasser lieber mögen.

Water Resolution hat jeweils eine X- und eine Y- Koordinate. Hier können wir Auflösungen wie "32 x 32, 64 x 64" oder auch "2048 x 2048" eintragen.

Jedes Noise-Muster erhält nun seine eigene Farbe.
Farben werden in Shadergraph mit "R, G, B-Werten" von "0" bis "255" angegeben.

Dazu packen wir lediglich den Output jedes einzelnen Noise-Musters in eine "Multiply"-Funktion. Diese multipliziert zwei Eingaben miteinander. Die zweite Eingabe ist dann die jeweilige Farbe für das Noise-Muster.

Am Ende addieren wir alle Farben zusammen und verbinden den Output mit unserem Fragment-Shader.

Hier das Ergebnis!

Um unser Wasser noch etwas zu optimieren, eignen sich Reflexionen sehr gut.

Normal Maps 

Normal Maps sind Texturen, die die Lichtberechnung beeinflussen. Sie dienen dazu, einem Objekt mehr Details zu verleihen, ohne jedoch die Anzahl an Polygonen zu erhöhen.

Polygone sind die Dreiecke zwischen unseren Vertices. Je mehr wir davon haben, desto höher wird die Auflösung, aber auch der Rechenaufwand.

Normal Maps erzeugen mit Shadergraph

Um nun passende Reflexionen zu erzeugen, kopieren wir einfach den gesamten Teil der Noise-Muster-Berechnung ohne das "Verpixeln" und packen den Output in die "Normal From Height"-Funktion.

Jetzt schieben wir das Ganze noch in den "Normal"-Input unseres Fragment-Shaders. Dort können wir den Wert "Smoothness" verändern. Dieser gibt an, wie viel unsere Oberfläche reflektieren kann.