Distortion/Shockwave Shader
A basic distortion shader with chromatic abberation, with modular parameters.
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 abberation: hint_range(0.0, 1.0, 0.001) = 0.425;
uniform float radius: hint_range(0.0, 10.0, 0.01) = 1.0;
uniform float width: hint_range(0.0, 10.0, 0.01) = 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);
vec3 color = vec3(st.xy, 0);
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*abberation*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 = vec3(red.r, ori.g, blue.b);
COLOR = vec4(color, 1.0);
}
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?
How can I anchor the center of the shockwave to an specific node?
This one really needs an example on how to use it 🙁