Distortion/Shockwave Shader

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

# Edit – 4.1.1

0. Godot 4.1.1 update

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. 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.

Peace!!!

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;

uniform sampler2D SCREEN_TEXTURE : hint_screen_texture, filter_linear_mipmap;

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);
}
Tags
aberration, distortion, godot_4_1_1, 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

VHS Shader/Distortion

Distortion bubble

Subscribe
Notify of
guest

7 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
dOob
dOob
1 year 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
1 year ago
Reply to  dOob

https://godotshaders.com/shader/positioned-shockwave/

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)

p.tay.a
p.tay.a
1 year ago

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

tuanisapps
tuanisapps
1 year ago

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

billy
billy
1 year 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….

savovuk
savovuk
5 months ago

Thanks for this awesome shader. Works really great. 😄

Tom
Tom
2 months ago

In case anyone else runs into an issue of the center not where you expect. Like the description says (but wasn’t initially clear to me), you need to scale the center but its not enough to just normalize them between 0 and 1. Basically just apply the same transformation that is done to scaled_st but to your center coordinate:

vec2 center_corr = (center -vec2(0.0, 0.5)) / vec2(1.0, aspect_ratio) + vec2(0,0.5);

Replace any use of center in the shader with this and it worked for me.

Last edited 2 months ago by Tom