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 12aba76e1f44..000000000000 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 000000000000..1b6a55cc9907 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 64ed1a69c582..e11f9f215ed6 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 02a5a55ce519..48410d1894de 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 f648049acfa1..000000000000 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 000000000000..607a77281fc0 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 b87ed5d9c7dc..0fc207e178f6 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 8a95e1e905d2..000000000000 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 aa132e56f54d..000000000000 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 000000000000..f3b581e62d33 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 5ec24b671412..f430180e2aee 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 356d2b61d8fa..000000000000 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 000000000000..b14fbee58627 Binary files /dev/null and b/tutorials/shaders/img/vs_popup.webp differ diff --git a/tutorials/shaders/img/vs_sampler.webp b/tutorials/shaders/img/vs_sampler.webp index ddf528e9aa7f..d2705032b05e 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 d078d75028af..b8bb219780b3 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 04cc8edfa38d..000000000000 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 000000000000..ec2e1b4ac1f0 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 7c71d8b01b1e..c61b10f1bf16 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 8c2788c3b05b..7a1a813499e6 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 276d778809d2..b04534dbe117 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 controlls 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,8 +168,6 @@ 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: @@ -176,7 +182,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 +211,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