minionsart
patreon
Shader Graph : Stylized Skybox
🕑 Added 2020-07-06 21:15:08 +0000 UTCHi 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:
Noise Textures:
Base Noise
Distort
Thanks for reading and have fun!
