Burn/Dissolve

Dissolves a texture according to a give nosie pattern

Uniforms:
Percentage: How much of the texture is dissolved

Burn Texture: The noise texture determining how the main texture dissolves (see below)

3 copies of the following:
Layer_n: The color of the nth layer
Size_n: The size of the nth layer

Implementation:
The shader itself does not handle the animation, so you will need to use tweening (or another suitable method) to achieve that effect

Here is my implementation:

func set_percent(percentage: float) -> void:
	material.set_shader_parameter('percentage', percentage)

func tween_percent():
	tween = create_tween()
	tween.tween_method(set_percent, 0.0, 1.0, 0.5)

Noise:
This shader uses a noise texture for the dissolve effect. In my implementation, I used the FastNoiseLite library (included in Godot) with the following settings: (A demo project is coming as soon as I clean it up)

• Noise Type: Perlin
• Frequency: 0.032
• Fractal: FBM

You don’t need to copy these values exactly. I would suggest just playing around with different noise types and settings until you find something you like, which is what I did!

Shader code

shader_type canvas_item;

// --- Uniforms --- //
uniform float percentage: hint_range(0.0, 1.0, 0.01) = 1.0;

uniform sampler2D burn_texture;
group_uniforms layer_1;
uniform vec4 layer_1: source_color = vec4(0.2, 0.2, 0.2, 1.0);
uniform float size_1 = 0.05;
group_uniforms layer_2;
uniform vec4 layer_2: source_color = vec4(1.0, 0.0, 0.0, 1.0);
uniform float size_2 = 0.05;
group_uniforms layer_3;
uniform vec4 layer_3: source_color = vec4(1.0, 0.5, 0.0, 1.0);
uniform float size_3 = 0.05;

// --- Functions --- //
void fragment() {
	float noise = texture(burn_texture, UV).r * (1.0 - (size_1 + size_2 + size_3 + 0.01));

	COLOR.a -= step(percentage, noise);
	COLOR.rgb = mix(COLOR.rgb, layer_3.rgb, step(percentage, noise + size_1 + size_2 + size_3));
	COLOR.rgb = mix(COLOR.rgb, layer_2.rgb, step(percentage, noise + size_1 + size_2));
	COLOR.rgb = mix(COLOR.rgb, layer_1.rgb, step(percentage, noise + size_1));
}

Tags