Unity Tutorial: Dissolve Shader (Part 1)
Create a simple dissolve shader with Amplify Shader Editor (or Shader Graph).
Intro
Burn-dissolve effects/shaders are a staple of video games,
and they all fundamentally do the same thing:
Clip/cutoff/threshold some smooth noise texture (or function) as an alpha mask.
You can layer/extract several masks from the same noise for different effects.
Core/Algorithm/Implementation
Virtually every dissolve shader uses the same basic underlying setup:
Noise → Step → Alpha.
Let’s break down each part and what it means.
1. Noise
You will need to use some kind of smooth noise texture, like Perlin or Simplex noise. This ‘texture’ can be generated with a noise function in the shader, which has the advantage of being more flexible at the cost of some performance.
// 1. Sample some noise.
float noise = tex2D(noiseTexture, uv); // Texture-based.
// OR...
float noise = noiseFunction(uv); // Procedural, function-based.
2. Step/Cutoff
The critical part where the actual binary alpha ‘clip’ mask is generated, as simple as using the step
function/node with a value between [0.0, 1.0] and your noise.
// 2. Step noise to produce binary mask (0 or 1).
// 0.0 when < threshold, 1.0 when >= threshold.
float alphaMask = step(noiseCutoff, noise);
3. Alpha
The final output alpha value is then simply textureAlpha * alphaMask
.
// 3. Output alpha = texture alpha * noise mask.
float4 textureColour = tex2D(_MainTex, uv);
float outputAlpha = textureColour.a * alphaMask;
// Output RGB = texture RGB.
float4 outputColour = float4(textureColour.rgb, outputAlpha);
Conclusion
It’s a really simple shader, with the full node graph below.
Stay tuned!
In the next part, we’ll add a glowing outline and animate our UVs.
You can follow me on Twitter/X for more (@TheMirzaBeig)!