Wie man Natur-Shader mit Shader Graph in 2022 LTS erstellt

In diesem Blog erfahren Sie, wie Sie mit der Universal Render Pipeline (URP) in 2022 LTS zwei verschiedene Natur-Shader erstellen können. Außerdem werfen wir einen genaueren Blick auf einen stilisierten Wasser-Shader und einen semi-realistischen Sand-Shader. Die Assets werden mit den neuen URP 3D-Beispielszenen veröffentlicht.

Die visuellen Effekte scheinen auf den ersten Blick komplex zu sein, aber wir werden in den designbasierten Denkprozess hinter diesen Funktionen eintauchen und die Techniken, die sie zum Leben erwecken, Schritt für Schritt aufschlüsseln. Lassen Sie uns die Feinheiten der Shader-Entwicklung erforschen und beeindruckende Natur-Shader erstellen.

Ziel ist es, wie im obigen Video zu sehen, einen stilisierten Bach zu schaffen, der inmitten einer japanischen Gartenszene verläuft. Wie die übrige Umgebung ist auch die Atmosphäre ruhig und zen-artig, und der Grafikstil ist eher animiert als fotorealistisch.

Aus dem in die Szene eingebetteten Gelände ist das Wasser eine Kombination aus zwei Teilen: einem Wasserfall und einem unter der Brücke verlaufenden Bach. Die Wasserszenen von Studio Ghibli sind sehr inspirierend und bestehen häufig aus drei verschiedenen Elementen:

1. Fließlinien, die den Fluss des Wassers bestimmen helfen

2. Hervorhebung der Kanten, um die Interaktion des Wassers mit dem umgebenden Gelände zu zeigen

3. Schaumstoffeffekte, um Kaskaden oder Wasserfälle zu verkaufen

Der endgültige Wasser-Shader wird alle diese Elemente verwenden. Lassen Sie uns nun die Details erforschen, wie Sie diesen Look erreichen können.

Der Wasserfall hat zwei verschiedene Maschen - die primäre Wasserfallmasche und eine scheibenförmige Ebene, die Wellen erzeugt. Wenn Sie einen separaten unbeleuchteten Shader für die Wellen verwenden, können Sie einen Rauschknoten kacheln und ihn als Alphawert für den Shader verwenden. Dadurch werden die übrigen Bereiche ausgeblendet, so dass die Wellen dort erscheinen, wo sie sollen.

Das Wichtigste dabei ist, dass jeder Bereich des Netzes verschiedene Verhaltensweisen ausführen kann. Sie können dies erreichen, indem Sie die Meshes mit Scheitelfarben im roten (R), grünen (G) und blauen (B) Kanal vormalen. Die Scheitelfarben werden dann als Masken verwendet, um Operationen in bestimmten Bereichen zu trennen.

Verwenden Sie im Shader Graph den Vertex Color Node, um auf die vorgemalten Vertex-Farbdaten zuzugreifen. Wie auf der rechten Seite des Bildes unten zu sehen ist, können Sie den roten Kanal in der Scheitelfarbe als T-Wert verwenden, um zwischen dem vertikalen und dem horizontalen Teil des Wasserfalls zu interpolieren (lerpen) und so einen weichen Übergang zu erzielen. Um einen Wasserkaskadeneffekt zu erzeugen, kombinieren Sie zwei Voronoi-Knoten, die jeweils unterschiedliche Kacheln und Versätze aufweisen. Das Ergebnis ist ein dynamisches Bild des fallenden Wassers.

Bei realen Wasserfällen weisen die Bereiche, in denen das Wasser von der oberen horizontalen Ebene herabstürzt und auf die untere horizontale Ebene trifft, oft dickere Schaum- und Spritzschichten auf. In der Szene können Sie die Scheitelfarbe im blauen Kanal vormalen, um sicherzustellen, dass die Effekte nur in bestimmten Bereichen sichtbar sind. Mit Hilfe von Scheitelpunkt-Farbmasken können Sie bis zu vier verschiedene Effekte in einem einzigen Datenelement kombinieren. Dieser Ansatz ist effizienter als die Erstellung separater Graustufen-Maskentexturen für jeden Effekt.

Um die Illusion mehrerer Wasserschichten zu erzeugen, die von der Kante herabfallen, verwenden Sie Rauschknoten mit unterschiedlichen Skalen und Geschwindigkeiten. Indem Sie einen Rauschknoten mit einer größeren Skala in einer langsameren Geschwindigkeit neben einem Rauschknoten mit einer kleineren Skala in einer schnelleren Geschwindigkeit verschieben, erzielen Sie den gewünschten Effekt. Um die Konsistenz mit dem horizontalen Teil des Wasserfalls aufrechtzuerhalten, verwenden Sie die Daten aus dem Wasserstrom wieder. Wir werden uns in Kürze näher mit dem Bachwasser befassen.

Nachdem Sie nun einen beruhigenden Wasserfall geschaffen haben, können Sie sich nun dem Bach zuwenden. Es gibt einige wichtige Merkmale, die Wasser im Animationsstil in der Regel aufweist. Im Gegensatz zum turbulenten Schaum an der Küste, wie er in der realen Welt vorkommt, hat ein Ghibli-Strom in der Regel einen sehr dünnen Schaum in Ufernähe. Außerdem kann das Vorhandensein von Wasserschwänzen einen dynamischen und lebendigen Eindruck auf dem Wasser vermitteln. Da die Szene bei Nacht spielt, ist auch ein überzeugender Reflexionseffekt erforderlich. Schauen wir uns genauer an, wie Sie diese Effekte in Shader Graph erzielen können.

Es gibt mehrere Möglichkeiten, eine Reflexion auf der Wasseroberfläche einzufangen. Die effizienteste Option ist ein benutzerdefinierter Funktionsknoten, der die in URP integrierte GlossyEnvironmentReflection-Funktionaufruft. Diese Funktion gibt die Reflexionsfarbe zurück, die von einer Box-Projektions-Reflexionssonde in der Szene abgetastet wird. Sie müssen lediglich die Position im Weltraum, die Blickrichtung, die Normalen und die Bildschirmposition angeben, die für die Funktion erforderlich sind.

Wenn Sie eine höhere visuelle Qualität und mehr geerdete Reflexionen benötigen, können die planaren Reflexionen von URP eine ausgezeichnete Option sein. Die planare Reflexion erzeugt eine spiegelähnliche Reflexion einer flachen Oberfläche, was für das Wassernetz aufgrund seiner flachen, ebenen Struktur ideal ist.

Um eine planare Reflexion zu erreichen, müssen Sie eine separate Kamera und Rendertextur einrichten, um die Reflexionsdaten zu speichern. Das Grundkonzept besteht darin, eine Reflexionskamera unter der Reflexionsebene (in diesem Fall der Stream in der Szene) zu platzieren und sie anhand der Position und Ausrichtung der Spielerkamera zu aktualisieren. Die Rendertextur wird ebenfalls in Echtzeit aktualisiert.

Ein Vorteil ist, dass Sie die nahe Ebene der Reflexionskamera als Reflexionsebene selbst festlegen können. Dadurch entfällt die Notwendigkeit, Objekte auszuschneiden, die sich unterhalb der Reflexionsebene befinden, was den Implementierungsprozess vereinfacht. In Shader Graph erstellen Sie eine Textureigenschaft, und im Skript weisen Sie ihr die zuvor erstellte Rendertextur zu.

Um die Rendertextur erfolgreich zu verknüpfen, stellen Sie sicher, dass beim Setzen der Shader-Eigenschaft die eingestellte Eigenschaft mit der Referenz-ID der Textureigenschaft übereinstimmt, die Sie im Shader-Graph erstellt haben. Stellen Sie sicher, dass das Skript die genaue Eigenschafts-ID aufruft, wenn die Rendertextur aktualisiert wird. Verwenden Sie dann die Bildschirmposition als UV, um die Textur abzutasten. Jetzt haben Sie erfolgreich eine planare Reflexion in unserem Shader erreicht.

Die Umsetzung der planaren Reflexion erfordert einige technische Überlegungen und Details. Für ein tieferes Verständnis und ein Beispiel für die Umsetzung können Sie sich dieses URP-Beispiel ansehen. Zu beachten ist, dass die planare Reflexion im Vergleich zur Verwendung von Reflexionssonden rechenintensiver ist, da die Objekte zweimal gerendert werden.

Um den Randschaumeffekt zu erzielen, müssen Sie die Tiefenunterschiede berechnen. Die Option Linear01 in Scene Depth Node gibt einen linearen Tiefenwert, skaliert von 0 bis 1, für opake Objekte zurück. Durch Multiplikation dieses Wertes mit dem Abstand der Kamera-Fernebene können Sie den Abstand zwischen der Kamera und dem undurchsichtigen Objekt - in diesem Fall dem Felsen - bestimmen. Die z-Komponente der Option Raw im Knoten Bildschirmposition gibt die Tiefe des Augenraums an. Sie können dann ganz einfach den Tiefenunterschied zwischen der transparenten Wasseroberfläche und dem undurchsichtigen Felsen berechnen und den Tiefenwert in die Ausgabe "Emission" eingeben, um einen schaumartigen Effekt zu erzeugen.

Um die Tiefenwerte aus der Szene abzurufen, müssen Sie die Tiefen-Textur in den Projekteinstellungen aktivieren. Sie finden die Option "Tiefen-Textur" im Abschnitt "Allgemein" des Render-Pipeline-Assets. Das aktuelle Render-Pipeline-Asset ist über Bearbeiten > Projekteinstellung > Grafiken > Render-Pipeline-Asset zugänglich.

Die Erstellung der Pfade, die die Bewegung des Wassers entlang des Baches zeigen, ist einfach. Indem Sie zwei Voronoi-Knoten kacheln und versetzen und die gewünschten Bereiche mit Scheitelfarben maskieren, können Sie stilisierte Wasserwege erzeugen, die entlang der Wasseroberfläche fließen. Passen Sie dann die Geschwindigkeit des Geräuschknotens an das vorhergehende fallende Wasser an. Sie haben nun stilisierte Wasserpfade, die durch die Wasseroberfläche fließen. Dies ähnelt der Technik, mit der die Stromlinien des Wasserfalls erstellt wurden.

Schalten wir nun einen Gang höher und sehen uns einen weniger stilisierten, realistischeren Shader an. Der Sand-Shader befindet sich in einer realistischen Wüstenszene, was bedeutet, dass das Terrain optisch dem echten Sand sehr ähnlich sein muss.

Sandputz ist eine interessante Herausforderung. Ein einfacher PBR-Shader kann das Aussehen von Wüstensand unter starker Sonne nicht einfangen. Beim Sand-Shader gibt es zwei Hauptmerkmale: das Sandglitzern, ein subtiler, aber bemerkenswerter Aspekt, und der wehende Staub, ein dynamisches Merkmal, das für Lebendigkeit sorgt.

Da Sand aus unzähligen winzigen Körnern besteht, funkelt er, wenn er dem Sonnenlicht ausgesetzt wird. Wie erzielt man diesen Glitzereffekt? Ähnlich wie bei der spiegelnden Reflexion wird zunächst der Reflexionsvektor anhand der Oberflächennormale berechnet. Inspiriert von Reiseberechnet man nicht das Punktprodukt zwischen dem Normalenvektor und dem Halbwertsvektor, sondern das Punktprodukt zwischen der Normalen und der Blickrichtung. Diese Einstellung sorgt dafür, dass das Glitzermuster je nach Betrachtungswinkel variiert, was den visuellen Reiz des Shaders erhöht.

Sie haben zwei Noise Maps im Shader. Die eine wird für das Sampling des Glitzerns verwendet, die andere zum Ausblenden der Hauptrauschtextur, um ein dynamischeres und fesselnderes Ergebnis zu erzielen. Verwenden Sie den zuvor berechneten Reflexionsvektor, um die für das Sampling der Rauschmaske verwendete UV zu verzerren.

Der Blowing-Dust-Sand-Effekt ist eine Kombination aus zwei Elementen: sich bewegende Sandspuren und Sandwellen. Das Konzept ist recht einfach. Sie kacheln verschiedene Normal Maps, um das gewünschte Ergebnis zu erzielen. Ein wichtiger Punkt bei den Sandspuren ist, dass Sie eine Maske benötigen, um die Normal Map auszublenden und den Effekt dynamischer aussehen zu lassen. Anstatt die Standard-UV zu verwenden, nehmen Sie zwei Rauschkarten mit absoluter Weltposition.

Beachten Sie, dass sich die Option "Welt" im Positionsknoten je nach Einstellung der verschiedenen Rendering-Pipelines ändert. Wählen Sie daher die Option "Absolute Welt", um Verhaltensänderungen beim Wechsel der Pipelines zu vermeiden. Als Nächstes kacheln Sie die beiden Karten in diagonaler Richtung, wodurch ein wellenförmiger Effekt entsteht. Scrollen Sie dann eine weitere Geräuschkarte entlang der Sandwellenrichtung, um das Gefühl zu verstärken, dass sich der Sand wegbewegt.

Ein wichtiger Aspekt ist, wie die normale Überblendung im Shader erreicht werden kann. In einem Sandgebiet, in dem die Albedokarte im Vergleich zu anderen Gebieten nicht so komplex ist, spielen die Normalen eine wichtige Rolle für das visuelle Erscheinungsbild. Mehrere Normal Maps im Shader überlagern. Anders als Albedo-Karten speichern Normalen-Karten Richtungen, und verschiedene Überblendmethoden können sehr unterschiedliche Ergebnisse liefern.

Nehmen wir den Normal Blend Node im Shader Graph als Beispiel. Beim Überblenden der Normalen Maps A und B addiert die Standardoption im Knoten Normalenüberblendung die x- und y-Kanäle der beiden Maps und multipliziert gleichzeitig die z-Kanäle, um das dritte Element der überblendeten Normalen zu erhalten. Die neu ausgerichtete Option ist, wie der Name schon sagt, ein komplizierteres Verfahren. Dabei werden die Normalen in Karte B so gedreht, dass sie mit der Richtung von Karte A übereinstimmen. Bei diesem Ansatz bleiben die meisten Daten aus beiden Karten erhalten, aber es ist auch die rechenintensivste Option.

In unserem Shader haben wir uns für eine einfache Überblendmethode für die Normalen entschieden. Der Hauptgrund für das Überblenden der Normalen ist die Erzeugung eines lebendigen Eindrucks von Sand, der über die Wüstenoberfläche weht oder sich bewegt. Die Genauigkeit hat nicht die höchste Priorität. Außerdem wird der Shader auf ein relativ großes Geländemesh angewandt, so dass eine Minimierung der Rechenkosten wichtig ist.

In Anbetracht dieser Faktoren gibt es einen einfachen Ansatz: Addieren Sie die roten und grünen Kanäle der Normal Maps und geben Sie für den blauen Kanal einen Wert von 1 ein. Erhöhen Sie dann die normale Stärke ein wenig, und das Ergebnis sieht großartig aus.

Zusätzlich zu den besprochenen Funktionen gibt es weitere Steuerelemente, die im Shader implementiert sind. Eine davon ist eine allgemeine Überblendungssteuerung, die bestimmt, wo die Effekte auf dem Gelände in Abhängigkeit von der Kameraentfernung erscheinen. Dies ermöglicht einen allmählichen Übergang und ein Ausblenden der Effekte, wenn sich die Kamera weiter entfernt.

Sie können auch den Glättungswert in der Ferne anpassen, um eine bessere Überblendung der Sanddünen mit dem Hintergrund zu erreichen. Wenn der Betrachter heranzoomt, ersetzt eine detaillierte Körnigkeitskarte die Geländenormalen. Dieser Ersatz sorgt für ein realistischeres Wüstenerlebnis, indem er der Sandoberfläche feinere Details und Texturen hinzufügt.

Nachdem Sie nun alle Funktionen dieser beiden Shader kennengelernt haben, sollten Sie nicht zögern, Ihre eigenen Versionen zu erstellen. Wenn Sie sich für die Erstellung von Shadern mit Shader Graph begeistern, treten Sie unserem Forum bei oder finden Sie uns auf Discord. Achten Sie auf zukünftige technische Aufschlüsselungen von Unity-Entwicklern als Teil der fortlaufenden Tech from the Trenches-Serie.