Vignette with reduced banding artifacts

Simple vignette shader with dithering to reduce banding artifacts. Also supports custom colors.

Shader code
shader_type canvas_item;

uniform float inner_radius = 0.1;
uniform float outer_radius = 1;
uniform float vignette_strength = 1.0;
uniform float dither_strength = 0.03;
uniform vec4 vignette_color: source_color;


void fragment() {
	float dist = distance(UV, vec2(0.5));
	
	float vignette = smoothstep(inner_radius, outer_radius, dist) * vignette_strength;
	float dither = fract(sin(dot(UV, vec2(12.9898, 78.233))) * 43758.5453123) * dither_strength;
	
	COLOR = vec4(vignette_color.rgb, vignette + dither);
}
Tags
vignette
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 Fire Effect with colour banding

Aberration Vignette – Phasmophobia effect

Chromatic Aberration Vignette

Subscribe
Notify of
guest

0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments