diff --git a/tutorials/shaders/your_first_shader/img/noise-set.png b/tutorials/shaders/your_first_shader/img/noise-set.png deleted file mode 100644 index 5a2ffda74..000000000 Binary files a/tutorials/shaders/your_first_shader/img/noise-set.png and /dev/null differ diff --git a/tutorials/shaders/your_first_shader/img/noise-set.webp b/tutorials/shaders/your_first_shader/img/noise-set.webp new file mode 100644 index 000000000..6759f0cde Binary files /dev/null and b/tutorials/shaders/your_first_shader/img/noise-set.webp differ diff --git a/tutorials/shaders/your_first_shader/img/normal-set.png b/tutorials/shaders/your_first_shader/img/normal-set.png deleted file mode 100644 index abf9ebe7b..000000000 Binary files a/tutorials/shaders/your_first_shader/img/normal-set.png and /dev/null differ diff --git a/tutorials/shaders/your_first_shader/img/normal-set.webp b/tutorials/shaders/your_first_shader/img/normal-set.webp new file mode 100644 index 000000000..1058c19e9 Binary files /dev/null and b/tutorials/shaders/your_first_shader/img/normal-set.webp differ diff --git a/tutorials/shaders/your_first_shader/img/plane-sub-set.png b/tutorials/shaders/your_first_shader/img/plane-sub-set.png deleted file mode 100644 index caf0cfdf0..000000000 Binary files a/tutorials/shaders/your_first_shader/img/plane-sub-set.png and /dev/null differ diff --git a/tutorials/shaders/your_first_shader/img/plane-sub-set.webp b/tutorials/shaders/your_first_shader/img/plane-sub-set.webp new file mode 100644 index 000000000..89d94f81d Binary files /dev/null and b/tutorials/shaders/your_first_shader/img/plane-sub-set.webp differ diff --git a/tutorials/shaders/your_first_shader/img/shader-editor.webp b/tutorials/shaders/your_first_shader/img/shader-editor.webp new file mode 100644 index 000000000..ee8166031 Binary files /dev/null and b/tutorials/shaders/your_first_shader/img/shader-editor.webp differ diff --git a/tutorials/shaders/your_first_shader/img/shader-error.png b/tutorials/shaders/your_first_shader/img/shader-error.png deleted file mode 100644 index 64515fa5e..000000000 Binary files a/tutorials/shaders/your_first_shader/img/shader-error.png and /dev/null differ diff --git a/tutorials/shaders/your_first_shader/your_first_3d_shader.rst b/tutorials/shaders/your_first_shader/your_first_3d_shader.rst index f863d3167..5736ae739 100644 --- a/tutorials/shaders/your_first_shader/your_first_3d_shader.rst +++ b/tutorials/shaders/your_first_shader/your_first_3d_shader.rst @@ -76,9 +76,9 @@ This will allow you to see the triangles making up the plane. .. image:: img/plane.png -Now set ``Subdivide Width`` and ``Subdivide Depth`` to ``32``. +Now set ``Subdivide Width`` and ``Subdivide Depth`` of the :ref:`PlaneMesh ` to ``32``. -.. image:: img/plane-sub-set.png +.. image:: img/plane-sub-set.webp You can see that there are now many more triangles in the :ref:`MeshInstance3D`. This will give us more vertices to work with @@ -99,18 +99,21 @@ first Spatial shader! Shader magic ------------ -.. image:: img/shader-error.png +.. image:: img/shader-editor.webp -Notice how there is already error? This is because the shader editor reloads -shaders on the fly. The first thing Godot shaders need is a declaration of what -type of shader they are. We set the variable ``shader_type`` to ``spatial`` +The new shader is already generated with a ``shader_type`` +variable and the ``fragment()`` function. +The first thing Godot shaders need is a declaration +of what type of shader they are. +In this case the ``shader_type`` is set to ``spatial`` because this is a spatial shader. .. code-block:: glsl shader_type spatial; -Next we will define the ``vertex()`` function. The ``vertex()`` function +For now ignore the ``fragment()`` function +and define the ``vertex()`` function. The ``vertex()`` function determines where the vertices of your :ref:`MeshInstance3D` appear in the final scene. We will be using it to offset the height of each vertex and make our flat plane appear like a little terrain. @@ -177,16 +180,16 @@ This will allow you to send a noise texture to the shader. Now look in the inspector under your material. You should see a section called "Shader Params". If you open it up, you'll see a section called "noise". -Click beside it where it says "[empty]" and select "New NoiseTexture". Then in -your NoiseTexture click beside where it says "Noise" and select "New -NoiseTexture". +Click beside it where it says "[empty]" and select "New NoiseTexture2D". Then in +your :ref:`NoiseTexture2D ` click beside where it says "Noise" and select "New +FastNoiseLite". -.. note:: :ref:`FastNoiseLite ` is used by the NoiseTexture to +.. note:: :ref:`FastNoiseLite ` is used by the NoiseTexture2D to generate a heightmap. Once you set it up and should look like this. -.. image:: img/noise-set.png +.. image:: img/noise-set.webp Now, access the noise texture using the ``texture()`` function. ``texture()`` takes a texture as the first argument and a ``vec2`` for the position on the @@ -201,8 +204,10 @@ this case we'll use the ``r``, or ``x`` channel. .. code-block:: glsl - float height = texture(noise, VERTEX.xz / 2.0 + 0.5).x; - VERTEX.y += height; + void vertex() { + float height = texture(noise, VERTEX.xz / 2.0 + 0.5).x; + VERTEX.y += height; + } Note: ``xyzw`` is the same as ``rgba`` in GLSL, so instead of ``texture().x`` above, we could use ``texture().r``. See the `OpenGL documentation @@ -304,10 +309,10 @@ do that by passing in a second noise texture. uniform sampler2D normalmap; -Set this second uniform texture to another NoiseTexture with another -FastNoiseLite. But this time, check **As Normalmap**. +Set this second uniform texture to another :ref:`NoiseTexture2D ` with another +:ref:`FastNoiseLite `. But this time, check **As Normalmap**. -.. image:: img/normal-set.png +.. image:: img/normal-set.webp Now, because this is a normalmap and not a per-vertex normal, we are going to assign it in the ``fragment()`` function. The ``fragment()`` function will be