Erstellen eines interaktiven Vertex-Effekts mit Shader Graph

Wir haben ein Beispiel für einen interaktiven Vertex-Verschiebungseffekt mit Shader Graph und der Lightweight Render Pipeline erstellt, um Ihnen zu helfen, diese Funktionen für die Gestaltung von Effekten zu nutzen. Dieser Beitrag führt Sie durch unseren Prozess. Holen Sie sich das Demoprojekt mit dem Shader Graph Shader, einer Beispielszene und einigen Beispielen aus dem 3D Game Kit und machen Sie mit!

Die Kugel im Videobeispiel unten hat einen Shader-basierten Verschiebungseffekt, der aktiviert wird, wenn wir die Leertaste drücken. In Ihrem Spiel würden Sie dies einem relevanten Spielereignis zuordnen. In diesem Artikel werden wir uns ansehen, wie man diesen Shader mit dem Shader Graph-Paket erstellt und den Auslöser für das Drücken der Leertaste integriert. Das Ziel ist es, Ihnen zu zeigen, wie Sie Effekte in Shader Graph entwerfen und mit ihnen von Ihren anderen C#-Skripten aus interagieren können. Das Demoprojekt enthält den Shader, das Skript, das den Shader steuert, ein vorkonfiguriertes LWRP-Asset (Lightweight Scriptable Render Pipeline) und eine Beispielszene, mit der Sie loslegen können. Wenn Sie dieses Tutorial lieber als Video statt als Text ansehen möchten, finden Sie es auf dem Unity YouTube-Kanal.

Zuerst wollen wir uns ansehen, wie man Shader Graph und die Lightweight Render Pipeline einrichtet. Öffnen Sie den Paketmanager und wählen Sie die Option Installieren für das Paket Lightweight RP. Dadurch wird automatisch die richtige Version von Shader Graph installiert.

Nach der Installation des Lightweight RP müssen wir ein neues Pipeline-Asset im Projekt erstellen. Wählen Sie Create->Rendering->Lightweight Render Pipeline Asset.

Dann können wir dieses Pipeline-Asset aktivieren, indem wir zu Bearbeiten->Projekteinstellungen->Grafik gehen und das LightweightRenderPipelineAsset in das Feld Skriptbare Render-Pipeline-Einstellungen ziehen. Wenn Sie mit den heruntergeladenen Assets arbeiten, ist dieser Schritt bereits für Sie erledigt.

Jetzt, wo die Lightweight Render Pipeline installiert ist, können wir uns an die Erstellung eines neuen Shader Graphen machen. Lassen Sie uns ein neues Diagramm in unserem Projekt erstellen, indem wir Create->Shader->PBR Graph wählen. Der PBR-Graph ermöglicht es uns, einen neuen Shader zu erstellen, der Eingaben von Unitys physikalisch basiertem Rendering-System erhält, so dass unser Shader Funktionen wie Schatten und Reflexionen nutzen kann. Nachdem wir diesen Shader erstellt haben, fügen wir ihn zu einem neuen Material hinzu und fügen das Material einer Kugel in unserer Beispielszene zu, indem wir das Material auf die Kugel ziehen und ablegen.

Um den Effekt zu erzielen, werden wir die Eckpunkte in unserem Netz entlang seiner Normalen verschieben, indem wir die Ausgabeposition im PBR-Master-Ausgangsknoten ändern. Wir verschieben, indem wir einen Add-Knoten an der Basisobjektposition jedes Scheitelpunkts verwenden. Durch Hinzufügen des Normalenvektors zur Basisobjektposition können wir sehen, dass alle Scheitelpunkte extrudiert werden, wodurch die Kugel größer erscheint. Um diese Verschiebung zu variieren, multiplizieren wir die Verschiebung des Normalvektors mit einem einfachen Rauschknoten halb zufällig.

Wenn wir auf Asset speichern klicken, können wir in der Szenenansicht sehen, dass die Kugel nun auf der Grundlage des einfachen Rauschens verschoben wurde.

Leider gibt es Nahtstellen in der Verschiebung, da das Simple Noise auf Basis des UV-Raums abgetastet wird. Um die Nähte durch die Verwendung des Objektraums für das einfache Rauschen anstelle des UV-Raums zu beheben, können wir einfach einen Positionsknoten hinzufügen, der auf Objekt eingestellt ist.

Um den Pulsationseffekt zu erzeugen, werden wir diese Positionsausgabe scrollen, indem wir sie zu einem Zeitknoten hinzufügen, bevor wir sie an den Simple Noise-Knoten senden. Wir können auch einen Multiplikator mit dem Knoten Zeit verwenden, um die Geschwindigkeit des Bildlaufs zu variieren.

Um unsere Verschiebung zu steuern, legen wir eine neue Shader-Eigenschaft in unserem Shader-Graphen fest. Mit den Shader-Eigenschaften können wir unserem Shader über Werte, die im Inspektor eingegeben werden, oder über unsere eigenen C#-Skripte, wie in diesem Fall, Eingaben zur Verfügung stellen. Wir erstellen eine neue Vector1-Eigenschaft mit dem Namen Amount und ändern die Referenz in _Amount. Das Referenzfeld ist der Name der Zeichenkette, über die wir die Verschiebung per Skript aufrufen und ändern werden. Wenn wir dies nicht ändern, wird ein automatisch generierter Wert verwendet. Wenn die Zeichenfolge nicht genau übereinstimmt, können wir unsere Eigenschaft nicht über das Skript ansprechen. Überprüfen Sie also, ob beide übereinstimmen, einschließlich der Großschreibung.

Wir verwenden diese Amount-Shader-Eigenschaft in einem Multiply-Knoten mit dem Simple Noise, bevor es mit dem Normalenvektor multipliziert wird. So können wir das Rauschen skalieren, bevor es auf die Scheitelpunktpositionen angewendet wird. Die Variable "Betrag" steuert, um wie viel wir jeden Scheitelpunkt im Netz verschieben.

Um diese Amount-Variable zu steuern, haben wir ein C#-Skript namens DisplacementControl erstellt und es an das DisplacementSphere GameObject angehängt. Dieses Skript steuert die Variable _Amount, indem es mit der Eigenschaft interagiert, die wir in unserem Material erstellt haben, das der Komponente MeshRenderer zugewiesen ist. Wir speichern einen Verweis auf die MeshRenderer-Komponente in der Variable meshRender und deklarieren eine neue Float-Variable displacementAmount.

Wir verwenden einen einfachen Lerp in der Funktion Update, um die Variable displacementAmount auf den Wert 0 zu interpolieren. Anschließend setzen wir die Shader-Variable _Amount auf den in der Variable displacementAmount gespeicherten Wert. Dadurch wird die _Amount-Variable des Shader-Graphen aktualisiert und im Laufe der Zeit auf 0 geglättet.

Wir verwenden die standardmäßige "Jump"-Eingabeachse von Unity (die standardmäßig der Leertaste zugewiesen ist), um den Wert von displacementAmount auf 1 zu setzen, wenn sie gedrückt wird.

Wenn wir nun in der Szene den Abspielmodus aufrufen, können wir sehen, dass displacementAmount durch Drücken der Leertaste auf den Wert 1 gesetzt wird und dann langsam wieder auf 0 interpoliert.

Um den einstellbaren Glüheffekt zu erzeugen, werden wir die Emission im PBR-Masterknoten ausgeben. Wir verwenden einen Voronoi-Rauschknoten und multiplizieren ihn mit einem Farbknoten. Dadurch wird der Glüheffekt ein wenig moduliert und es entstehen einige dunkle Flecken. Dann verwenden wir einen Lerp-Knoten mit einem anderen Color-Knoten als Basisfarbe und verwenden die Variable Amount in der T-Eingabe. Dies ermöglicht es uns, zwischen einem Basis-Farbknoten und dem Voronoi-Rausch-Farbknoten unter Verwendung der Variablen Amount zu mischen.

Dann werden wir das Glühen mit einem ähnlichen Aufbau wie zuvor verschieben. Wir verwenden einen Positionsknoten, der auf Objekt eingestellt ist, fügen ihn zu einem Zeitknoten hinzu und verbinden die Ausgabe mit dem UV-Slot unseres Voronoi-Rauschknotens.