2D dissolve with burn edge

It’s a modification of the 2D Simple dissolve shader to add a burn edge. 

How to setup

  1. Add the shader to any node with a texture (TextureRect, Sprite2D, etc..)
  2. Add a NoiseTexture2D
    1. Width and height of texture should be set depending on the size of your texture. A too small texture will result in a blurry output
    2. Setup the noise using the noise you prefer. Simplex Smooth works well
    3. Change the frequency to change the look of the dissolve effect. 
  3. Choose the burn size and burn color you want

How to use

  • Dissolve value: 0 (dissolved) to 1 (not dissolved)
  • Burn size: size of the burn edge (0.04 works well usually)
  • Burn color: color of the burn edge
  • Dissolve texture: noise texture used to create the dissolve effect
Shader code
shader_type canvas_item;

uniform sampler2D dissolve_texture : source_color;
uniform float dissolve_value : hint_range(0,1);
uniform float burn_size: hint_range(0.0, 1.0, 0.01);
uniform vec4 burn_color: source_color;

void fragment(){
    vec4 main_texture = texture(TEXTURE, UV);
    vec4 noise_texture = texture(dissolve_texture, UV);
	
	// This is needed to avoid keeping a small burn_color dot with dissolve being 0 or 1
	// is there another way to do it?
	float burn_size_step = burn_size * step(0.001, dissolve_value) * step(dissolve_value, 0.999);
	float threshold = smoothstep(noise_texture.x-burn_size_step, noise_texture.x, dissolve_value);
	float border = smoothstep(noise_texture.x, noise_texture.x + burn_size_step, dissolve_value);
	
	COLOR.a *= threshold;
	COLOR.rgb = mix(burn_color.rgb, main_texture.rgb, border);
}
Tags
2d, 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 mreliptik

Loading effect (color over grayscale)

2D Rotation deform

Tiled texture inside of mask

Related shaders

Burn/Dissolve

3D burn dissolve

Burn Sprite

Subscribe
Notify of
guest

1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
lvar999
lvar999
3 months ago

good