2D Fog Overlay

A simple fog overlay shader using fractal brownian motion.

Apply to a material on a ColorRect that covers the part of your scene you want foggy. Add an OpenSimplexNoise texture for the noise itself, change the color to what you like, and adjust to taste.

Shader code
shader_type canvas_item;

// Amount of detail.
uniform int octaves = 4;

// Opacity of the output fog.
uniform float starting_amplitude: hint_range(0.0, 0.5) = 0.5;

// Rate of pattern within the fog.
uniform float starting_frequency = 1.0;

// Shift towards transparency (clamped) for sparser fog.
uniform float shift: hint_range(-1.0, 0.0) = -0.2;

// Direction and speed of travel.
uniform vec2 velocity = vec2(1.0, 1.0);

// Color of the fog.
uniform vec4 fog_color: hint_color = vec4(0.0, 0.0, 0.0, 1.0);

// Noise texture; OpenSimplexNoise is great, but any filtered texture is fine.
uniform sampler2D noise;

float rand(vec2 uv) {
	float amplitude = starting_amplitude;
	float frequency = starting_frequency;
	float output = 0.0;
	for (int i = 0; i < octaves; i++) {
		output += texture(noise, uv * frequency).x * amplitude;
		amplitude /= 2.0;
		frequency *= 2.0;
	}
	return clamp(output + shift, 0.0, 1.0);
}

void fragment() {
	vec2 motion = vec2(rand(UV + TIME * starting_frequency * velocity));
	COLOR = mix(vec4(0.0), fog_color, rand(UV + motion));
}
Tags
Fog, fractal brownian motion, fragment
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.

Related shaders

2D fog overlay

Simple noise overlay

Vortex overlay

Subscribe
Notify of
guest

4 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
BionicWave
BionicWave
2 years ago

This is a great little shader. I use it as a spatial shader with multiple layers behind each other, to achieve a parallax effect with different colors. Looks incredible.

ACB_Gamez
2 years ago

I can’t get this to work for some reason. Just overlays my texture on the screen. really dont understand what Im missing. bummer.

Tony
Tony
11 months ago

Has anyone else noticed this seems to have stopped working in 4.0? Works fine in the dev environment but when I run the game it seems to… hard to explain… fail to wrap? I have it moving from right to left and it seems to run out of noise texture on the right.

Luke
Luke
5 months ago
Reply to  Tony

I found out how, change the below to the following:

FROM

uniform sampler2D noise;

TO

uniform sampler2D noise : repeat_enable;