Cloudy skies

Make a CanvasItem, like a ColorRect or a Sprite, into an animated cloudy sky. The clouds will slowly move and change shape.

This shader is made and contributed by, Tsar333.

Shader code
// cloudy skies shader
// inspired from shadertoy shader made by Drift (https://www.shadertoy.com/view/4tdSWr) 

shader_type canvas_item;

uniform float cloudscale = 1.1;
uniform float speed = 0.01;
uniform float clouddark = 0.5;
uniform float cloudlight = 0.3;
uniform float cloudcover = 0.2;
uniform float cloudalpha = 8.0;
uniform float skytint = 0.5;
uniform vec3 skycolour1 = vec3(0.2, 0.4, 0.6);
uniform vec3 skycolour2 = vec3(0.4, 0.7, 1.0);
uniform mat2 m = mat2(vec2(1.6,1.2),vec2(-1.2,1.6)); // changement

// functions

vec2 hash( vec2 p ) {
                p = vec2(dot(p,vec2(127.1,311.7)), dot(p,vec2(269.5,183.3)));
                return -1.0 + 2.0*fract(sin(p)*43758.5453123);
}

float noise( in vec2 p ) {
    float K1 = 0.366025404; // (sqrt(3)-1)/2;
    float K2 = 0.211324865; // (3-sqrt(3))/6;
                vec2 i = floor(p + (p.x+p.y)*K1); 
    vec2 a = p - i + (i.x+i.y)*K2;
    vec2 o = (a.x>a.y) ? vec2(1.0,0.0) : vec2(0.0,1.0); //vec2 of = 0.5 + 0.5*vec2(sign(a.x-a.y), sign(a.y-a.x));
    vec2 b = a - o + K2;
                vec2 c = a - 1.0 + 2.0*K2;
    vec3 h = max(0.5-vec3(dot(a,a), dot(b,b), dot(c,c) ), 0.0 );
                vec3 n = h*h*h*h*vec3( dot(a,hash(i+0.0)), dot(b,hash(i+o)), dot(c,hash(i+1.0)));
    return dot(n, vec3(70.0));       
}

float fbm(vec2 n) {
                float total = 0.0, amplitude = 0.1;
                for (int i = 0; i < 7; i++) {
                               total += noise(n) * amplitude;
                               n = m * n;
                               amplitude *= 0.4;
                }
                return total;
}

// fragment shader

void fragment() {
vec2 res = 1.0 / SCREEN_PIXEL_SIZE;
vec2 p = FRAGCOORD.xy / res.xy; // changement
                vec2 uv = p*vec2(res.x/res.y,1.0);    // changement
    float time = TIME * speed ;
    float q = fbm(uv * cloudscale * 0.5);
    
    //ridged noise shape
                float r = 0.0;
                uv *= cloudscale;
    uv += q - time;
    float weight = 0.8;
    for (int i=0; i<8; i++){
                               r += abs(weight*noise( uv ));
        uv = m*uv + time;
                               weight *= 0.7;
    }
    
    //noise shape
                float f = 0.0;
    uv = p*vec2(res.x/res.y,1.0); // changement
                uv *= cloudscale;
    uv += q - time;
    weight = 0.7;
    for (int i=0; i<8; i++){
                               f += weight*noise( uv );
        uv = m*uv + time;
                               weight *= 0.6;
    }
    
    f *= r + f;
    
    //noise colour
    float c = 0.0;
    time = TIME * speed * 2.0;
    uv = p*vec2(res.x/res.y,1.0); // changement
                uv *= cloudscale*2.0;
    uv += q - time;
    weight = 0.4;
    for (int i=0; i<7; i++){
                               c += weight*noise( uv );
        uv = m*uv + time;
                               weight *= 0.6;
    }
    
    //noise ridge colour
    float c1 = 0.0;
    time = TIME * speed * 3.0;
    uv = p*vec2(res.x/res.y,1.0);
                uv *= cloudscale*3.0;
    uv += q - time;
    weight = 0.4;
    for (int i=0; i<7; i++){
                               c1 += abs(weight*noise( uv ));
        uv = m*uv + time;
                               weight *= 0.6;
    }
                
    c += c1;
    
    vec3 skycolour = mix(skycolour2, skycolour1, p.y);
    vec3 cloudcolour = vec3(1.1, 1.1, 0.9) * clamp((clouddark + cloudlight*c), 0.0, 1.0);
   
    f = cloudcover + cloudalpha*f*r;
    
    vec3 result = mix(skycolour, clamp(skytint * skycolour + cloudcolour, 0.0, 1.0), clamp(f + c, 0.0, 1.0));
    
    COLOR.rgb = vec3(result); 
}
Tags
environment, sky, weather
This shader is a port from an existing Shadertoy project. Shadertoy shaders are by default protected under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported (CC BY-NC-SA 3.0) license unless anything else has been stated by the author. For more info, see our License terms.

More from godotshaders

Fire effect

Invert color

2D fire

Related shaders

Stylized Cloudy Sky (v2)

Subscribe
Notify of
guest

3 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
megazar21
megazar21
3 years ago

Any way to make the blue background transparent?

Tomo
Tomo
10 months ago

new to this
ive input the lines where they’re supposed to be, but there is only black
i know there is another step but i dont know what it is?