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.webp

Then assign a Shader resource to the Shader property.

Click on the new Shader resource and the Create Shader dialog will open automatically. Change the Type option to VisualShader in the dropdown, then give it a name.

../../_images/visual_shader_create2.webp

Click on the visual shader you just created to open the Shader Editor. The layout of the Shader Editor comprises four parts, a file list on the right, the upper toolbar, the graph itself, and a material preview on the right that can be toggled off

../../_images/visual_shader_editor2.webp

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).
The toggle controls if the graph minimap in the bottom right of the editor is visible or not.
The automatically arrange selected nodes button will try to organize any nodes you have selected as efficiently and cleanly as possible.
The Manage Varyings button opens a dropdown that lets you add or remove a varying.
The show generated code button shows shader code corresponding to your graph.
The last icon toggles the material preview on or off.

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.

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.

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

Port-Typen
Typ	Farbe	Beschreibung
Skalar	Gray	Skalar ist ein einzelner Wert.
Vektor	Violett	Ein Vektor ist eine Menge von Werten.
Boolean	Green	Ein oder aus, wahr oder falsch.
Transformation	Pink	Eine Matrix, wird in der Regel zur Transformation von Vertices verwendet.
Sampler	Orange	Ein Textur-Sampler. Er kann verwendet werden, um Texturen abzutasten.

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.

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:

Reroute node

The Reroute node is used purely for organizational purposes. In a complicated shader with many nodes you may find that the paths between nodes can make things hard to read. Reroute, as its name suggests, allows you to adjust the path between nodes to make things easier to read. You can even have multiple reroute nodes for a single path, which can be used to make right angles.

To move a reroute node move your mouse cursor above it, and grab the handle that appears.

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.

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.

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.

Switch-Node

The Switch node returns a vector if the boolean condition is true or false. Boolean was introduced above. If you want to convert a vector to a true boolean, all components of the vector should be non-zero.

Mesh Emitter

The Mesh Emitter node is used for emitting particles from mesh vertices. This is only available for shaders that are in Particles mode.

Keep in mind that not all 3D objects are mesh files. a glTF file can't be dragged and dropped into the graph. However, you can create an inherited scene from it, save the mesh in that scene as it's own file, and use that.

You can also drag and drop obj files into the graph editor to add the node for that specific mesh, other mesh files will not work for this.