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
animated, burn, dissolve
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 KingToot

Dithering / Screen Door Transparency

Radar Blip Ring

Grayscale

Related shaders

2D dissolve with burn edge

3D burn dissolve

Burn Sprite

Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments