Animated Camera Fog Overlay

This is a versatile animated fog shader that can be used in the world, or attached to a camera with the world position uniform set.

This shader is useful for cases where you don’t want to have to place down a massive color rect over your entire scene for fog. Instead, you can have the colorrect node as a child of your camera, and simulate world space coordinates by setting the pos value. That way, you just set it and forget it, without having to reconfigure every time you change your map.

Uniforms

  • Pos – Position coordinate for your camera (simulates worldspace movement if following your camera)
  • TextureResolution – The size of the noise textures (used for movement illusion)
  • Move Dir – A vector to denote the speed and direction of the noise
  • Noise – The first noise texture (background)
  • Noise 2 – The second noise texture (foreground)

Instructions

Create a ColorRect node and apply a material with this shader attached. Setup the two noise textures, and configure any other uniforms. If you want to use it in the world, then you’re ready to go. Otherwise if you want the overlay to follow the camera and simulate worldspace, add it as a child of your camera and add the following snippet to your process event:

color_rect_node.material.set_shader_parameter(“pos”, camera_global_position)

Shader code
shader_type canvas_item;

// Fog shader by Big Boy Games (Jesse)

uniform vec2 pos = vec2(0,0);
uniform float textureResolution = 1280.0;
uniform vec2 moveDir = vec2(1.0,0.0);
uniform sampler2D noise : repeat_enable;
uniform sampler2D noise2 : repeat_enable;

varying vec4 col;

float sin_range(float minNum, float maxNum, float t) {
	float halfRange = (maxNum - minNum)/2.0;
	return minNum + halfRange + sin(t) * halfRange;
}

void vertex() {
	col = COLOR;
}

void fragment() {
	vec2 offset = pos/textureResolution;
	
	vec4 col1 = texture(noise, UV + offset - (moveDir*TIME/100.0));
	vec4 col2 = texture(noise2, UV + offset - (moveDir*TIME/20.0));
	
	col1.a = sin_range(col1.a/3.0, col1.a, TIME);
	col2.a = sin_range(col2.a/1.1, col2.a, TIME*4.0);
	
	COLOR = mix(col1, col2, col2.a)*col;
}
Tags
Fog, overlay, worldspace
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 Big Boy Games

Tileset Worldspace Noise/Decal Overlay

Related shaders

PSX Style Camera Shader – Distance Fog, Dithering, Color Limiter, Noise

2D Fog Overlay

2D fog overlay

Subscribe
Notify of
guest

1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
DaGoob
DaGoob
23 days ago

If you’re like me and this needs to just be simply rendered to the viewport, make the ColorRect a child of a CanvasLayer