Transition Shader With Patterns
This gradient texture based transition effect for Godot 4.x gives you infinite possibilities for transitions.
If you want some presets you can find them here.
Features
- Directional, Radial, Circular and almost infinite shapes and directions are possible by simply changing the gradient texture!
- Customizable Colors.
- Easily change the width of the transition.
- Customize the pattern’s shape, size, feathering, and movement.
- A tool script to make tweaking the shader easier. Helps with animation.
- Works on all canvas item nodes! (so basically everything 2D)
- (Full Version): The full version has 12 pre-made transitions and some fitting noise textures included. Everything included in the full version is still possible to make without it. It’s more of a convenience version
Shader code
shader_type canvas_item;
uniform vec4 base_color : source_color;
uniform vec2 node_resolution;
uniform float factor : hint_range(0.0, 1.0, 0.01) = 0.54;
uniform float width = 0.4;
group_uniforms gradient;
uniform sampler2D gradient_texture;
uniform bool gradient_fixed = false;
group_uniforms shape;
uniform sampler2D shape_texture;
uniform float shape_tiling = 32.0;
uniform float shape_rotation = 0.0;
uniform vec2 shape_scroll = vec2(0.0);
uniform float shape_feathering : hint_range(0.0, 1.0, 0.01) = 0.00;
uniform float shape_treshold : hint_range(0.0, 2.0, 0.01) = 1.0;
float gradient(vec2 uv, vec2 fixed_uv, bool fixed){
float value = 0.0;
if(fixed){
value = texture(gradient_texture, fixed_uv).r;
} else {
value = texture(gradient_texture, uv).r;
}
return value;
}
vec2 rotate(vec2 uv, vec2 pivot, float angle)
{
mat2 rotation = mat2(vec2(sin(angle), -cos(angle)),
vec2(cos(angle), sin(angle)));
uv -= pivot;
uv = uv * rotation;
uv += pivot;
return uv;
}
void fragment() {
float progress = mix(-width, 1.0, factor);
float aspect = node_resolution.y / node_resolution.x;
vec2 aspect_uv = ((UV-vec2(0.0,0.5)) * vec2(1.0, aspect))+vec2(0.0,0.5);
float value = clamp((gradient(UV, aspect_uv, gradient_fixed) - progress) / (width), 0.0, 1.0);
vec2 tiled_uv = rotate(mod((aspect_uv + vec2(TIME)*shape_scroll) * shape_tiling, 1.0), vec2(0.5), radians(shape_rotation));
float shape_value = 1.0 - texture(shape_texture, tiled_uv).r;
shape_value = mix(shape_feathering * 0.5, 1.0 - shape_feathering * 0.5, shape_value);
float shaped_gradient = smoothstep(value - (shape_feathering * 0.5), value + (shape_feathering * 0.5), shape_treshold - shape_value);
COLOR.rgb = vec3(0.0);
COLOR.a = shaped_gradient;
}



