2D fog overlay
A shader that can create a fog overlay, perfect for 2D top-down games.
First create a ParallaxBackground node and set its layer
to something higher than 1, than add a ParallaxLayer node and set mirroring
to the sime size as the viewport, then add a ColorRect node and set its size
to be the same as the viewport as well. Add a ShaderMaterial that uses this shader to that ColorRect to show the fog.
The same shader can also be used for any other node if you want something to look like smoke or fog.
Shader code
shader_type canvas_item;
//render_mode unshaded; // optional
// Noise texture
uniform sampler2D noise_texture: repeat_enable, filter_nearest;
// Fog density
uniform float density: hint_range(0.0, 1.0) = 0.25;
// Fog speed
uniform vec2 speed = vec2(0.02, 0.01);
// Called for every pixel the material is visible on
void fragment() {
// Make the fog slowly move
vec2 uv = UV + speed * TIME;
// Sample the noise texture
float noise = texture(noise_texture, uv).r;
// Convert the noise from the (0.0, 1.0) range to the (-1.0, 1.0) range
// and clamp it between 0.0 and 1.0 again
float fog = clamp(noise * 2.0 - 1.0, 0.0, 1.0);
// Apply the fog effect
COLOR.a *= fog * density;
}
I follow the steps and only get a gray window. Not these clouds like in images. Do i need to add a noise texture?
figured it out you need to take the third picture as noise texture and play with the clamp(noise * X parameter to get different densities
see comment below