VisualShaders verwenden

So wie VisualScript eine Alternative für Nutzer ist, die einen grafischen Ansatz für die Codierung bevorzugen, sind VisualShader die visuelle Alternative zum Erstellen von Shadern.

As shaders are inherently linked to visuals, the graph-based approach with previews of textures, materials, etc. offers a lot of additional convenience compared to purely script-based shaders. On the other hand, VisualShaders do not expose all features of the shader script and using both in parallel might be necessary for specific effects.

Bemerkung

If you are not familiar with shaders, start by reading Introduction to shaders.

Erstellen eines VisualShader

VisualShaders can be created in any ShaderMaterial. To begin using VisualShaders, create a new ShaderMaterial in an object of your choice.

Weisen Sie dann der Eigenschaft Shader eine Ressource VisualShader zu.

Click on the new VisualShader resource and the Visual Shader Editor will open automatically. The layout of the Visual Shader Editor comprises two parts: the upper toolbar and the graph itself.

Von links nach rechts in der Werkzeugleiste:

• The Add Node button displays a popup menu to let you add nodes to the shader graph.

• Das Aufklappmenü ist der Shader-Typ: Vertex, Fragment und Licht. Wie bei Skript-Shadern definiert es, welche eingebauten Nodes verfügbar sein werden.

• Die folgenden Schaltflächen und die Zahleneingabe steuern die Zoomstufe, das Einrasten des Gitters und den Abstand zwischen den Gitterlinien (in Pixel).

• Das letzte Symbol zeigt den generierten Shader-Code, der dem Diagramm entspricht.

Bemerkung

Obwohl VisualShaders 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.

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

Verwendung des visuellen Shader-Editors

Standardmäßig wird jeder neue VisualShader ein Ausgabe-Node haben. Jede Nodeverbindung endet an einem der Socket des Ausgangsnodes. Ein Node ist die Basiseinheit zur Erstellung eines Shaders. Um ein neues Node hinzuzufügen, klicken Sie auf die Schaltfläche Add Node 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 Eigenschaften 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 Expand All und Collapse All im Aufklappmenü 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 ist, kann es 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.

Visual Shader Nodes

Nachfolgend sind einige spezielle Nodes aufgeführt, die wissenswert sind. Die Liste ist nicht ultimativ und könnte mit weiteren Nodes und Beispielen erweitert werden.

Expression-Node

The Expression node allows you to write Godot Shading Language (GLSL-like) expressions inside your visual shaders. The node has buttons to add any amount of required input and output ports and can be resized. You can also set up the name and type of each port. The expression you have entered will apply immediately to the material (once the focus leaves the expression text box). Any parsing or compilation errors will be printed to the Output tab. The outputs are initialized to their zero value by default. The node is located under the Special tab and can be used in all shader modes.

The possibilities of this node are almost limitless – you can write complex procedures, and use all the power of text-based shaders, such as loops, the discard keyword, extended types, etc. For example:

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

The Boolean node can be converted to Scalar or Vector to represent 0 or 1 and (0, 0, 0) or (1, 1, 1) respectively. This property can be used to enable or disable some effect parts with one click.

If-Node

The If node allows you to setup a vector which will be returned the result of the comparison between a and b. There are three vectors which can be returned: a == b (in that case the tolerance parameter is provided as a comparison threshold – by default it is equal to the minimal value, i.e. 0.00001), a > b and a < b.

Switch-Node

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

Bemerkung

The Switch node is only available on the GLES3 backed. If you are targeting GLES2 devices, you cannot use switch statements.