Stylized Sky Shader With Clouds For Godot 4

axilirate

feel free to use however you want, credit is not required and please if you made any improvements post them in the description.

to make clouds use noise textures,
to make stars make use voronoi texture,
it can be done inside godot.

Shader code
shader_type sky;
render_mode use_half_res_pass;


// Sky Gradients
uniform vec3 day_bottom_color : source_color = vec3(1.0, 1.0, 1.0);
uniform vec3 day_top_color : source_color = vec3(1.0, 1.0, 1.0);

uniform vec3 sunset_bottom_color : source_color = vec3(0.0, 0.0, 0.0);
uniform vec3 sunset_top_color : source_color = vec3(0.0, 0.0, 0.0);

uniform vec3 night_bottom_color : source_color = vec3(0.0, 0.0, 0.0);
uniform vec3 night_top_color : source_color = vec3(0.0, 0.0, 0.0);


// Horizon Stuff
uniform vec3 horizon_color_day : source_color = vec3(1.0, 1.0, 1.0);
uniform vec3 horizon_color_sunset : source_color = vec3(1.0, 1.0, 1.0);
uniform vec3 horizon_color_night : source_color = vec3(0.0, 0.8, 1.0);
uniform float horizon_falloff: hint_range(0.0, 1.0, 0.1);


// Sun Stuff
uniform vec3 sun_col: source_color = vec3(1.0);
uniform float sun_size: hint_range(0.01, 1.0) = 1.0;
uniform float sun_blur: hint_range(0.01, 1.0) = 0.01;


// Moon Stuff
uniform vec3 moon_col: source_color = vec3(1.0);
uniform float moon_size: hint_range(0.01, 1.0) = 1.0;
uniform float moon_crescent_offset: hint_range(-1.0, 1.0) = 0.5;


// Clouds Stuff
uniform sampler2D clouds_texture: filter_linear_mipmap;
uniform sampler2D clouds_distort_texture: filter_linear_mipmap;
uniform sampler2D clouds_noise_texture: filter_linear_mipmap;
uniform vec3 clouds_main_color: source_color = vec3(1.0, 1.0, 1.0);
uniform vec3 clouds_edge_color: source_color = vec3(1.0, 1.0, 1.0);
uniform float clouds_speed: hint_range(0.0, 0.1, 0.01);
uniform float clouds_scale: hint_range(0.0, 1.0, 0.01);
uniform float clouds_cutoff: hint_range(0.0, 1.0, 0.01);
uniform float clouds_fuzziness: hint_range(0.0, 1.0, 0.01);


// Star Stuff
uniform sampler2D stars_texture: filter_linear_mipmap;
uniform float stars_cutoff;
uniform float stars_speed: hint_range(0.0, 0.1);





void sky() {
	vec2 sky_uv = EYEDIR.xz / EYEDIR.y;
	
	
	float day_amount = clamp(LIGHT0_DIRECTION.y, 0.0, 1.0);
	vec3 gradient_day = mix(day_bottom_color, day_top_color, clamp(EYEDIR.y, 0.0, 1.0)) * day_amount;
	
	float sunset_amount = clamp(1.0 - abs(LIGHT0_DIRECTION.y), 0.0, 1.0);
	vec3 gradient_sunset = mix(sunset_bottom_color, sunset_top_color, clamp(EYEDIR.y, 0.0, 1.0)) * sunset_amount;
	
	float night_amount = clamp(-LIGHT0_DIRECTION.y, 0.0, 1.0);
	vec3 gradient_night = mix(night_bottom_color, night_top_color, clamp(EYEDIR.y, 0.0, 1.0)) * night_amount;
	
	
	vec3 sky_gradients = gradient_day + gradient_sunset + gradient_night;
	
	
	
	
	float horizon = 1.0 - abs(EYEDIR.y + horizon_falloff);
	
	vec3 horizon_glow_amount_day = clamp(horizon * clamp(LIGHT0_DIRECTION.y, 0.0, 1.0), 0.0, 1.0) * horizon_color_day;
	vec3 horizon_glow_amount_sunset = clamp(horizon * clamp(1.0 - abs(LIGHT0_DIRECTION.y), 0.0, 1.0), 0.0, 1.0) * horizon_color_sunset;
	vec3 horizon_glow_night = clamp(horizon * clamp(-LIGHT0_DIRECTION.y, 0.0, 1.0), 0.0, 1.0) * horizon_color_night;
	
	vec3 horizon_glow = horizon_glow_amount_day + horizon_glow_amount_sunset + horizon_glow_night;
	
	
	
	
	
	float sun_distance = distance(EYEDIR.xyz, LIGHT0_DIRECTION);
	float sun_power = 1.0 - clamp(sun_distance / sun_size, 0.0, 1.0);
	float sun_disc = clamp(sun_power / sun_blur, sun_power, 1.0);
	vec3 sun = sun_col * sun_disc;
	
	
	
	float moon_distance = distance(EYEDIR.xyz, -LIGHT0_DIRECTION);
	float moon_power = 1.0 - clamp(moon_distance / moon_size, 0.0, 1.0);
	float moon_disc = clamp(moon_power / 0.01, moon_power, 1.0);
	
	float moon_crescent_distance = distance(vec3(EYEDIR.x + moon_crescent_offset, EYEDIR.yz), -LIGHT0_DIRECTION);
	float moon_crescent_power = 1.0 - clamp(moon_crescent_distance / moon_size, 0.0, 1.0);
	float moon_crescent_disc = clamp(moon_crescent_power / 0.01, moon_crescent_power, 1.0);
	
	vec3 moon_crescent = moon_col * moon_crescent_disc;
	
	vec3 moon = clamp( (moon_col * moon_disc) - moon_crescent, 0.0 , 1.0);
	
	
	
	
	
	float clouds_movement = TIME * clouds_speed * 0.5;
	float clouds_base_noise = texture(clouds_texture, (sky_uv + clouds_movement ) * clouds_scale).r;
	float noise1 = texture(clouds_distort_texture, (sky_uv + clouds_base_noise + (clouds_movement * 0.75)) * clouds_scale).r;
	float noise2 = texture(clouds_noise_texture, (sky_uv + noise1 + (clouds_movement * 0.25)) * clouds_scale).r;
	
	float clouds_noise_value = clamp(noise1 * noise2, 0.0, 1.0) * clamp(EYEDIR.y, 0.0, 1.0);
	
	float clouds_value = clamp(smoothstep(clouds_cutoff, clouds_cutoff + clouds_fuzziness, clouds_noise_value), 0.0, 1.0);
	
	
	vec3 clouds = mix(clouds_edge_color,  clouds_main_color , clouds_value) * clouds_value;
	
	float clouds_negative = 1.0 - clouds_value;
	
	
	vec3 stars = texture(stars_texture, sky_uv + (stars_speed * TIME)).rgb;
	stars *= clamp(-LIGHT0_DIRECTION.y, 0.0, 1.0);
	stars = step(stars_cutoff, stars);
	
	
	
	vec3 sun_moon = sun + moon;
	sun_moon = clamp(sun_moon * clouds_negative, 0.0, 1.0);
	
	sky_gradients = clamp(sky_gradients * clouds_negative, 0.0, 1.0);
	
	
	
	vec3 sky = horizon_glow + sky_gradients + sun_moon + stars + clouds;
	
	
	
	COLOR = sky;
}
Tags
clouds, moon, sky, Stars, stylized, Sun
The shader code and all code snippets in this post are under CC0 license and can be used freely without the author's permission. Images and videos, and assets depicted in those, do not fall under this license. For more info, see our License terms.

More from axilirate

Spatial12128

Pixel Perfect outline Shader

Canvas item

Simple Ellipse Shader

Canvas item459

Speed Lines Shader for Godot 4

Related shaders

Sky2

Simple Sky with Noise Clouds

Sky17

Panoramic textured sky with clouds.

Spatial118

Stylized Cloudy Sky

Subscribe
Notify of
guest

14 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Ben Stoner
Ben Stoner
1 year ago

how do i use it? i put it in a world environment but it is really bright and doesn’t show the sun

50
Reply
AppleMincraft
AppleMincraft
1 year ago

where the get the textures of clouds and stars in shader param

6
Reply
Yvie
Yvie
1 year ago

I did some adjustments for my purpose. See the code below.

List of changes:

  • Sun + Moon now interpolate with the sky instead of adding the RGB values to the sky. Otherwise the sun/moon color is not displayed correctly
  • Made clouds fade into sky color during night time
  • Removed star cutoff parameter, see below for the reasoning

In my opinion, stars look better when using the color ramp from the noise texture compared to using the cutoff parameter. E.g. I put the black color to 0.97 and increased frequency on the noise to 0.1 to get nice stars.

For the cloud cutoff parameter, this does not seem to make a difference.

Code
shader_type sky;
render_mode use_half_res_pass;

// Sky Gradients
uniform vec3 day_bottom_color : source_color = vec3(1.0, 1.0, 1.0);
uniform vec3 day_top_color : source_color = vec3(1.0, 1.0, 1.0);

uniform vec3 sunset_bottom_color : source_color = vec3(0.0, 0.0, 0.0);
uniform vec3 sunset_top_color : source_color = vec3(0.0, 0.0, 0.0);

uniform vec3 night_bottom_color : source_color = vec3(0.0, 0.0, 0.0);
uniform vec3 night_top_color : source_color = vec3(0.0, 0.0, 0.0);

// Horizon Stuff
uniform vec3 horizon_color_day : source_color = vec3(1.0, 1.0, 1.0);
uniform vec3 horizon_color_sunset : source_color = vec3(1.0, 1.0, 1.0);
uniform vec3 horizon_color_night : source_color = vec3(0.0, 0.8, 1.0);
uniform float horizon_falloff: hint_range(0.0, 1.0, 0.1);

// Sun Stuff
uniform vec3 sun_col: source_color = vec3(1.0);
uniform float sun_size: hint_range(0.01, 1.0) = 1.0;
uniform float sun_blur: hint_range(0.01, 1.0) = 0.01;

// Moon Stuff
uniform vec3 moon_col: source_color = vec3(1.0);
uniform float moon_size: hint_range(0.01, 1.0) = 1.0;
uniform float moon_crescent_offset: hint_range(-1.0, 1.0) = 0.5;

// Clouds Stuff
uniform sampler2D clouds_texture: filter_linear_mipmap;
uniform sampler2D clouds_distort_texture: filter_linear_mipmap;
uniform sampler2D clouds_noise_texture: filter_linear_mipmap;
uniform vec3 clouds_main_color: source_color = vec3(1.0, 1.0, 1.0);
uniform vec3 clouds_edge_color: source_color = vec3(1.0, 1.0, 1.0);
uniform float clouds_speed: hint_range(0.0, 0.1, 0.01);
uniform float clouds_scale: hint_range(0.0, 1.0, 0.01);
uniform float clouds_cutoff: hint_range(0.0, 1.0, 0.01);
uniform float clouds_fuzziness: hint_range(0.0, 1.0, 0.01);

// Star Stuff
uniform sampler2D stars_texture: filter_linear_mipmap;
uniform float stars_speed: hint_range(0.0, 0.1);

void sky() {
   vec2 sky_uv = EYEDIR.xz / EYEDIR.y;

   float day_amount = clamp(LIGHT0_DIRECTION.y, 0.0, 1.0);
   vec3 gradient_day = mix(day_bottom_color, day_top_color, clamp(EYEDIR.y, 0.0, 1.0)) * day_amount;

   float sunset_amount = clamp(1.0 – abs(LIGHT0_DIRECTION.y), 0.0, 1.0);
   vec3 gradient_sunset = mix(sunset_bottom_color, sunset_top_color, clamp(EYEDIR.y, 0.0, 1.0)) * sunset_amount;

   float night_amount = clamp(-LIGHT0_DIRECTION.y, 0.0, 1.0);
   vec3 gradient_night = mix(night_bottom_color, night_top_color, clamp(EYEDIR.y, 0.0, 1.0)) * night_amount;

   vec3 sky_gradients = gradient_day + gradient_sunset + gradient_night;

   float horizon = 1.0 – abs(EYEDIR.y + horizon_falloff);

   vec3 horizon_glow_amount_day = clamp(horizon * clamp(LIGHT0_DIRECTION.y, 0.0, 1.0), 0.0, 1.0) * horizon_color_day;
   vec3 horizon_glow_amount_sunset = clamp(horizon * clamp(1.0 – abs(LIGHT0_DIRECTION.y), 0.0, 1.0), 0.0, 1.0) * horizon_color_sunset;
   vec3 horizon_glow_night = clamp(horizon * clamp(-LIGHT0_DIRECTION.y, 0.0, 1.0), 0.0, 1.0) * horizon_color_night;

   vec3 horizon_glow = horizon_glow_amount_day + horizon_glow_amount_sunset + horizon_glow_night;

   float sun_distance = distance(EYEDIR.xyz, LIGHT0_DIRECTION);
   float sun_power = 1.0 – clamp(sun_distance / sun_size, 0.0, 1.0);
   float sun_disc = clamp(sun_power / sun_blur, sun_power, 1.0);
   vec4 sun = vec4(sun_col, sun_disc);

   float moon_distance = distance(EYEDIR.xyz, -LIGHT0_DIRECTION);
   float moon_power = 1.0 – clamp(moon_distance / moon_size, 0.0, 1.0);
   float moon_disc = clamp(moon_power / 0.01, moon_power, 1.0);

   float moon_crescent_distance = distance(vec3(EYEDIR.x + moon_crescent_offset, EYEDIR.yz), -LIGHT0_DIRECTION);
   float moon_crescent_power = 1.0 – clamp(moon_crescent_distance / moon_size, 0.0, 1.0);
   float moon_crescent_disc = clamp(moon_crescent_power / 0.01, moon_crescent_power, 1.0);

   vec4 moon = vec4(moon_col, clamp(moon_disc – moon_crescent_disc, 0.0, 1.0));

   float clouds_movement = TIME * clouds_speed * 0.5;
   float clouds_base_noise = texture(clouds_texture, (sky_uv + clouds_movement ) * clouds_scale).r;
   float noise1 = texture(clouds_distort_texture, (sky_uv + clouds_base_noise + (clouds_movement * 0.75)) * clouds_scale).r;
   float noise2 = texture(clouds_noise_texture, (sky_uv + noise1 + (clouds_movement * 0.25)) * clouds_scale).r;

   float clouds_noise_value = clamp(noise1 * noise2, 0.0, 1.0) * clamp(EYEDIR.y, 0.0, 1.0);

   float clouds_value = clamp(smoothstep(clouds_cutoff, clouds_cutoff + clouds_fuzziness, clouds_noise_value), 0.0, 1.0) * clamp(LIGHT0_DIRECTION.y, 0.1, 1.0);

   vec3 clouds = mix(clouds_edge_color, clouds_main_color , clouds_value) * clouds_value;

   float clouds_negative = 1.0 – clouds_value;

   vec3 stars = texture(stars_texture, sky_uv + (stars_speed * TIME)).rgb;
   stars *= clamp(-LIGHT0_DIRECTION.y, 0.0, 1.0);

   vec4 sun_moon = vec4(sun.rgb * sun.a + moon.rgb * moon.a, sun.a + moon.a);
   sun_moon = clamp(sun_moon * clouds_negative, 0.0, 1.0);

   sky_gradients = clamp(sky_gradients * clouds_negative, 0.0, 1.0);

   vec3 sky = mix(horizon_glow + sky_gradients + stars + clouds, sun_moon.rgb, sun_moon.a);

   COLOR = sky;
}

1
Reply
Firezac
Firezac
1 year ago
Reply to  Yvie

I tried your shader, but it’s showing this error:
error(50): Tokenizer: Unknown character #8211: ‘-‘

0
Reply
Yvie
Yvie
1 year ago
Reply to  Firezac

Oops, I did not put it into a code tag and now all the dashes are fucked up. Here’s the (fixed) version:

Code

shader_type sky;
render_mode use_half_res_pass;


// Sky Gradients
uniform vec3 day_bottom_color : source_color = vec3(1.0, 1.0, 1.0);
uniform vec3 day_top_color : source_color = vec3(1.0, 1.0, 1.0);

uniform vec3 sunset_bottom_color : source_color = vec3(0.0, 0.0, 0.0);
uniform vec3 sunset_top_color : source_color = vec3(0.0, 0.0, 0.0);

uniform vec3 night_bottom_color : source_color = vec3(0.0, 0.0, 0.0);
uniform vec3 night_top_color : source_color = vec3(0.0, 0.0, 0.0);


// Horizon Stuff
uniform vec3 horizon_color_day : source_color = vec3(1.0, 1.0, 1.0);
uniform vec3 horizon_color_sunset : source_color = vec3(1.0, 1.0, 1.0);
uniform vec3 horizon_color_night : source_color = vec3(0.0, 0.8, 1.0);
uniform float horizon_falloff: hint_range(0.0, 1.0, 0.1);


// Sun Stuff
uniform vec3 sun_col: source_color = vec3(1.0);
uniform float sun_size: hint_range(0.01, 1.0) = 1.0;
uniform float sun_blur: hint_range(0.01, 1.0) = 0.01;


// Moon Stuff
uniform vec3 moon_col: source_color = vec3(1.0);
uniform float moon_size: hint_range(0.01, 1.0) = 1.0;
uniform float moon_crescent_offset: hint_range(-1.0, 1.0) = 0.5;


// Clouds Stuff
uniform sampler2D clouds_texture: filter_linear_mipmap;
uniform sampler2D clouds_distort_texture: filter_linear_mipmap;
uniform sampler2D clouds_noise_texture: filter_linear_mipmap;
uniform vec3 clouds_main_color: source_color = vec3(1.0, 1.0, 1.0);
uniform vec3 clouds_edge_color: source_color = vec3(1.0, 1.0, 1.0);
uniform float clouds_speed: hint_range(0.0, 0.1, 0.01);
uniform float clouds_scale: hint_range(0.0, 1.0, 0.01);
uniform float clouds_cutoff: hint_range(0.0, 1.0, 0.01);
uniform float clouds_fuzziness: hint_range(0.0, 1.0, 0.01);


// Star Stuff
uniform sampler2D stars_texture: filter_linear_mipmap;
uniform float stars_speed: hint_range(0.0, 0.1);





void sky() {
    vec2 sky_uv = EYEDIR.xz / EYEDIR.y;
    
    
    float day_amount = clamp(LIGHT0_DIRECTION.y, 0.0, 1.0);
    vec3 gradient_day = mix(day_bottom_color, day_top_color, clamp(EYEDIR.y, 0.0, 1.0)) * day_amount;
    
    float sunset_amount = clamp(1.0 - abs(LIGHT0_DIRECTION.y), 0.0, 1.0);
    vec3 gradient_sunset = mix(sunset_bottom_color, sunset_top_color, clamp(EYEDIR.y, 0.0, 1.0)) * sunset_amount;
    
    float night_amount = clamp(-LIGHT0_DIRECTION.y, 0.0, 1.0);
    vec3 gradient_night = mix(night_bottom_color, night_top_color, clamp(EYEDIR.y, 0.0, 1.0)) * night_amount;
    
    
    vec3 sky_gradients = gradient_day + gradient_sunset + gradient_night;
    
    
    
    
    float horizon = 1.0 - abs(EYEDIR.y + horizon_falloff);
    
    vec3 horizon_glow_amount_day = clamp(horizon * clamp(LIGHT0_DIRECTION.y, 0.0, 1.0), 0.0, 1.0) * horizon_color_day;
    vec3 horizon_glow_amount_sunset = clamp(horizon * clamp(1.0 - abs(LIGHT0_DIRECTION.y), 0.0, 1.0), 0.0, 1.0) * horizon_color_sunset;
    vec3 horizon_glow_night = clamp(horizon * clamp(-LIGHT0_DIRECTION.y, 0.0, 1.0), 0.0, 1.0) * horizon_color_night;
    
    vec3 horizon_glow = horizon_glow_amount_day + horizon_glow_amount_sunset + horizon_glow_night;
    
    
    
    
    
    float sun_distance = distance(EYEDIR.xyz, LIGHT0_DIRECTION);
    float sun_power = 1.0 - clamp(sun_distance / sun_size, 0.0, 1.0);
    float sun_disc = clamp(sun_power / sun_blur, sun_power, 1.0);
    vec4 sun = vec4(sun_col, sun_disc);
    
    
    
    float moon_distance = distance(EYEDIR.xyz, -LIGHT0_DIRECTION);
    float moon_power = 1.0 - clamp(moon_distance / moon_size, 0.0, 1.0);
    float moon_disc = clamp(moon_power / 0.01, moon_power, 1.0);
    
    float moon_crescent_distance = distance(vec3(EYEDIR.x + moon_crescent_offset, EYEDIR.yz), -LIGHT0_DIRECTION);
    float moon_crescent_power = 1.0 - clamp(moon_crescent_distance / moon_size, 0.0, 1.0);
    float moon_crescent_disc = clamp(moon_crescent_power / 0.01, moon_crescent_power, 1.0);
    
    vec4 moon = vec4(moon_col, clamp(moon_disc - moon_crescent_disc, 0.0, 1.0));
    
    
    
    
    
    float clouds_movement = TIME * clouds_speed * 0.5;
    float clouds_base_noise = texture(clouds_texture, (sky_uv + clouds_movement ) * clouds_scale).r;
    float noise1 = texture(clouds_distort_texture, (sky_uv + clouds_base_noise + (clouds_movement * 0.75)) * clouds_scale).r;
    float noise2 = texture(clouds_noise_texture, (sky_uv + noise1 + (clouds_movement * 0.25)) * clouds_scale).r;
    
    float clouds_noise_value = clamp(noise1 * noise2, 0.0, 1.0) * clamp(EYEDIR.y, 0.0, 1.0);
    
    float clouds_value = clamp(smoothstep(clouds_cutoff, clouds_cutoff + clouds_fuzziness, clouds_noise_value), 0.0, 1.0) * clamp(LIGHT0_DIRECTION.y, 0.1, 1.0);
    
    
    vec3 clouds = mix(clouds_edge_color,  clouds_main_color , clouds_value) * clouds_value;
    
    float clouds_negative = 1.0 - clouds_value;
    
    
    vec3 stars = texture(stars_texture, sky_uv + (stars_speed * TIME)).rgb;
    stars *= clamp(-LIGHT0_DIRECTION.y, 0.0, 1.0);
    
    
    
    vec4 sun_moon = vec4(sun.rgb * sun.a + moon.rgb * moon.a, sun.a + moon.a);
    sun_moon = clamp(sun_moon * clouds_negative, 0.0, 1.0);
    
    sky_gradients = clamp(sky_gradients * clouds_negative, 0.0, 1.0);
    
    
    
    vec3 sky = mix(horizon_glow + sky_gradients + stars + clouds, sun_moon.rgb, sun_moon.a);
    
    
    
    COLOR = sky;
}

2
Reply
gracie
gracie
1 year ago
Reply to  Yvie

When I use your code the transition from night to sun rise is white on screen ???

0
Reply
AncientStoneStudios
AncientStoneStudios
1 year ago
Reply to  Yvie

the night is pink with this code

0
Reply
AncientStoneStudios
AncientStoneStudios
1 year ago
Reply to  AncientStoneStudios 
I fixed it by removing stars in the vec3 sky = mix(horizon_glow + sky_gradients + stars + clouds, sun_moon.rgb, sun_moon.a);
2
Reply
Firezac
Firezac
1 year ago

That’s an awesome shader!!!! I was trying to make some changes, but I am a real newbie at the shaders script. Can you explain two things?
First: I was trying to texture the moon, but it is causing conflicts due to the time of the variable. Can you explain to me how can I do it?
Second: I want the stars to appear earlier than when the moon is almost completely at the top, can you show me, please, what var I need to modify to change the start point of the stars?
Thank you for the shader axilirate!!!!

5
Reply
AncientStoneStudios
AncientStoneStudios
1 year ago

all the colors are a different shade then what the should be, cant even make the night black just grey

0
Reply
NightMg
NightMg
1 year ago

Is there someone who has done it successfully? I’m a newbie, so I can’t add it to my project. Can someone share the file that contains this shader? Thx for helps!

0
Reply
sisi
sisi
1 year ago

how to apply your shader? it doesn’t work at all.

0
Reply
Liam
Liam
10 months ago

Odd thing, I can’t get the night sky totally black

0
Reply
canci
canci
6 months ago

Can you share the textures too? How can I reach those textures?

0
Reply