Dissolve
Make a surface burn away or materialize in irregular blotches by comparing noise with a moving threshold.
Cards
One live example to tweak, learn and copy.
How it works
A dissolve hides a surface one patch at a time instead of fading all of it at once. Every pixel gets a fixed random
value from a noiseA smooth pseudo-random function of position. Random values or gradients sit on a grid and are blended in between, so nearby points get similar values and the result has no visible pattern. Noise A smooth pseudo-random function of position. Random values or gradients sit on a grid and are blended in between, so nearby points get similar values and the result has no visible pattern.
Why it is cheap and why it reads well
The whole effect is one noise lookup and one comparison per pixel, and the threshold is the only thing that changes
over time. Animating it is the job of whatever owns the object: a script tweens the threshold when an enemy dies, a
timeline drives it in a cutscene, or time feeds it directly for a looping demo. The noise never moves, so the
blotches grow in place, which the eye reads as one material being consumed rather than a pattern sliding over it.
The comparison also gives an edge for free. The pixels whose noise is only a little above the threshold are the ones
that go next, so a smoothstepA soft threshold. It is 0 below the first edge, 1 above the second, and follows an S-shaped curve with flat ends in between. Smoothstep A soft threshold. It is 0 below the first edge, 1 above the second, and follows an S-shaped curve with flat ends in between.t = clamp((x − e0) / (e1 − e0), 0, 1); s = t² (3 − 2t)
Hiding pixels
How the gone pixels disappear depends on the stage. On a 3D surface the shader returns an alpha of 0 or 1 and the
material uses alpha clipDiscarding every fragment whose alpha is below a threshold and drawing the rest fully opaque. The surface stays in the opaque pass, writes depth and needs no sorting, but its edges are hard. Alpha clip Discarding every fragment whose alpha is below a threshold and drawing the rest fully opaque. The surface stays in the opaque pass, writes depth and needs no sorting, but its edges are hard.if (alpha < threshold) discard;, which discards the fragment instead of blending it, so the
surface keeps writing depth and needs no sorting. On a sprite the 2D renderer already blends with alpha, so the shader
can return a soft alpha and fade the edge as well as cut it.
Choosing the noise
The size of the blotches is the noise’s scale. Value noise, built from the hash at the grid corners, is the cheapest and is enough here because the edge hides its blocky grid; gradient noise or a few octaves of fBm give more ragged, natural edges for a little more math. A noise texture works as well, and a hand-painted one lets an artist decide where the hole opens first.
Further reading
- step (opens in a new tab)Reference
- smoothstep (opens in a new tab)Reference
- Shaping functions (opens in a new tab)Book
- Uniforms (opens in a new tab)Book
- Window: requestAnimationFrame() method (opens in a new tab)Docs
- The OpenGL ES Shading Language, version 3.00 (opens in a new tab)Docs
- Noise (opens in a new tab)Book
- Value noise (opens in a new tab)Reference
- Value noise derivatives (opens in a new tab)Article
- Standard Material 3D and ORM Material 3D (opens in a new tab)Docs
- Spatial shaders (opens in a new tab)Docs
- Blending (opens in a new tab)Article