|
@@ -22,21 +22,23 @@ Creating a VisualShader
|
|
|
VisualShaders can be created in any :ref:`class_ShaderMaterial`. To begin using
|
|
|
VisualShaders, create a new ``ShaderMaterial`` in an object of your choice.
|
|
|
|
|
|
-.. image:: img/shader_material_create_mesh.png
|
|
|
+.. image:: img/shader_material_create_mesh.webp
|
|
|
|
|
|
-Then assign a :ref:`class_VisualShader` resource to the ``Shader`` property.
|
|
|
+Then assign a :ref:`class_Shader` resource to the ``Shader`` property.
|
|
|
|
|
|
.. image:: img/visual_shader_create.webp
|
|
|
|
|
|
Click on the new ``Shader`` resource and the Create Shader dialog will
|
|
|
-open automatically. Change the Type option to VisualShader in the dropdown.
|
|
|
+open automatically. Change the Type option to :ref:`class_VisualShader`
|
|
|
+in the dropdown, then give it a name.
|
|
|
|
|
|
.. image:: img/visual_shader_create2.webp
|
|
|
|
|
|
-The layout of the Visual Shader Editor comprises two parts:
|
|
|
+Click on the visual shader you just created to open the Shader Editor.
|
|
|
+The layout of the Shader Editor comprises two parts:
|
|
|
the upper toolbar and the graph itself.
|
|
|
|
|
|
-.. image:: img/visual_shader_editor2.png
|
|
|
+.. image:: img/visual_shader_editor2.webp
|
|
|
|
|
|
From left to right in the toolbar:
|
|
|
|
|
@@ -46,6 +48,12 @@ From left to right in the toolbar:
|
|
|
script shaders, it defines what built-in nodes will be available.
|
|
|
- The following buttons and number input control the zooming level, grid
|
|
|
snapping and distance between grid lines (in pixels).
|
|
|
+- 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 last icon shows the generated shader code corresponding to your graph.
|
|
|
|
|
|
.. note::
|
|
@@ -68,7 +76,7 @@ create your shader. To add a new node, click on the ``Add Node`` button on the
|
|
|
upper left corner or right click on any empty location in the graph, and a menu
|
|
|
will pop up.
|
|
|
|
|
|
-.. image:: img/vs_popup.png
|
|
|
+.. image:: img/vs_popup.webp
|
|
|
|
|
|
This popup has the following properties:
|
|
|
|
|
@@ -117,7 +125,7 @@ These ports are colored to differentiate type of port:
|
|
|
- Description
|
|
|
- Example
|
|
|
* - Scalar
|
|
|
- - Cyan
|
|
|
+ - Gray
|
|
|
- Scalar is a single value.
|
|
|
- |scalar|
|
|
|
* - Vector
|
|
@@ -125,15 +133,15 @@ These ports are colored to differentiate type of port:
|
|
|
- Vector is a set of values.
|
|
|
- |vector|
|
|
|
* - Boolean
|
|
|
- - Blue
|
|
|
+ - Green
|
|
|
- On or off, true or false.
|
|
|
- |boolean|
|
|
|
* - Transform
|
|
|
- - Orange
|
|
|
+ - Pink
|
|
|
- A matrix, usually used to transform vertices.
|
|
|
- |transform|
|
|
|
* - Sampler
|
|
|
- - Yellow
|
|
|
+ - Orange
|
|
|
- A texture sampler. It can be used to sample textures.
|
|
|
- |sampler|
|
|
|
|
|
@@ -160,14 +168,28 @@ 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.
|
|
|
|
|
|
-.. image:: img/vs_expression.gif
|
|
|
-
|
|
|
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:
|
|
|
|
|
|
.. image:: img/vs_expression2.png
|
|
|
|
|
|
+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.
|
|
|
+
|
|
|
+.. image:: img/vs_reroute.webp
|
|
|
+
|
|
|
+To move a reroute node move your mouse cursor above it, and grab the handle that
|
|
|
+appears.
|
|
|
+
|
|
|
+.. image:: img/vs_reroute_handle.webp
|
|
|
+
|
|
|
Fresnel node
|
|
|
++++++++++++
|
|
|
|
|
@@ -176,7 +198,7 @@ a scalar which is the saturated dot product between them. Additionally, you can
|
|
|
setup the inversion and the power of equation. The ``Fresnel`` node is great for
|
|
|
adding a rim-like lighting effect to objects.
|
|
|
|
|
|
-.. image:: img/vs_fresnel.png
|
|
|
+.. image:: img/vs_fresnel.webp
|
|
|
|
|
|
Boolean node
|
|
|
++++++++++++
|
|
@@ -205,4 +227,4 @@ 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.
|
|
|
|
|
|
-.. image:: img/vs_switch.png
|
|
|
+.. image:: img/vs_switch.webp
|