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;
}
Live Preview
Tags
canvas, pattern, transition
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.

More from binbun

Related shaders

guest

0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments