Blur Vignette (Post Processing / ColorRect) [Godot 4.2.1]

This shader creates a Blur Vignette on the screen in real time using a ColorRect on the Camera3D.

The main goal is to create a vignette effect with a subtle blur edge, creating a focused center and a gradual transition to the edges of the screen.

HOW TO
1. Add a ColorRect to your Camera
2. Set the Material of the ColorRect to a ShaderMaterial and add a Shader file
3. Paste the Code below into the Shader file and you should be good to go!

Tip: Don’t forget to Anchor to full stretch! 👍

Shader code
shader_type canvas_item;

uniform sampler2D screen_texture: hint_screen_texture, repeat_disable, filter_linear_mipmap;
uniform float blur_radius : hint_range(0, 1) = 0.2; // Radius of the blur effect
uniform float blur_amount : hint_range(0, 5) = 1.0; // Strength of the blur effect
uniform float blur_inner : hint_range(0, 1) = 0.6; // Inner edge of the blur effect
uniform float blur_outer : hint_range(0, 1) = 0.66; // Outer edge of the blur effect

void fragment() {
    // Original color of the pixel from the screen
    vec4 pixelColor = texture(screen_texture, UV);
    
    // Color with blur effect from the screen
    vec4 blurColor = textureLod(screen_texture, SCREEN_UV, blur_amount);

    // Calculate distance from the center of the screen
    float distance = length(UV - vec2(0.5, 0.5));

    // Apply smoothstep function to control transition between areas
    float blur = smoothstep(blur_inner - blur_radius, blur_outer, distance);

    // Mix colors of the blur effect and the original color based on the smoothstep value
    pixelColor.rgb = mix(blurColor.rgb, COLOR.rgb, -blur);

    // Set the alpha component of the blur effect to the smoothstep value
    blurColor.a = blur;

    // Mix colors of the blur effect with white for an additional effect
    blurColor.rgb = mix(blurColor.rgb, vec3(1.0), 0.1);

    // Set the final color to the modified color of the blur effect
    COLOR = blurColor;
}
Tags
blur, Godot 4.2, Post processing, vignette
The shader code and all code snippets in this post are under MIT license and can be used freely. Images and videos, and assets depicted in those, do not fall under this license. For more info, see our License terms.

Related shaders

Vignette with changeable blur size

Vignette Shader for godot 4 :)

Post-Processing, Grain PP effect and Palette Color

Subscribe
Notify of
guest

1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Sas
Sas
1 month ago

Works perfectly! Also really appreciate the comments.