Shader Graph : Stylized Skybox | Minions Art on Patreon

Jul 6, 2020 at 9:15 PM

Shader Graph : Stylized Skybox

Hi all!

This is the Shader Graph version of the Stylized Skybox shader I made last year . Same explanation, but this time with nodes!
Graph File is attached! (It's a big one)

Sun

Starting with a new Unlit Shader Shader Graph , the first thing to add is a sun that follows the directional light.

Unity stores the direction of the directional light in _WorldSpaceLightPos0

To access this variable, create a new Vector4 property, and use _WorldSpaceLightPos0 as the reference. Make sure it is not exposed!

To get the radial position of the light, calculate the Distance between the UV.xyz, and the World Space light.

With the position calculated, create a circle, Divide by a new Vector1 for Sun Radius, invert it with a One Minus, and Multiply to make the circle sharper, Saturate to clamp it back to 1

Moon

I want the moon to appear on the opposite side of the sun for a nice day-night cycle look.

So the only difference from the sun's nodes, is that the _WorldSpaceLightPos0 is negative(Negate Node). And a new Vector1 for MoonRadius is added.

For a Crescent look, add another sphere, only this time, add a Vector1 for Offset to the UV.
Also add in a Normalize, to make sure the crescent moon is smooth

Then Subtract this circle from the first moon circle

Sliding the negative moon infront using the Offset

Gradient Sky

It's all looking a bit bleak so let's add some color

Lerp a gradient of 2 New Colors (Top and Bottom Sky) over the UV vertical axis, Saturate it so we don't get negative values in our colors.

This gradient works for the day, but when night comes another set of colors should show up.

Create a second gradient for night colors, with 2 new Color properties for the night sky.

Lerp these two together with the Y value of the WorldSpaceLightPos.

Horizon Color

First get the horizon

Using Absolute to mirror the UV.Y , a horizon line becomes visible (but should be inverted for this effect). Multiply the UV with a new Vector1(HorizonWidth) to control the width, and Add a new Vector1 (HorizonBrightness)

The sunset/sunrise color should only show up on the horizon, and when the sun is near the horizon. So Multiply the Directional Light Y with a small offset (where it shows up when the sun is going up) with the inverted Directional Light Y (night side).

Finally multiply it with a new Color (Horizon Color)

Stars

Stars disappear when the sun is up

We need some stars in the night sky! First create a UV space.

Noise texture on the sky UV

By Dividing the World Position xz by the y, we get a UV space that looks like it lays flat against the sky.

Project a star texture on this UV, then multiply it by the inverted _WorldSpaceLightPos0 to make sure it only shows up at night. The extra multiply x 5 in between the split and saturate are there to help make sure the stars won't show up at night.

Moving Clouds

Finally add the noise based clouds
Using the same UV as the stars, we're going to scroll a few noise textures over eachother to create the illusion of a moving mass

Project a new Texture(Cloud Noise) over the sky uv, with a new Vector1(Cloud MoveSpeed) multiplied by Time, and a new Vector1(NoiseScale) to control the size.

Noise Layer 1

Do this 2 more times, for a multilayered effect, add the result of the previous noise to the current UV.

Multiply them together, saturate to keep the values between 0 and 1, then multiply by the saturated world position Y so it only shows up on the sky.

The result looks pretty stormy, like moving clouds

To still see the sky through the clouds, make a smoothstep through the final noise.

Just like the sky colors, Lerp two colors together based on the Smoothstep result for the day colors, then do it again for the night colors, and lerp those together using the Light Direction

Multiply by the inverted(One Minus) clouds so the lerps don't bleed into the sky colors.

After this, I added another layer of the same clouds setup, but the graph is getting pretty messy and harder to explain, so it's just added in the final Graph you can download. Controlled via the Secondary Clouds Layer Scale and Secondary Clouds Layer Opacity.

Settings Example: