diff --git a/tutorials/shaders/img/shader_material_create_mesh.png b/tutorials/shaders/img/shader_material_create_mesh.png deleted file mode 100644 index 12aba76e1..000000000 Binary files a/tutorials/shaders/img/shader_material_create_mesh.png and /dev/null differ diff --git a/tutorials/shaders/img/shader_material_create_mesh.webp b/tutorials/shaders/img/shader_material_create_mesh.webp new file mode 100644 index 000000000..1b6a55cc9 Binary files /dev/null and b/tutorials/shaders/img/shader_material_create_mesh.webp differ diff --git a/tutorials/shaders/img/visual_shader_create.webp b/tutorials/shaders/img/visual_shader_create.webp index 64ed1a69c..e11f9f215 100644 Binary files a/tutorials/shaders/img/visual_shader_create.webp and b/tutorials/shaders/img/visual_shader_create.webp differ diff --git a/tutorials/shaders/img/visual_shader_create2.webp b/tutorials/shaders/img/visual_shader_create2.webp index 02a5a55ce..48410d189 100644 Binary files a/tutorials/shaders/img/visual_shader_create2.webp and b/tutorials/shaders/img/visual_shader_create2.webp differ diff --git a/tutorials/shaders/img/visual_shader_editor2.png b/tutorials/shaders/img/visual_shader_editor2.png deleted file mode 100644 index f648049ac..000000000 Binary files a/tutorials/shaders/img/visual_shader_editor2.png and /dev/null differ diff --git a/tutorials/shaders/img/visual_shader_editor2.webp b/tutorials/shaders/img/visual_shader_editor2.webp new file mode 100644 index 000000000..607a77281 Binary files /dev/null and b/tutorials/shaders/img/visual_shader_editor2.webp differ diff --git a/tutorials/shaders/img/vs_boolean.webp b/tutorials/shaders/img/vs_boolean.webp index b87ed5d9c..0fc207e17 100644 Binary files a/tutorials/shaders/img/vs_boolean.webp and b/tutorials/shaders/img/vs_boolean.webp differ diff --git a/tutorials/shaders/img/vs_expression.gif b/tutorials/shaders/img/vs_expression.gif deleted file mode 100644 index 8a95e1e90..000000000 Binary files a/tutorials/shaders/img/vs_expression.gif and /dev/null differ diff --git a/tutorials/shaders/img/vs_fresnel.png b/tutorials/shaders/img/vs_fresnel.png deleted file mode 100644 index aa132e56f..000000000 Binary files a/tutorials/shaders/img/vs_fresnel.png and /dev/null differ diff --git a/tutorials/shaders/img/vs_fresnel.webp b/tutorials/shaders/img/vs_fresnel.webp new file mode 100644 index 000000000..f3b581e62 Binary files /dev/null and b/tutorials/shaders/img/vs_fresnel.webp differ diff --git a/tutorials/shaders/img/vs_node.webp b/tutorials/shaders/img/vs_node.webp index 5ec24b671..f430180e2 100644 Binary files a/tutorials/shaders/img/vs_node.webp and b/tutorials/shaders/img/vs_node.webp differ diff --git a/tutorials/shaders/img/vs_popup.png b/tutorials/shaders/img/vs_popup.png deleted file mode 100644 index 356d2b61d..000000000 Binary files a/tutorials/shaders/img/vs_popup.png and /dev/null differ diff --git a/tutorials/shaders/img/vs_popup.webp b/tutorials/shaders/img/vs_popup.webp new file mode 100644 index 000000000..b14fbee58 Binary files /dev/null and b/tutorials/shaders/img/vs_popup.webp differ diff --git a/tutorials/shaders/img/vs_reroute.webp b/tutorials/shaders/img/vs_reroute.webp new file mode 100644 index 000000000..dbad681b5 Binary files /dev/null and b/tutorials/shaders/img/vs_reroute.webp differ diff --git a/tutorials/shaders/img/vs_reroute_handle.webp b/tutorials/shaders/img/vs_reroute_handle.webp new file mode 100644 index 000000000..baa4ce560 Binary files /dev/null and b/tutorials/shaders/img/vs_reroute_handle.webp differ diff --git a/tutorials/shaders/img/vs_sampler.webp b/tutorials/shaders/img/vs_sampler.webp index ddf528e9a..d2705032b 100644 Binary files a/tutorials/shaders/img/vs_sampler.webp and b/tutorials/shaders/img/vs_sampler.webp differ diff --git a/tutorials/shaders/img/vs_scalar.webp b/tutorials/shaders/img/vs_scalar.webp index d078d7502..b8bb21978 100644 Binary files a/tutorials/shaders/img/vs_scalar.webp and b/tutorials/shaders/img/vs_scalar.webp differ diff --git a/tutorials/shaders/img/vs_switch.png b/tutorials/shaders/img/vs_switch.png deleted file mode 100644 index 04cc8edfa..000000000 Binary files a/tutorials/shaders/img/vs_switch.png and /dev/null differ diff --git a/tutorials/shaders/img/vs_switch.webp b/tutorials/shaders/img/vs_switch.webp new file mode 100644 index 000000000..ec2e1b4ac Binary files /dev/null and b/tutorials/shaders/img/vs_switch.webp differ diff --git a/tutorials/shaders/img/vs_transform.webp b/tutorials/shaders/img/vs_transform.webp index 7c71d8b01..c61b10f1b 100644 Binary files a/tutorials/shaders/img/vs_transform.webp and b/tutorials/shaders/img/vs_transform.webp differ diff --git a/tutorials/shaders/img/vs_vector.webp b/tutorials/shaders/img/vs_vector.webp index 8c2788c3b..7a1a81349 100644 Binary files a/tutorials/shaders/img/vs_vector.webp and b/tutorials/shaders/img/vs_vector.webp differ diff --git a/tutorials/shaders/visual_shaders.rst b/tutorials/shaders/visual_shaders.rst index 276d77880..de3f17262 100644 --- a/tutorials/shaders/visual_shaders.rst +++ b/tutorials/shaders/visual_shaders.rst @@ -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