Es gibt Spiele mit einem so einprägsamen Erscheinungsbild, dass es beängstigend ist, die für seine Entwicklung aufgewendete Zeit in Betracht zu ziehen, um zumindest den letzten God of War oder RDR2 zu nehmen. Und es gibt Projekte, die mit ihrer Atmosphäre bestechen, auch wenn sie weit von AAA entfernt sind. Zum Beispiel wurde RiME mehr als einmal für Stil, Sound und Geschichte gelobt. Und kürzlich hat sich der Leveldesigner des Spiels dem CD Projekt Red-Team angeschlossen, um an Cyberpunk 2077 zu arbeiten. RiME inspirierte auch den 3D-Künstler Math Roodhuizen, seine eigene Kunst zu kreieren.
Vor dem Hintergrund all dessen stieß ich auf eine ArtStation, die eine Anleitung zur Erstellung realistischen Wassers enthält. Wenn wir das
letzte Mal über den Fluss gesprochen haben, dann diesmal über einen stilisierten Wasserfall. Im ersten Teil werden wir uns ansehen, wie man einen "Welleneffekt" erzeugt, und sogar direkt in der Spiel-Engine. Der Einfachheit halber werden alle Schritte von Gifs und / oder Bildern begleitet.
Zunächst danke
ich Simon Trumpler, einem Künstler von Tequila Games, der an
RiME gearbeitet hat . Ich war noch neu bei Shadern und VFX, als ich sein
Material fand und dachte: "Wow, kann ich das auch tun?" Ich empfehle Ihnen, den Bericht zu lesen, um mehr über Möglichkeiten zum Erstellen stilisierter Effekte (z. B. Feuer) zu erfahren.
Lassen Sie uns nun über das Erstellen eines Wasserfalls sprechen. Dies ist besonders nützlich für Personen, die mit dem Shader Graph-System nicht vertraut sind. Unser Ziel: neue Arbeitsweisen erlernen und Shader besser verstehen.
Ich werde Unity als Beispiel verwenden, aber die meisten Methoden sind auch in UE4 anwendbar. Wenn Sie es gewohnt sind, dort zu arbeiten, wiederholen Sie einfach nach mir. Zur Vereinfachung wird jeder Schritt mit einem GIF oder Bild visualisiert.
Sie benötigen also:
- Einheit 2018.
- Amplify Shader Editor (Unity-Plugin). Wenn Sie jedoch kein Geld dafür ausgeben möchten, installieren Sie Unity 2017 und laden Sie die kostenlose Shaderforge aus dem Asset Store herunter (die neue Version der Engine unterstützt dieses Plugin nicht, funktioniert jedoch weiterhin in Unity 2017). Beide Werkzeuge sind fast identisch, außer dass einige Punkte unterschiedlich aufgerufen werden.
- Autodesk Maya.
- Alles, um Texturen zu erstellen oder zu bearbeiten. Ich verwende Photoshop und manchmal sogar Substance Designer (aber Sie werden es definitiv nicht für diesen Wasserfall benötigen).
Zunächst zum „Welleneffekt“, der auftritt, wenn ein Wasserfall an die Oberfläche fällt. Es kann auch für andere Zwecke verwendet werden, um beispielsweise Wellen um Objekte im Wasser zu erzeugen.
Öffnen Sie Unity und stellen Sie sicher, dass Sie das Shader-Plugin installiert haben. Zum Zeitpunkt des Schreibens verfügt Unity über ein eigenes Shader-Diagramm, das sich noch in der Entwicklung befindet. Und obwohl er noch nicht bereit ist, empfehle ich dennoch, den Amplify Shader Editor für Unity 2018 oder Shaderforge in Unity 2017 zu verwenden.
Erstellen Sie ein neues Material und geben Sie ihm einen Namen (ich habe MAT_WaterWrinkles). Klicken Sie dann mit der rechten Maustaste auf das Material auf der Registerkarte Projekt und gehen Sie zu Erstellen> Shader verstärken> Surface Shader. In diesem Fall wird der neue Shader automatisch angewendet.
Sie können jederzeit einen Shader auf der Registerkarte Materialien> Dropdown-Liste der Shader auswählen (für Shaderforge gibt es so etwas wie einen PBL-Shader). Denken Sie daran, dass der Shader nach dem Öffnen sowohl in der Ordnerliste als auch im Shader selbst benannt werden muss.
Sobald Sie einen neuen Shader öffnen, sehen Sie ungefähr Folgendes:
Ich werde keine ausführliche Anleitung zur Verwendung von Shader Graph schreiben. Wenn Sie völlig neu sind, lesen Sie zuerst die einführenden Anleitungen.
In jedem Fall benötigen wir zunächst einen regulären Panner, um den gewünschten Effekt zu erzielen. Hier ist es mit der Testtextur im Flugzeug:
Panner verschiebt UV-Koordinaten. Stellen Sie sicher, dass die Textur für den Wickelmodus auf Wiederholen eingestellt ist. In Shaderforge müssen Sie möglicherweise einen temporären Knoten mit dem Panner-Eingang verbinden, damit Amplify einige dieser Grundwerte bereits im Knoten selbst enthält.
Wir haben also eine bewegende Textur. Aber wir wollen diesen Effekt erzielen:
Und dafür ist es notwendig, dass es so rollt:
Wie Sie sehen können, ist die Struktur des Knotens dieselbe - Panner verschiebt einfach die UV-Koordinaten in die Richtungen U und V (oder X und Y). Um die gewünschte Schwenkrichtung zu erhalten, müssen wir ein benutzerdefiniertes Netz mit UV erstellen. Gif zur Klarheit:
Wenn Sie dasselbe Material auf ein anderes Netz anwenden, können Sie die Richtung der Textur im 3D-Raum steuern, wenn sie sich im UV-Raum bewegt.
Um den Effekt zu verstärken, fügen Sie einige weitere Polygone hinzu und verzerren Sie die UV-Strahlung, sodass sich die Textur in der Mitte schneller als entlang der Kanten bewegt. Und platzieren Sie die UV-Strahlung so, dass die Naht nicht sichtbar ist.
Daraus folgt eine wichtige Schlussfolgerung: Gute Effekte bestehen selten aus einem System und sind oft eine Kombination aus mehreren.
Wir haben eine Textur, die sich mit der richtigen Geschwindigkeit in die richtige Richtung bewegt. Der UV-Scan ist so positioniert, dass die Bewegung von rechts nach links im UV-Raum mit dem Panner zu einer Bewegung nach innen und außen im 3D-Raum führt. Damit das 3D-Modell keine Nähte in der Textur enthält, müssen Sie den UV-Scan (X-Hotkey zum Einrasten am Raster) vertikal an den Scheitelpunkten des Texturraums anheften. Als Ergebnis haben wir den gewünschten Effekt erzielt.
Jetzt Transparenz. Beginnen wir mit den grundlegenden Dingen. Viele einfache Berechnungen, die Sie im Shader durchführen, reichen von 0 (schwarz) bis 1 (weiß). Das heißt, 0,5 ist ein Grauton und 0,2 ist ein Dunkelgrau. Wenn Sie diese Werte anwenden (in diesem Fall auf den Deckkraftkanal des Hauptausgabeknotens), steuern Sie den Transparenzgrad des Materials. Beachten Sie, dass Sie diese Funktion zuerst aktivieren müssen. In Amplify können Sie die Art des Renderns (im Mischmodus) von undurchsichtig auf beispielsweise transparent ändern. In diesem Fall verwenden wir den Rendering-Typ Transparent Cutout. Das von diesem Material angezeigte Pixel ist entweder vollständig transparent oder vollständig undurchsichtig. Dies ist im obigen GIF zu sehen - dieser Shader zeigt keine "durchscheinenden" Pixel an.
Wir nehmen eine Verlaufstextur mit einem Schritt und platzieren sie im Shader. Hier wird eine Verbindung zum Albedo-Ausgang (Farbe) des Hauptknotens hergestellt.
Und hier ist es mit der Ausgabe der Deckkraftmaske verbunden (dieser Parameter ist aktiviert, wenn der Rendering-Typ Transparenter Ausschnitt ist).
Es ist ersichtlich, dass die Verlaufstextur Schwarz-Weiß-Pixelwerte verwendet, um Transparenz oder Opazität zu bestimmen. Alles von 1 (weiß) bis 0,5 (grau) wird undurchsichtig, und alles von 0,5 (grau) bis 1 (schwarz) wird vollständig transparent (oder überhaupt nicht angezeigt). Die Deckkraftmaske erstellt eine harte Linie und rundet die Werte auf 0 oder 1, je nachdem, welche Zahl näher liegt.
Eine weitere Graustufentextur:
Verbunden mit der Deckkraftmaske:
Du hast die Idee. Und Sie raten, wie es verwendet werden kann:
Im Shader-Diagramm wird im Grunde ein blaues Bild angezeigt. Und die Tatsache, dass ich nur den R (rot) Ausgang dieses Knotens verwende. Zur Optimierung habe ich zwei Graustufentexturen (Graustufentexturen) in eine Datei gepackt, dies ist jedoch nicht erforderlich. Ähnliche Bilder können mit Photoshop oder Substance Designer verpackt werden.
Der Welleneffekt ist ein guter Anfang, kann aber besser sein. Warum nicht zwei Graustufentexturen übereinander stapeln, um den Welleneffekt zufälliger zu gestalten?
Ich benutze die gleiche Textur, füge aber verschiedene Kanäle hinzu. Ich scrolle sie mit unterschiedlichen Geschwindigkeiten und ein wenig in verschiedene Richtungen. Die Textur hat einen guten Gradienten von Grauwerten, was einen Eindruck von zufälligen Welleneffekten vermittelt.
Beim nächsten GIF gibt es noch eine Sache, die wir noch nicht besprochen haben - daher sieht Ihre Version möglicherweise etwas anders aus:
Sie können beispielsweise sehen, dass ein Pixel mit einem Wert von 0,2 (das nicht rendert) über ein Pixel mit einem Wert von 0,4 (das ebenfalls nicht rendert) läuft und plötzlich zu einem Pixel mit einem Wert von 0,6 wird - da wir einen zusätzlichen Knoten (0,2) verwenden zu 0,4 und 0,6 hinzugefügt). Das Hinzufügen dieser beiden Wellen-Graustufentexturen übereinander mit unterschiedlichen Geschwindigkeiten ergibt einen nahezu gewünschten Effekt.
Um das Ergebnis zu demonstrieren, habe ich mir in Photoshop Graustufentexturen hinzugefügt.
Die Naht am Ende des Netzes ist jedoch immer noch deutlich. Und wir müssen das bekommen:
Stattdessen:
Beim ersten der beiden GIFs lassen die Wellen langsam nach und werden kleiner, wenn sie sich dem Rand des Gitters nähern. Der einfachste Weg, dies zu tun, ist die Verwendung der Scheitelpunktfarbe (Scheitelpunktfarbe).
Jeder Scheitelpunkt des Modells enthält seine eigenen Daten (z. B. X-, Y- und Z-Koordinaten) sowie eine Farbe mit einem Wert von 0 bis 1. Die Farbe der Scheitelpunkte kann auch im 3D-Editor festgelegt werden.
Die meisten äußeren Eckpunkte sind schwarz (dh sie haben den Wert 0). Sie werden weiß (näher an 1), wenn sie sich der Mitte nähern. Beachten Sie, dass Sie zusätzliche Unterteilungen benötigen, um Scheitelpunkte zu erhalten, die gefärbt werden können.
In Maya können Sie beispielsweise zum Färben das Menü Netzanzeige> Scheitelpunktfarbe malen auf das Feld Weitere Optionen klicken.
Jetzt können wir Vertex Color in unserem Shader mithilfe von Multiplizieren kombinieren.
Ich habe einen Farbverlauf über die verwendeten Texturen angewendet und den Ebenenmodus auf Multiplizieren eingestellt.
Der Farbverlauf erhöht den Grauwert auf 0 (schwarz), sodass das Rendern von Pixeln schwieriger wird (sie erscheinen nicht unter dem Wert von 0,5). Dies führt dazu, dass die Pulsationslinien näher an der Kante komprimiert werden (die Farben der Eckpunkte wirken hauptsächlich als Gradient).
Ich habe ein paar weitere Knoten hinzugefügt, um die Dicke der Welligkeitslinien zu steuern. Hier ist die vollständige Grafik:
Experimentieren Sie einfach mit der Geschwindigkeit / Richtung des Bildlaufs, passen Sie die Textur an und versuchen Sie, die Kacheln zu ändern, um den Effekt optimal zu nutzen.
Dies wird uns helfen, einen komplexeren Shader zu erstellen - einen Wasserfall. Wir werden im nächsten Teil über ihn sprechen.