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;
}
If you’re like me and this needs to just be simply rendered to the viewport, make the ColorRect a child of a CanvasLayer