diff --git a/tutorials/shaders/your_first_shader/img/cos.png b/tutorials/shaders/your_first_shader/img/cos.png deleted file mode 100644 index d2c2e0fe6..000000000 Binary files a/tutorials/shaders/your_first_shader/img/cos.png and /dev/null differ diff --git a/tutorials/shaders/your_first_shader/img/cos.webp b/tutorials/shaders/your_first_shader/img/cos.webp new file mode 100644 index 000000000..9bbb7ebd9 Binary files /dev/null and b/tutorials/shaders/your_first_shader/img/cos.webp differ diff --git a/tutorials/shaders/your_first_shader/img/cos4.png b/tutorials/shaders/your_first_shader/img/cos4.png deleted file mode 100644 index e21dcf627..000000000 Binary files a/tutorials/shaders/your_first_shader/img/cos4.png and /dev/null differ diff --git a/tutorials/shaders/your_first_shader/img/cos4.webp b/tutorials/shaders/your_first_shader/img/cos4.webp new file mode 100644 index 000000000..084f3060e Binary files /dev/null and b/tutorials/shaders/your_first_shader/img/cos4.webp differ diff --git a/tutorials/shaders/your_first_shader/img/light.png b/tutorials/shaders/your_first_shader/img/light.png deleted file mode 100644 index fdf4924d9..000000000 Binary files a/tutorials/shaders/your_first_shader/img/light.png and /dev/null differ diff --git a/tutorials/shaders/your_first_shader/img/light.webp b/tutorials/shaders/your_first_shader/img/light.webp new file mode 100644 index 000000000..61d8e4d65 Binary files /dev/null and b/tutorials/shaders/your_first_shader/img/light.webp differ diff --git a/tutorials/shaders/your_first_shader/img/noise-low.png b/tutorials/shaders/your_first_shader/img/noise-low.png deleted file mode 100644 index 87419a52e..000000000 Binary files a/tutorials/shaders/your_first_shader/img/noise-low.png and /dev/null differ diff --git a/tutorials/shaders/your_first_shader/img/noise-low.webp b/tutorials/shaders/your_first_shader/img/noise-low.webp new file mode 100644 index 000000000..87085d081 Binary files /dev/null and b/tutorials/shaders/your_first_shader/img/noise-low.webp differ diff --git a/tutorials/shaders/your_first_shader/img/noise-set.webp b/tutorials/shaders/your_first_shader/img/noise-set.webp index 6759f0cde..1f1bc5cfb 100644 Binary files a/tutorials/shaders/your_first_shader/img/noise-set.webp and b/tutorials/shaders/your_first_shader/img/noise-set.webp differ diff --git a/tutorials/shaders/your_first_shader/img/noise.png b/tutorials/shaders/your_first_shader/img/noise.png deleted file mode 100644 index ee2f52268..000000000 Binary files a/tutorials/shaders/your_first_shader/img/noise.png and /dev/null differ diff --git a/tutorials/shaders/your_first_shader/img/noise.webp b/tutorials/shaders/your_first_shader/img/noise.webp new file mode 100644 index 000000000..89b31fa19 Binary files /dev/null and b/tutorials/shaders/your_first_shader/img/noise.webp differ diff --git a/tutorials/shaders/your_first_shader/img/normal-set.webp b/tutorials/shaders/your_first_shader/img/normal-set.webp index 1058c19e9..375dd2a4b 100644 Binary files a/tutorials/shaders/your_first_shader/img/normal-set.webp and b/tutorials/shaders/your_first_shader/img/normal-set.webp differ diff --git a/tutorials/shaders/your_first_shader/img/normal.png b/tutorials/shaders/your_first_shader/img/normal.png deleted file mode 100644 index eed99ac68..000000000 Binary files a/tutorials/shaders/your_first_shader/img/normal.png and /dev/null differ diff --git a/tutorials/shaders/your_first_shader/img/normal.webp b/tutorials/shaders/your_first_shader/img/normal.webp new file mode 100644 index 000000000..8ae148600 Binary files /dev/null and b/tutorials/shaders/your_first_shader/img/normal.webp differ diff --git a/tutorials/shaders/your_first_shader/img/normalmap.png b/tutorials/shaders/your_first_shader/img/normalmap.png deleted file mode 100644 index 182acc3a0..000000000 Binary files a/tutorials/shaders/your_first_shader/img/normalmap.png and /dev/null differ diff --git a/tutorials/shaders/your_first_shader/img/normalmap.webp b/tutorials/shaders/your_first_shader/img/normalmap.webp new file mode 100644 index 000000000..5904d1f42 Binary files /dev/null and b/tutorials/shaders/your_first_shader/img/normalmap.webp differ diff --git a/tutorials/shaders/your_first_shader/img/normalmap2.png b/tutorials/shaders/your_first_shader/img/normalmap2.png deleted file mode 100644 index 15fade8d4..000000000 Binary files a/tutorials/shaders/your_first_shader/img/normalmap2.png and /dev/null differ diff --git a/tutorials/shaders/your_first_shader/img/normalmap2.webp b/tutorials/shaders/your_first_shader/img/normalmap2.webp new file mode 100644 index 000000000..f0350b652 Binary files /dev/null and b/tutorials/shaders/your_first_shader/img/normalmap2.webp differ diff --git a/tutorials/shaders/your_first_shader/img/plane-sub.png b/tutorials/shaders/your_first_shader/img/plane-sub.png deleted file mode 100644 index b1d412a6e..000000000 Binary files a/tutorials/shaders/your_first_shader/img/plane-sub.png and /dev/null differ diff --git a/tutorials/shaders/your_first_shader/img/plane-sub.webp b/tutorials/shaders/your_first_shader/img/plane-sub.webp new file mode 100644 index 000000000..c44937408 Binary files /dev/null and b/tutorials/shaders/your_first_shader/img/plane-sub.webp differ diff --git a/tutorials/shaders/your_first_shader/img/plane.png b/tutorials/shaders/your_first_shader/img/plane.png deleted file mode 100644 index e7886dd8f..000000000 Binary files a/tutorials/shaders/your_first_shader/img/plane.png and /dev/null differ diff --git a/tutorials/shaders/your_first_shader/img/plane.webp b/tutorials/shaders/your_first_shader/img/plane.webp new file mode 100644 index 000000000..bff5a8319 Binary files /dev/null and b/tutorials/shaders/your_first_shader/img/plane.webp 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 d9e468cd8..f9d994d7d 100644 --- a/tutorials/shaders/your_first_shader/your_first_3d_shader.rst +++ b/tutorials/shaders/your_first_shader/your_first_3d_shader.rst @@ -63,7 +63,7 @@ Setting up Add a new :ref:`MeshInstance3D ` node to your scene. -In the inspector tab beside "Mesh" click "[empty]" and select "New PlaneMesh". +In the inspector tab beside "Mesh" click "" and select "New PlaneMesh". Then click on the image of a plane that appears. This adds a :ref:`PlaneMesh ` to our scene. @@ -74,7 +74,7 @@ to display the scene. Select 'Display Wireframe'. This will allow you to see the triangles making up the plane. -.. image:: img/plane.png +.. image:: img/plane.webp Now set ``Subdivide Width`` and ``Subdivide Depth`` of the :ref:`PlaneMesh ` to ``32``. @@ -84,47 +84,36 @@ You can see that there are now many more triangles in the :ref:`MeshInstance3D`. This will give us more vertices to work with and thus allow us to add more detail. -.. image:: img/plane-sub.png +.. image:: img/plane-sub.webp :ref:`PrimitiveMeshes `, like PlaneMesh, only have one surface, so instead of an array of materials there is only one. Click -beside "Material" where it says "[empty]" and select "New ShaderMaterial". +beside "Material" where it says "" and select "New ShaderMaterial". Then click the sphere that appears. -Now click beside "Shader" where it says "[empty]" and select "New Shader". +Now click beside "Shader" where it says "" and select "New Shader...". Leave +the default settings, give your shader a name and click "Create". -The shader editor should now pop up and you are ready to begin writing your -first Spatial shader! +Click on the shader in the inspector, and the shader editor should now pop up. You +are ready to begin writing your first Spatial shader! Shader magic ------------ .. image:: img/shader-editor.webp -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. +The new shader is already generated with a ``shader_type`` variable, the +``vertex()`` function, 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; -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. - -We define the vertex shader like so: - -.. code-block:: glsl - - void vertex() { - - } +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. With nothing in the ``vertex()`` function, Godot will use its default vertex shader. We can easily start to make changes by adding a single line: @@ -137,7 +126,7 @@ shader. We can easily start to make changes by adding a single line: Adding this line, you should get an image like the one below. -.. image:: img/cos.png +.. image:: img/cos.webp Okay, let's unpack this. The ``y`` value of the ``VERTEX`` is being increased. And we are passing the ``x`` and ``z`` components of the ``VERTEX`` as arguments @@ -154,7 +143,7 @@ What we want to achieve is the look of little hills; after all. ``cos`` and VERTEX.y += cos(VERTEX.x * 4.0) * sin(VERTEX.z * 4.0); } -.. image:: img/cos4.png +.. image:: img/cos4.webp This looks better, but it is still too spiky and repetitive, let's make it a little more interesting. @@ -180,7 +169,7 @@ 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 NoiseTexture2D". Then in +Click beside it where it says "" and select "New NoiseTexture2D". Then in your :ref:`NoiseTexture2D ` click beside where it says "Noise" and select "New FastNoiseLite". @@ -216,7 +205,7 @@ details. Using this code you can see the texture creates random looking hills. -.. image:: img/noise.png +.. image:: img/noise.webp Right now it is too spiky, we want to soften the hills a bit. To do that, we will use a uniform. You already used a uniform above to pass in the noise @@ -266,7 +255,7 @@ use it to set the height value instead of arbitrarily multiplying by ``0.5``. Now it looks much better. -.. image:: img/noise-low.png +.. image:: img/noise-low.webp Using uniforms, we can even change the value every frame to animate the height of the terrain. Combined with :ref:`Tweens `, this can be @@ -279,14 +268,14 @@ First, turn wireframe off. To do so, click in the upper-left of the Viewport again, where it says "Perspective", and select "Display Normal". Additionally in the 3D scene toolbar, turn off preview sunlight. -.. image:: img/normal.png +.. image:: img/normal.webp Note how the mesh color goes flat. This is because the lighting on it is flat. Let's add a light! First, we will add an :ref:`OmniLight3D` to the scene. -.. image:: img/light.png +.. image:: img/light.webp You can see the light affecting the terrain, but it looks odd. The problem is the light is affecting the terrain as if it were a flat plane. This is because @@ -315,19 +304,10 @@ Set this second uniform texture to another :ref:`NoiseTexture2D