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;
}