Distortion/Shockwave Shader

A basic distortion shader with chromatic abberation, with modular parameters.


1. Ok. First of all, it is a screen-space shader. If one wants to add this to specific node with texture, it has to be modified a bit. Like the screen-texture has to be changed to node-specific texture with sampler2d.

2. I created it in Godot 4 {alpha10}. You can download the demo-project here. godot_shaders_distortion

3. You have to animate the radius and center parameters from outside. Add this shader to a color-rect above all nodes as a canvas layer. The center property is in range 0 to 1. So you have to normalise the position u want the distortion to originate from.

4. If any problem happens, comment here; I will try to response accordingly.


Shader code
shader_type canvas_item;

uniform float strength: hint_range(0.0, 0.1, 0.001) = 0.08;
uniform vec2 center = vec2(0.5, 0.5);
uniform float radius: hint_range(0.0, 1.0, 0.001) = 0.25;

uniform float aberration: hint_range(0.0, 1.0, 0.001) = 0.425;
uniform float width: hint_range(0.0, 0.1, 0.0001) = 0.04;
uniform float feather: hint_range(0.0, 1.0, 0.001) = 0.135;

void fragment() {
	vec2 st = SCREEN_UV;
	float aspect_ratio = SCREEN_PIXEL_SIZE.y/SCREEN_PIXEL_SIZE.x;
	vec2 scaled_st = (st -vec2(0.0, 0.5)) / vec2(1.0, aspect_ratio) + vec2(0,0.5); 
	vec2 dist_center = scaled_st - center;
	float mask =  (1.0 - smoothstep(radius-feather, radius, length(dist_center))) * smoothstep(radius - width - feather, radius-width , length(dist_center));
	vec2 offset = normalize(dist_center)*strength*mask;
	vec2 biased_st = scaled_st - offset;
	vec2 abber_vec = offset*aberration*mask;
	vec2 final_st = st*(1.0-mask) + biased_st*mask;

	vec4 red = texture(SCREEN_TEXTURE, final_st + abber_vec);
	vec4 blue = texture(SCREEN_TEXTURE, final_st - abber_vec);
	vec4 ori = texture(SCREEN_TEXTURE, final_st);
	COLOR = vec4(red.r, ori.g, blue.b, 1.0);
aberration, distortion, lens, screen-space, shockwave
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

Positioned Shockwave

2D Radial Distortion – Fisheye/Barrel

Voronoi Synapse-ish Background Shader


Newest Most Voted
Inline Feedbacks
View all comments
9 months ago

Looks great, but how do we use it ?
I guessed that we need to animate the radius, but I have an issue with the position. Everytime I move the camera, the effect change position?

CC Cosmos
CC Cosmos
7 months ago
Reply to  dOob


Not sure how this one works with camera movement, but it should work fine.

The above shader can be animated by tween-ing the “size” shader parameter.

Ex. tween.interpolate_property(shockwave.material, “shader_param/size”, 0, 0.35, 0.25, Tween.TRANS_CUBIC, Tween.EASE_OUT)

9 months ago

How can I anchor the center of the shockwave to an specific node?

8 months ago

This one really needs an example on how to use it 🙁

8 months ago

no idea how to use this….it just makes my 2d texture disappear, and when I select “use parent material” there is no visible effect….