Amazing skybox using visual shader in Godot!

Hello everyone and welcome back.

Today, we will going to create a skybox shader in Godot, using Visual shader. For the tutorial, I will be using Godot 4.2 and I have also installed the addon called Shader-lib.

Create shader and material

First let’s create a visual shader. Right click > Create new > Resource. Search for Visual shader. Then select the Mode Sky. I will call it skybox_shader.

Let’s also create a material for our shader. Right click > Create new > Resource. Search for Shader material. I will call it skybox with extension .material. Assign our shader to the material.

Applying the material

Now the question is where do we apply the material?

You need to click this little 3 dots here.

Here you can adjust the sky color, sun size and all the good stuff, we don’t care about all this because we will create our own, so just go ahead and hit the Add environment to scene button.

Then we will have the world environment node. It is necessary, because without this, our skybox will not render when we run our game.

In the inspector, click the Environment resource and in it, expand the Sky section. Here you can see the Sky material slot, just drag and drop our material here.

Visual shader

Now in the shader, first we need axis information of our world. In Godot, we have nice variable called EyeDir. Although it is called EyeDir, all it does is It gives the axis information in world space.

Now we need the Up axis. In Y axis, we will have value of 1 at the top, then it will slowly fades to 0 at the horizon, and then it will fades to -1 at the bottom.

First, we will only need the values between 1 and 0, for this, let’s use Max node. Max node as the name suggest returns the maximum values between these 2 inputs. So for the values bigger than 0 we will get that value and between 0 and negative values 0 is bigger so we will get 0. So now we have 1 to 0 in the sky and the rest is all 0.

Okay, now we need values between 0 and -1 and for that we will use, You guessed it, Min node. Min node returns the minimum values between the 2 inputs. Feed our Y axis (Green) into input A and for B set 0.

Now we have 0 at the top and from horizon to bottom we have negative values. We can’t use negative value, we need to change positive values. Let’s use Absolute node. Absolute node will simply return positive value or absolute value or unsigned value.

So we have all 0 at the top, from horizon to bottom the value will fade from 0 to 1. Let’s add this 2 together.

Now we have 1 at top, 0 at horizon and again 1 at top, but we want opposite of that, we want 0 instead of 1 and vice versa. In simple words, I want to invert the color. For that, let’s use One minus node. One minus will subtract whatever values we feed in, from 1 so in this case it will invert the color.

Now the Max node will be our sky part, Absolute node will be our ground part and this Add node will be our horizon.

Now we need the control the size of the horizon so let’s create Power node. Power node will darken the values which are less than 1 as we increase the power. Take Add node's output add feed into Power node.

Alright, we will do the same for our sky part and ground part so let’s create 2 more Power node.

And to control the power from the inspector, let’s create 3 FloatParameters, I will call them ZenithBlend, HorizonBlend and NadirBlend respectively and feed them in Power nodes.

Now let’s create 3 ColorParameters for our sky, horizon and ground color. Then let’s multiply our SkyColor with our sky Power node.

Then we will do the same for our horizon and ground.

Finally let’s add everything together. Then take our final Add node’s output and feed it into Color slot. And our basic skybox shader is done, It will look like this.

And we will have our nice skybox.

Adding clouds

Now just to give you guys ideas and justify the thumbnail, let’s add some clouds.

For that we will use Simple noise node. This is the node from the addon, but you can also use Texture2D with noise texture, no big deal.

We will multiply our noise with sky part. Then add it to our sky. Finally add it with sky part.

And you will see everything turns black, because we have a compilation error.

The reason is, the Simple noise uses default UVs and in our Sky processor, we don’t have access to UV variable. If you hit the show code button, you can see it says unknown identifier in the expression UV.

It’s all right, default UV won’t help us here anyway so we will say that we want to apply the simple noise parallel to our XZ plane. To do that we will simply use X and Z axis or our world and combine them using Vector2Compose node.

Now if we feed the vector to our Simple noise node's UVs, we will have the weird stretching at the horizon. The reason is because our skybox is basically a sphere and the noise is trying to wrap around the top.

To avoid that we will simply divide our new Vector with Y axis. Then take its output and feed it into the UVs.

Now our noise is applied perfectly parallel to the XZ plane.

Scrolling the clouds

Finally let’s scroll the clouds. For that, let’s create a Time node. Then create Multiply node for Vector2.

Take our Time and feed it into Multiply node. Now to control the speed and direction, you can of course use Vector2Parameter node. I will just pass the values in the Multiply node itself (0, 0.5).

Then to offset the values we will use UVFunc node with mode Panning. It will simply pan the UVs using the offset. Take our Multiply node’s output and feed it into the offset.

Take our Divide node’s output and feed it into the UV. Finally take our UVFunc node’s output and feed it into Simple noise node’s UV.

And we have our moving clouds, of course this needs the improvement but I will leave that up to you.

Trouble following along? Check out this step by step tutorial!

Thank you so much for reading!