Grundlagen zu Unity Shader-Diagrammen

Ein Shader ist ein kleines Programm, das Anweisungen für die GPU enthält. Es wird beschrieben, wie Sie die Bildschirmfarbe für ein bestimmtes Material berechnen.

Obwohl Unity einen Standard-Shader hat, müssen Sie manchmal einen Effekt implementieren, den ein Standard-Shader nicht kann.

Bisher waren hierfür Kenntnisse einer bestimmten Shader-Sprache wie Cg oder HLSL erforderlich, und die darin enthaltenen Ansätze unterscheiden sich geringfügig von der üblichen Erstellung von Gameplay-Skripten. Für viele Menschen ist das Schreiben von Shadern ein unbeliebter Aspekt der Spieleentwicklung, da eine zusätzliche Lernkurve erforderlich ist.

Unity hat Shader Graph eingeführt , mit dem es einfacher ist, Shader ohne Code zu schreiben. Das Beste ist, dass Sie mit Shader Graph mit einer visuellen interaktiven Oberfläche arbeiten können.

In diesem Tutorial erstellen Sie Ihren ersten Unity-Shader!

An die Arbeit gehen

In diesem Tutorial wird Unity Version 2019.1 oder höher verwendet. Laden Sie hier die neue Version von Unity herunter.

Hinweis : Obwohl dieses Tutorial für Anfänger in Shader Graph gedacht ist, wird davon ausgegangen, dass Sie die Grundlagen der Entwicklung in Unity kennen und die Oberfläche der Engine beherrschen. Wenn Sie Unity noch nicht kennen, lesen Sie das hervorragende Tutorial Erste Schritte in Unity .

Laden Sie hier das Tutorial-Material herunter. Entpacken Sie dann den Inhalt und öffnen Sie Intro to Shader Graph Starter in Unity.

Der RW- Ordner im Projektfenster ist wie folgt organisiert:

• Schriften : In der Szene verwendete Schriften.
• Materialien : Materialien für die Szene.
• Modelle : 3D-Netze für Spielformen und Hintergründe.
• PostFX : Nachbearbeitungseffekte für das Rendern von Szenen.
• Fertigteile : verschiedene vorgefertigte Komponenten.
• Szenen : Spielszene.
• Skripte : Skripte mit Spielelogik.
• Shader : Shader-Diagramme, die für dieses Tutorial erstellt wurden.
• Sprites : Ein Sprite, der als Teil der Anleitung verwendet wird.
• Texturen : Texturkarten für Spielformen und Hintergründe.

Laden Sie nun die TangramPuzzle- Szene aus dem Ordner Szenen .


Dies ist ein einfaches Spiel namens Tangram , das im 19. Jahrhundert in China auftauchte. Die Aufgabe des Spielers besteht darin, sieben flache geometrische Formen zu verschieben und sie zu stilisierten Piktogrammen oder Silhouetten zu machen.

Starten Sie den Play- Modus im Editor und testen Sie die Demo-Spiele.

Sie können auf die Formen klicken und sie ziehen. Verwenden Sie die Richtungstasten, um Formen zu drehen. Drehen und verschieben Sie die Formen so, dass sie sich nicht überlappen.

Können Sie herausfinden, wie Sie die sieben Formen verschieben, um solche Muster zu erstellen?


Aus technischer Sicht funktioniert das Spiel also, aber es gibt kein visuelles Feedback zu der ausgewählten Figur.

Was ist, wenn wir die Form zum Leuchten bringen können, wenn sich eine Maus darüber befindet? Dies verbessert die Benutzeroberfläche.


Und dies ist eine großartige Gelegenheit, die Fähigkeiten von Shader Graph zu demonstrieren!

Überprüfen der Pipeline-Parameter für Shader Graph

Shader Graph funktioniert nur mit der relativ neuen skriptfähigen Render-Pipeline , d. H. Mit der High-Definition-Render-Pipeline oder mit der Lightweight-Render-Pipeline .

Wählen Sie beim Erstellen eines neuen Projekts für die Arbeit mit Shader Graph die richtige Vorlage aus.


Das Beispielprojekt ist bereits für die Arbeit mit der Lightweight-Render-Pipeline konfiguriert. Vergewissern Sie sich zunächst in PackageManager, dass Lightweight RP und ShaderGraph installiert sind, indem Sie Fenster ► PackageManager auswählen .

Wählen Sie dann eine der verfügbaren Versionen aus und klicken Sie bei Bedarf auf die Schaltfläche Aktualisieren auf . In der Regel ist die neueste verifizierte Version die beste Option.


Überprüfen Sie nach dem Aktualisieren der Pakete sorgfältig die Richtigkeit der Pipeline-Parameter unter Bearbeiten ► Projekteinstellungen .

Auf der Registerkarte Graphics sollte der Parameter Scriptable Render Pipeline Settings auf LWRP-HighQuality festgelegt sein . Dank dessen verwendet das Projekt die höchste Standardeinstellung für die Lightweight-Render-Pipeline.

Schließen Sie dieses Fenster, nachdem Sie sichergestellt haben, dass Sie eines der Skript-fähigen Render-Pipeline-Elemente verwenden .

PBR-Diagramm erstellen

Beim Rendern eines 3D-Netzes auf dem Bildschirm arbeiten Material und Shader immer zusammen. Daher benötigen wir vor dem Erstellen eines Shaders Material.

Klicken Sie zunächst im Projektfenster auf die Schaltfläche Erstellen , um ein neues Material im Ordner RW / Materials zu erstellen . Wählen Sie Erstellen ► Material und benennen Sie es in Glow_Mat um .

Erstellen Sie dann im Ordner RW / Shader ein PBR-Diagramm, indem Sie Erstellen ► Shader ► PBR-Diagramm wählen. Dies ist ein Shader-Diagramm, das physikalisch genaues Rendern oder PBR unterstützt.

Nennen Sie es HighlightShaderGraph .


Bisher verwendet Material Glow_Mat einen Standard-Shader für LightweightRenderPipeline mit dem Namen LightweightRenderPipeline / Lit.


Ändern Sie es in das neu erstellte neue Shader-Diagramm. Klicken Sie bei ausgewähltem Glow_Mat oben im Inspektor auf das Dropdown-Menü Shader und wählen Sie Shader-Grafiken ► HighlightShaderGraph .

Glow_Mat nimmt einen etwas helleren Grauton an, bleibt aber ansonsten ziemlich langweilig. Keine Sorge, wir werden es bald beheben.

Doppelklicken Sie nun auf das HighlightShaderGraph- Asset oder klicken Sie im Inspektor auf den Open Shader Editor . Dies öffnet das Shader Graph- Fenster.


Schauen Sie sich die Hauptteile dieser Schnittstelle an:

• Der Hauptarbeitsbereich ist ein dunkelgrauer Bereich, in dem die Grafikoperationen gespeichert werden. Sie können mit der rechten Maustaste auf den Arbeitsbereich klicken, um das Kontextmenü zu öffnen.
• Ein Knoten ist ein einzelnes Element eines Diagramms. Jeder Knoten hat abhängig von seinen Ports eine Eingabe, eine Ausgabe oder eine Operation. Knoten werden über Kanten miteinander verbunden .
• Masterknoten ist der letzte Ausgabeknoten des Graphen. In diesem Beispiel verwenden wir eine physikalisch genaue Rendering-Option, die auch als PBR-Master-Knoten bezeichnet wird. Möglicherweise stellen Sie darin bestimmte Eigenschaften fest, z. B. Albedo, Normal, Emission und Metallic, die im Standard-Shader verwendet werden.
• Mit Blackboard können Sie im Inspector auf bestimmte Teile des Diagramms zugreifen. Auf diese Weise kann der Benutzer Parameter konfigurieren, ohne das Diagramm selbst direkt bearbeiten zu müssen.
• Die Hauptvorschau zeigt die aktuelle Ausgabe des Shaders interaktiv als Kugel an.

Durch Verbinden der verschiedenen Knoten können Sie ein Shader-Diagramm erstellen, das von Unity kompiliert und an die GPU übertragen wird.

Erstellen eines Farbknotens

Lassen Sie uns zuerst dem Shader eine Grundfarbe geben. Verbinden Sie dazu den Farbknoten mit der Albedo-Komponente des PBR-Master-Knotens. Klicken Sie mit der rechten Maustaste auf den Arbeitsbereich, um den ersten Knoten aus dem Kontextmenü zu erstellen, indem Sie Knoten erstellen ► Eingabe ► Basis ► Farbe wählen.


Beachten Sie, dass das Menü "Knoten erstellen" Hunderte von Knoten enthält! Zunächst scheint es verwirrend, aber Sie werden bald die am aktivsten verwendeten herausfinden.

Ziehen Sie anschließend den Knoten über den Arbeitsbereich und halten Sie ihn an der Titelleiste. Lassen Sie es dann links neben dem PBR-Master- Knoten.

Mit dem Farbknoten können Sie eine einzelne Farbe angeben. Klicken Sie auf das Farbfeld und wählen Sie einen schönen Rotton aus, z. B. R: 128, G: 5, B: 5 .

Ziehen Sie zum Ausgeben der Farbe an den PBR- Masterknoten den Ausgangsanschluss auf den Albedo- Anschluss, der die Grundfarbe des Shaders angibt.

Wenn Sie die Knoten kantenweise verbinden, sollten Sie sehen, wie die Kugel in der Hauptvorschau rot wird.


Großartig! Beim Schreiben von Shadern ist das Erstellen eines einfarbigen Shaders ein Analogon zu Hello, world!

Du magst das zwar noch nicht verstehen, aber du hast gerade deinen ersten Shader erstellt!

Arbeite mit der Schnittstelle

Obwohl das Diagramm nur wenige Knoten enthält, ist jetzt der beste Zeitpunkt, um sich mit der Shader Graph-Oberfläche vertraut zu machen.

Ziehen Sie die Knoten und stellen Sie fest, dass die Kanten zwischen dem Farbausgabeport und dem PBR-Master- Eingabeport verbunden bleiben.

Knoten können verschiedene Arten von Daten enthalten. So wie wir einen Knoten erstellt haben, der eine einzelne Eingabefarbe enthält, können wir einen Knoten erstellen, der eine einzelne Zahl darstellt. Wählen Sie Knoten erstellen ► Eingabe ► Grundlegend ► Ganzzahl . Wir werden mit diesem Knoten nichts anfangen, er wird nur zur Veranschaulichung des Prinzips benötigt.


Verbinden Sie den Integer Out- Port mit dem Alpha- Port des PBR Master- Knotens.

Unser Diagramm ist immer noch sehr klein, aber wir haben bereits genügend Knoten, um die Aktion der Tastenkombinationen zu überprüfen. Wählen Sie ein Knotenpaar aus und drücken Sie die folgenden Tasten:

• F : Rahmen die ausgewählten Knoten.
• A : Rahmen Sie das gesamte Diagramm ein.

Sie können auch die Schaltflächen oben im Fenster verwenden, um zwischen der Hauptvorschau und der Tafel zu wechseln. Mit der Schaltfläche In Projekt anzeigen können Sie das aktuelle Shader-Diagramm im Projektfenster suchen.

Nachdem wir uns mit der Verwaltung des Diagramms befasst haben, bereinigen wir es. Alles was wir brauchen sind die Color und PBR Master Nodes.

Klicken Sie mit der rechten Maustaste auf die Verbindung zwischen den Knoten Integer und Master , und wählen Sie dann Löschen aus . Dadurch wird der Knoten vom Diagramm getrennt.


Ebenso können Sie den Ganzzahlknoten vollständig löschen. Klicken Sie mit der rechten Maustaste auf den Knoten und wählen Sie Löschen .


Wenn Sie fertig sind, klicken Sie auf die Schaltfläche Asset speichern in der oberen linken Ecke der Benutzeroberfläche. Unity speichert alle Änderungen und kompiliert und aktiviert den Shader. Dieser Schritt sollte jedes Mal ausgeführt werden, wenn Sie die neuesten Änderungen im Editor anzeigen möchten.

Kehren Sie nun zum Fenster zurück und wählen Sie das Material Glow_Mat aus.


Während sich der Shader auf das Material erstreckt, sollte die Kugel im Vorschaufenster des Inspektors rot werden.

Ziehen Sie nun das Glow_Mat- Material auf die Tangramformen im Szenenfenster .


Wie erwartet, hat das Material mit dem Shader das Netz in einer schönen, gleichmäßigen roten Farbe gestrichen.

Fügen Sie einen Glüheneffekt hinzu

Wenn das Glow_Mat-Material mysteriöser leuchten soll, müssen Sie das Shader-Diagramm erneut bearbeiten.

Jetzt wird die Farbausgabe an den Eingang des Albedo PBR Master- Knotens übertragen.

Sie können auch eine andere Kante von Out zu Emission ziehen . Jetzt wird dieselbe Farbe zweimal verwendet: sowohl als Grundfarbe als auch als Farbe der Strahlung.


Ausgangsports können mehrere Kanten haben, und Eingangsports können nur eine haben.

Schalten Sie nun das Dropdown-Menü Modus des Knotens Farbe in den HDR- Modus. Wir werden also den erweiterten Dynamikumfang der Farben einbeziehen.


Ändern Sie nun das Farbfeld. Im HDR-Modus wurde eine zusätzliche Intensitätsoption angezeigt. Klicken Sie mehrmals auf +1 in der unteren Palette oder ziehen Sie den Schieberegler um 2,5 . Speichern Sie nun die Änderungen und kehren Sie zum Editor zurück.


Im Editor leuchtet die Figur in leuchtendem Orange. Die Nachbearbeitung in der Szene ist bereits aktiviert und verbessert die Farbe des erweiterten Dynamikbereichs.

Wählen Sie nun das Spielobjekt PostProcessing in der Hierarchie aus. Das Leuchten ist auf den Bloom- Effekt zurückzuführen.

Öffnen Sie die Bloom- Optionen und stellen Sie die Intensität (Leuchtkraft) und den Schwellenwert (den Schwellenwert für den Beginn des Glühens) ein. Das Beispiel zeigt die Werte 3 und 2 .


Wow, dieser Glanz!

Hervorhebungsskript erstellen

Wir wollen nicht, dass die Figur ständig leuchtet. Wir brauchen das Leuchten nur abhängig von der Position der Maus einzuschalten.

Wenn sich der Mauszeiger über der Form befindet, müssen wir das Material Glow_Mat aktivieren. In anderen Fällen sollte die Abbildung mit dem Standardmaterial Wood_Mat angezeigt werden.

Erstellen Sie zunächst ein neues C # -Skript in RW / Scripts und nennen Sie es Textmarker . Er wird uns helfen, während der Ausführung des Programms zwischen den beiden Materialien zu wechseln. Ersetzen Sie alle Zeilen im Skript durch den folgenden Code:

using UnityEngine; // 1 [RequireComponent(typeof(MeshRenderer))] [RequireComponent(typeof(Collider))] public class Highlighter : MonoBehaviour { // 2 // reference to MeshRenderer component private MeshRenderer meshRenderer; [SerializeField] private Material originalMaterial; [SerializeField] private Material highlightedMaterial; void Start() { // 3 // cache a reference to the MeshRenderer meshRenderer = GetComponent<MeshRenderer>(); // 4 // use non-highlighted material by default EnableHighlight(false); } // toggle betweeen the original and highlighted materials public void EnableHighlight(bool onOff) { // 5 if (meshRenderer != null && originalMaterial != null && highlightedMaterial != null) { // 6 meshRenderer.material = onOff ? highlightedMaterial : originalMaterial; } } } 

Analysieren wir dieses Skript:

1. Das Skript kann nur auf ein Objekt angewendet werden, das die Komponenten MeshRenderer und Collider . Dies wird gesteuert, indem die Attribute [RequireComponent] am oberen [RequireComponent] des Skripts hinzugefügt werden.
2. Dies sind Links zu MeshRenderer , originalMaterial und highlightedMaterial . Materialien sind mit dem Attribut [SerializeField] gekennzeichnet, mit dem Sie sie im Inspektor zuweisen können.
3. Bei der Start Methode MeshRenderer wir den MeshRenderer automatisch mit GetComponent .
4. Aufgerufenes EnableHighlight(false) . Dadurch wird sichergestellt, dass standardmäßig nicht hervorgehobene Inhalte angezeigt werden. Im Folgenden finden Sie die öffentliche EnableHighlight Methode, mit der das Renderer-Material umgeschaltet wird. Es empfängt den booleschen Parameter onOff , der den Status der Hintergrundbeleuchtung festlegt.
5. Verhindern aller NullReference-Fehler
6. Um Platz zu sparen, verwenden wir den ternären Operator.

Mausereignisse hinzufügen

Da dieses Skript für Formen mit einem MeshCollider , können wir die integrierten Methoden OnMouseOver und OnMouseOver . Fügen Sie nach der EnableHighlight Methode den folgenden Code EnableHighlight :

  private void OnMouseOver() { EnableHighlight(true); } private void OnMouseExit() { EnableHighlight(false); } 

Wenn sich die Maus über der Form befindet, wird EnableHighlight(true) . Ebenso wird EnableHighlight(false) , wenn die Maus Collider verlässt.

Das ist alles! Speichern Sie das Skript.

Abbildung Highlight

Wenn Sie in den vorherigen Abschnitten des Tutorials Glow_Mat auf eine der Figuren angewendet haben, müssen Sie im Editor Wood_Mat-Material an alle Spielfiguren zurückgeben. Um das Leuchten einzuschalten, verwenden wir jetzt Highlighter, während das Programm ausgeführt wird.

Zunächst werden sieben Objekte im Transformations- Tangram ausgewählt , die separate Formen sind. Dann fügen wir ihnen das gesamte Highlighter Skript gleichzeitig hinzu.


Ziehen Sie dann Wood_Mat in das Feld Originalmaterial und Glow_Mat in das Feld Hervorgehobenes Material . Rufe nun den Play- Modus auf und überprüfe das Ergebnis unserer Arbeit.

Nicht schlecht! Wenn Sie den Mauszeiger über die Tangramform halten, beginnt sie hellrot zu leuchten. Wenn Sie den Cursor entfernen, wird der ursprüngliche Zustand wiederhergestellt.


Im Spiel selbst hat sich nichts geändert, aber der Hervorhebungseffekt fügte visuelles Interesse hinzu und ermöglicht dem Spieler, sich zu konzentrieren.

Texturknoten verwenden

Im Moment hat unser einfacher Shader eine feste leuchtend rote Farbe. Wir werden den Shader so ändern, dass er nicht seine ursprüngliche Holzstruktur verliert. Dazu lassen wir die Hintergrundbeleuchtung als leuchtende Kante um die Oberfläche erscheinen.

Ändern Sie zunächst den HighlightShaderGraph, indem Sie darauf doppelklicken oder ihn auswählen
im Open Shader Editor .

Löschen Sie den Farbknoten , indem Sie mit der rechten Maustaste darauf klicken und Löschen auswählen. Wir werden alles von Grund auf neu erstellen.

Anstelle einer einzelnen Farbe ersetzen wir die Textur mit dem 2D- Knoten Beispieltextur.

Erstellen Sie einen Knoten entweder über das Kontextmenü, indem Sie mit der rechten Maustaste darauf klicken und " Knoten erstellen" auswählen, oder indem Sie eine Tastenkombination (Leerzeichen) verwenden. Wählen Sie Eingabe ► Textur ► Beispieltextur 2D .

Der 2D- Knoten Sample Texture liest Farbinformationen aus einem Textur-Asset und gibt seine RGB-Werte aus.

Wählen Sie eine Textur aus dem Textur- Eingabeport aus. Klicken Sie auf den Punkt neben dem leeren Feld, um den Dateibrowser zu öffnen.

Wählen Sie das WoodAlbedo-Texturelement aus.


Verbinden Sie den RGBA- Ausgangsport des Sample Texture 2D- Knotens mit dem PBR Master Albedo- Port.

Voila! Jetzt wird die Textur des Baumes auf der Oberfläche der Vorschau angezeigt.


Wenn Sie eine normale Karte hinzufügen, können Sie Teile auf der Oberfläche erstellen. Erstellen Sie zunächst einen weiteren Beispieltextur-2D- Knoten, indem Sie Knoten erstellen ► Eingabe ► Textur ► Beispieltextur 2D wählen.

Wählen Sie eine WoodNormal- Textur im Textur-Eingabeport aus.


Ändern Sie das Dropdown-Menü Typ von Standard in Normal .

Ausgabe der RGBA- Werte an den Normal- Port des PBR-Master- Knotens.


Der Umfang der Hauptvorschau sollte nun gröber aussehen. Die normale Karte ahmt kleine Unregelmäßigkeiten und Vertiefungen auf der Oberfläche nach. Auf diese Weise können Sie das Erscheinungsbild eines Baums simulieren.

Hinweis : Der Datentyp jedes Ports ist in Klammern neben dem Port angegeben. (T2) bedeutet, dass der Port mit zweidimensionaler Textur kompatibel ist, und (4) bedeutet, dass der Port Vector4 verwendet . Je nach Kontext ignoriert das Shader-Diagramm möglicherweise zusätzliche Gleitkommawerte.

Hinzufügen des Fresnel-Effekts

Nachdem sich die durchgehende rote Farbe in der Basistextur und der normalen Karte geändert hat, können Sie mit einer anderen Methode einen Hervorhebungseffekt hinzufügen.

Anstelle eines gleichmäßigen Glühens des gesamten Objekts beschränken wir das Glühen nur auf seine Kanten. Dies kann mit dem Fresnel-Effekt realisiert werden.

Erstellen Sie einen neuen Knoten, indem Sie mit der rechten Maustaste oder mit der Leertaste klicken und dann Knoten erstellen ► Mathematik ► Vektor ► Fresnel-Effekt auswählen.

Dieser neue Knoten zeigt eine Kugel mit einem weißen Strahlungsring im Durchmesser. Sie können die Breite dieses Lichthofs über den Stromeingang anpassen. Klicken Sie auf das X und ziehen Sie es links neben das Feld oder geben Sie die gewünschten Zahlen ein.

Je größer der Wert, desto dünner wird der Lichthof, und je kleiner der Wert, desto breiter wird er. Mit dem Wert 4 können Sie ein dezentes Leuchten um die Kante erzeugen.


Um diesen Lichthof auf das Material zu übertragen, verbinden wir den Fresnel-Effekt- Ausgang mit dem Emission- Eingang des PBR-Master- Knotens.


Jetzt zeigt MainPreview eine Holzkugel mit einem strahlend weißen Lichtschein , der dank des Fresnel-Effekts erhalten wurde .

Hinweis : Der Fresnel-Effekt ist nach dem französischen Physiker Augustin Jean Fresnel benannt. Er bemerkte, dass das Licht die Oberflächen sehr hell macht und wie ein Spiegel aussieht, wenn sich ein Betrachter einem Gleitwinkel nähert.

Sie können mit dem Küchentisch experimentieren. Wir verwenden die Unity-Version dieses Phänomens, um der Geometrie eine Ausstrahlung zu verleihen.

Multiplikation mit Farbe

Mit einfachen Farbberechnungen können Sie der Leuchtkontur Farben hinzufügen.

Erstellen Sie einen neuen Farbknoten, der die Farbe des Leuchtrings angibt. Klicken Sie mit der rechten Maustaste oder mit der Leertaste, um das Kontextmenü zu öffnen, und wählen Sie dann Knoten erstellen ► Eingabe ► Grundlegend ► Farbe . Schalten Sie den Farbmodus auf HDR .

Wählen Sie eine Farbe, die die Farbe der Hintergrundbeleuchtung angibt. Wählen Sie beispielsweise ein schönes helles Grün: R: 5, G: 255, B: 5 .

Erhöhen Sie die Intensität auf 3,5 .


Wir können die neue Farbe nicht mit dem Fresnel-Effekt kombinieren. weil es keine Eingabe für Farbe hat. Daher müssen wir die Ausgabe des Effekts mit der Ausgabe des Farbknotens kombinieren. Dies kann über den Multiplikationsknoten erfolgen .

Erstellen Sie einen Multiplikationsknoten , indem Sie mit der rechten Maustaste darauf klicken , und wählen Sie dann Knoten erstellen ► Mathematik ► Grundlegend ► Multiplizieren .

Löschen Sie die Kante zwischen dem Fresnel-Effekt und dem PBR-Master . Verbinden Sie den Fresnel-Effekt- Ausgang mit dem A- Eingang des Multiplikationsknotens .

Verbinden Sie den Out- Knoten des Color- Knotens mit dem Eingang B des Multiply- Knotens.


Verbinden Sie dann Out of the Multiply- Knoten mit dem Emission- Port des PBR-Master- Knotens. Voila! Jetzt sehen wir, wie die hellgrüne HDR-Farbe die Kugel der Hauptvorschau umgibt.


Denken Sie daran, dass Sie die Fresnel-Effektstärke verwenden können , um den Lichthof zu erhöhen oder zu verringern. Wenn Sie den Wert auf 1,5 reduzieren, erhalten Sie ein breites grünes Leuchten.

Für unser Spielbeispiel ist ein Wert von 4 bis 5 gut, aber Sie können mit Ihren Werten experimentieren.


Speichern Sie das Shader-Diagramm und kehren Sie zum Editor zurück. Sie werden Ihren HighlightShaderGraph sofort in Aktion sehen.

Starten Sie den Wiedergabemodus .

Wenn Sie den Mauszeiger über eine Form halten, bleibt die Baumstruktur erhalten. An den Rändern ist nun jedoch ein hellgrünes Leuchten zu sehen. Formal hat sich im Spiel nichts geändert, nur die Hintergrundbeleuchtung ist schwächer geworden.

Blackboard-Eigenschaften hinzufügen

Wenn Sie das Erscheinungsbild des Glüheffekts ändern möchten, müssen Sie zum Fenster des Shader-Diagramm-Editors zurückkehren und diese Änderungen vornehmen. Erweitern oder verengen Sie beispielsweise mit Fresnel Effect Power das Haloband.

Dies ist nicht sehr praktisch, wenn wir verschiedene Änderungen testen möchten. Glücklicherweise hat Shader Graph ein Konzept für Eigenschaften.

Sie können einen Teil des Diagramms im Inspektor öffentlich sichtbar machen, sodass Sie kleine Änderungen interaktiv vornehmen können. Dies erfolgt über die Blackboard- Oberfläche.

Kehren Sie zum Shader-Diagramm zurück und schalten Sie die Blackboard- Anzeige ein. Wenn es ausgeblendet ist, klicken Sie auf die Schaltfläche Tafel in der rechten oberen Ecke.

Hinzufügen von Grundtextur- und normalen Karteneigenschaften

Jetzt öffnen wir sowohl die Basistextur als auch die normale Karte, damit über den Inspektor darauf zugegriffen werden kann.

Klicken Sie auf das Symbol + in der rechten oberen Ecke der Tafel . Wählen Sie Textur 2D aus der Dropdown-Liste. Das Objekt sollte an der Tafel erscheinen . Benennen Sie es in BaseTexture um .


Stellen Sie sicher, dass das Kontrollkästchen " Offen" aktiviert ist. Wenn Sie eine Immobilie öffnen, wird sie im Inspektor öffentlich und zugänglich.


Um dem Diagramm eine Eigenschaft hinzuzufügen, ziehen Sie sie einfach an der Beschriftung in den Arbeitsbereich. Lassen Sie es irgendwo links vom 2D- Knoten Sample Texture .

Verbinden Sie den BaseTexture- Port mit dem Textur- Eingabeport des SampleTexture 2D- Knotens, der mit Albedo verbunden ist. Dadurch wird der vorherige Sollwert ersetzt.

Wiederholen Sie den gleichen Vorgang für die normale Karte . Klicken Sie auf das Symbol + und erstellen Sie eine neue Textur 2D . Benennen Sie es in Normal Map um .

Ziehen Sie die Eigenschaft in den Arbeitsbereich und hängen Sie sie an die Beispieltextur 2D für die normale Karte an.


Klicken Sie auf Asset speichern und kehren Sie zum Haupteditorfenster zurück.

Wählen Sie das Material Glow_Mat aus und sehen Sie zwei neue Felder im Inspektor: Basistextur und Normal Map .

Da für sie noch keine Textur festgelegt wurde, wird im Vorschaufenster eine grüne Markierung über der grauen Kugel angezeigt.


Wählen Sie WoodAlbedo und WoodNormal für BaseTexture und NormalMap .

Unter den leuchtenden Rändern wird nun die Textur des Baumes korrekt angezeigt.


Mit öffentlichen Eigenschaften kann der Benutzer Daten direkt in den Shader eingeben, ohne das Shader-Diagramm bearbeiten zu müssen. Experimentieren Sie auf eigene Faust mit einer Auswahl verschiedener Basistexturen und normaler Karten.

Eigenschaften hinzufügen Glow Size und Glow Color

Jetzt werden andere Arten von Eigenschaften in Blackboard angezeigt. Beispielsweise ist es nützlich, den Fresnel-Effektleistungswert ändern zu lassen.

Klicken Sie auf das Symbol + in Blackboard und erstellen Sie die Eigenschaft Vector1 . Es bezeichnet einen einzelnen Parameter vom Typ float.

Benennen Sie es in GlowSize um .

Sie können den für diese Eigenschaft eingegebenen Wertebereich einschränken, indem Sie ihn in einen Schieberegler umwandeln. Stellen Sie den Modus auf Slider und stellen Sie dann Min auf 0.05 und Max auf 6 ein , um einen Bereich festzulegen. Setzen Sie den Standardwert auf 5 .


Ziehen Sie die GlowSize- Eigenschaft in den Arbeitsbereich. Verbinden Sie den Ausgangsanschluss mit dem Fresnel Effect Power- Eingang.

Lassen Sie jetzt den Benutzer die Farbe des Glühens einstellen. Anstatt eine Eigenschaft in Blackboard zu erstellen, transformieren wir den vorhandenen Knoten im Diagramm.


Wählen Sie den Knoten Farbe , klicken Sie mit der rechten Maustaste und wählen Sie In Eigenschaft konvertieren .

Der Farbknoten wird in der Tafel in eine Farbeigenschaft konvertiert, die nicht mehr direkt im Diagramm geändert werden kann. Benennen Sie die Eigenschaft in GlowColor um .


Klicken Sie auf Asset speichern und kehren Sie zum Haupteditorfenster zurück.


Wählen Sie das Glow_Mat- Material im Projektfenster aus. Sie sollten sehen, dass der GlowSize- Schieberegler und das GlowColor- Feld jetzt im Inspektor verfügbar sind.


Ändern Sie die Materialwerte nach Ihrem Geschmack. Starten Sie den Play- Modus, um Ihre Arbeit zu testen.


Jetzt haben Sie eine anpassbare Hintergrundbeleuchtung, die Sie nach Belieben ändern können!

Wohin als nächstes?

Herzlichen Glückwunsch! Jetzt können Sie mithilfe des Shader-Diagramms Ihre eigenen Shader erstellen!

Wenn Sie Ihre eigenen kreativen Fähigkeiten einsetzen, werden Sie selbst überrascht sein, dass Sie Erfolg haben werden. Möchten Sie einen fantastischen Laserstrahl oder ein fantastisches Kraftfeld erzeugen? Passen Sie das Ergebnis unserer Arbeit an den Shader an, den Sie benötigen.

Obwohl es buchstäblich Hunderte von Knoten gibt, hätte dieses Tutorial Ihnen helfen sollen, Shader Graph zu lernen.