Up to date

This page is up to date for Godot 4.2. If you still find outdated information, please open an issue.

Verwendung von VisualShaders

VisualShaders sind die visuelle Alternative zur Erstellung von Shadern.

Da Shader von Natur aus mit visuellen Effekten verknüpft sind, bietet der grafikbasierte Ansatz mit Vorschauen von Texturen, Materialien usw. im Vergleich zu rein skriptbasierten Shadern eine Menge zusätzlichen Komfort. Andererseits stellen VisualShader nicht alle Funktionen des Shader-Skripts zur Verfügung, und für bestimmte Effekte kann es notwendig sein, beide parallel zu verwenden.

Bemerkung

Wenn Sie mit Shadern nicht vertraut sind, lesen Sie zunächst Einführung in Shader.

Erstellen eines VisualShaders

VisualShader können in jedem ShaderMaterial erstellt werden. Um VisualShader zu benutzen, erstellen Sie ein neues ShaderMaterial in einem Objekt Ihrer Wahl.

../../_images/shader_material_create_mesh.png

Weisen Sie dann der Property Shader eine Ressource VisualShader zu.

../../_images/visual_shader_create.webp

Klicken Sie auf die neue Shader-Ressource und der Dialog Shader Erzeugen wird automatisch geöffnet. Ändern Sie in der Dropdown-Liste die Option "Typ" in "VisualShader".

../../_images/visual_shader_create2.webp

Das Layout des Visual Shader-Editors besteht aus zwei Teilen: der oberen Symbolleiste und dem Diagramm selbst.

../../_images/visual_shader_editor2.png

Von links nach rechts in der Toolbar:

  • Der Add Node-Button zeigt ein Popup-Menü an, mit dem Sie dem Shader-Graphen Nodes hinzufügen können.

  • Das Drop-Down-Menü ist der Shader-Typ: Vertex, Fragment und Licht. Wie bei Skript-Shadern definiert es, welche Built-in-Nodes verfügbar sein werden.

  • Die folgenden Buttons und die Zahleneingabe steuern die Zoomstufe, das Einrasten des Rasters und den Abstand zwischen den Rasterlinien (in Pixeln).

  • Das letzte Icon zeigt den generierten Shader-Code, der dem Graphen entspricht.

Bemerkung

Obwohl VisualShader kein Coding erfordern, teilen sie dieselbe Logik mit Skript-Shadern. Es wird empfohlen, die Grundlagen von beiden zu erlernen, um ein gutes Verständnis der Shading-Pipeline zu haben.

Der visuelle Shader-Graph wird im Hintergrund in einen Skript-Shader umgewandelt. Sie können diesen Code sehen, indem Sie den letzten Button in der Toolbar drücken. Dies kann praktisch sein, um zu verstehen, was ein bestimmter Node tut und wie man ihn in Skripten reproduzieren kann.

Verwendung des visuellen Shader-Editors

Standardmäßig wird jeder neue VisualShader einen Ausgangs-Node haben. Jede Nodeverbindung endet an einem der Socket des Ausgangsnodes. Ein Node ist die Basiseinheit zur Erstellung eines Shaders. Um ein neuen Node hinzuzufügen, klicken Sie auf den Add Node-Button in der oberen linken Ecke oder klicken mit der rechten Maustaste auf eine beliebige leere Stelle im Graphen und ein Menü öffnet sich.

../../_images/vs_popup.png

Das Popup zeigt die folgenden Propertys an:

  • Wenn Sie mit der rechten Maustaste auf den Graphen klicken, wird dieses Menü an der Cursorposition aufgerufen und das erzeugte Node wird in diesem Fall ebenfalls unter dieser Position platziert; andernfalls wird es in der Mitte des Graphen platziert.

  • Es kann horizontal und vertikal in der Größe verändert werden, so dass mehr Inhalte angezeigt werden können. Die Größentransformation und die Position des Bauminhalts werden zwischen den Aufrufen gespeichert. Wenn also das Popup plötzlich geschlossen wird, kann man den vorherigen Zustand leicht wiederherstellen.

  • Die Optionen Alles Ausklappen und Alles Einklappen im Drop-Down-Menü können verwendet werden, um die verfügbaren Nodes einfach aufzulisten.

  • Sie können auch Nodes aus dem Popup auf den Graphen ziehen.

Obwohl im Popup Nodes in Kategorien sortiert sind, kann dies auf den ersten Blick überwältigend erscheinen. Versuchen Sie einige der Nodes hinzuzufügen, stecken diese in den Ausgangssocket und beobachten, was passiert.

Wenn ein beliebiger scalar-Ausgang mit einem vector-Eingang verbunden wird, nehmen alle Komponenten des Vektors den Wert des Skalars an.

Wenn ein beliebiger vector-Ausgang mit einem scalar-Eingang verbunden wird, ist der Wert des Skalars der Mittelwert der Komponenten des Vektors.

Node-Interface von Visuellen Shadern

Visuelle Shader-Nodes haben Eingangs- und Ausgangs-Ports. Die Eingabe-Ports befinden sich auf der linken Seite des Nodes, die Ausgabe-Ports auf der rechten Seite des Nodes.

../../_images/vs_node.webp

Diese Ports sind farblich gekennzeichnet, um den Typ des Ports zu unterscheiden:

Port-Typen

Typ

Farbe

Beschreibung

Beispiel

Skalar

Türkis

Skalar ist ein einzelner Wert.

scalar

Vektor

Violett

Ein Vektor ist eine Menge von Werten.

vector

Boolean

Blau

Ein oder aus, wahr oder falsch.

boolean

Transformation

Orange

Eine Matrix, wird in der Regel zur Transformation von Vertices verwendet.

transform

Sampler

Gelb

Ein Textur-Sampler. Er kann verwendet werden, um Texturen abzutasten.

sampler

Alle Typen werden bei den Berechnungen von Vertices, Fragmenten und Lichtern im Shader verwendet. Zum Beispiel: Matrixmultiplikation, Vektoraddition oder Skalardivision.

Es gibt noch andere Arten, aber das sind die wichtigsten.

Visual Shader-Nodes

Nachfolgend sind einige spezielle Nodes aufgeführt, die wissenswert sind. Die Liste ist nicht erschöpfend und kann mit weiteren Nodes und Beispielen erweitert werden.

Expression-Node

Der Expression-Node erlaubt es Ihnen, Godot Shading Language (GLSL-ähnliche)-Ausdrücke in Ihre Visual Shader zu schreiben. Der Node verfügt über Buttons, mit denen Sie eine beliebige Anzahl von Ein- und Ausgabe-Ports hinzufügen können, und kann in der Größe verändert werden. Sie können auch den Namen und den Typ jedes Ports festlegen. Der von Ihnen eingegebene Ausdruck wird sofort auf das Material angewendet (sobald der Fokus das Textfeld des Ausdrucks verlässt). Alle Parsing- oder Kompilierungsfehler werden auf dem Ausgabe-Tab ausgegeben. Die Ausgänge werden standardmäßig mit dem Wert Null initialisiert. Der Node befindet sich auf dem Spezial-Tab und kann in allen Shader-Modi verwendet werden.

../../_images/vs_expression.gif

Die Möglichkeiten dieses Nodes sind fast grenzenlos - Sie können komplexe Prozeduren schreiben und alle Möglichkeiten textbasierter Shader nutzen, wie z.B. Schleifen, das Schlüsselwort discard, erweiterte Typen, etc. Zum Beispiel:

../../_images/vs_expression2.png

Fresnel-Node

Der Fresnel -Node ist so ausgelegt, dass er Normal- und Ansichtsvektoren akzeptiert und einen Skalar erzeugt, der das gesättigte Skalarprodukt zwischen ihnen ist. Zusätzlich können Sie die Inversion und die Potenz der Gleichung einstellen. Der Fresnel-Node eignet sich hervorragend, um Objekten einen randartigen Lichteffekt zu verleihen.

../../_images/vs_fresnel.png

Boolescher Node

Der Boolean-Node kann in Scalar oder Vector umgewandelt werden, um 0 oder 1 und (0, 0, 0) bzw. (1, 1, 1) zu repräsentieren. Diese Property kann verwendet werden, um einige Effektteile mit einem Klick zu aktivieren oder zu deaktivieren.

../../_images/vs_boolean.gif

If-Node

Der If-Node erlaubt es Ihnen, einen Vektor zu definieren, der das Ergebnis des Vergleichs zwischen a und b zurückgibt. Es gibt drei Vektoren, die zurückgegeben werden können: a == b (in diesem Fall wird der Toleranzparameter als Vergleichsschwelle angegeben - standardmäßig ist er gleich dem Minimalwert, d.h. 0.00001), a > b und a < b.

../../_images/vs_if.png

Switch-Node

Der Switch-Node gibt einen Vektor zurück, wenn die boolesche Bedingung true oder false ist. Boolean wurde oben eingeführt. Wenn Sie einen Vektor in einen booleschen true-Wert umwandeln, sollten alle Komponenten des Vektors über Null liegen.

../../_images/vs_switch.png