The Dissolve Effect
Build a noise-driven dissolve effect with a glowing edge. It gives you a practical way to explore the five HLSL functions and explain how they combine in a material.
On this page
The brief Constraints Acceptance criteria Suggested approach Stretch goals Breakdown template§the brief
Build a dissolve material: driven by a single Progress value from 0 to 1, the surface should erode away along the contours of a noise texture, with a bright glowing band at the dissolve frontier. Slide Progress and the object burns away like paper.
Keep the first version small enough that you can explain every node. Once it works, compare the result under different lighting and test the settings an artist would change.
§constraints
- One driving parameter. A single scalar Progress (0-1) controls the whole effect. No manual keying of five values.
- The edge is emissive, not just coloured. The glowing band should read as light - push it past 1.0 so bloom catches it.
- Understand each node. Be able to explain what it contributes and why you chose it.
- Tileable, seamless noise. No visible repeat seam in the dissolve pattern.
§acceptance criteria
- At Progress = 0 the object is whole; at 1 it's fully gone.
- The dissolve follows the noise pattern - it eats holes in the middle, it doesn't just wipe top-to-bottom.
- A visible glowing edge tracks the boundary as it moves.
- No hard seam in the noise across the surface.
- The edge colour and width are adjustable without rewiring the graph.
- You can talk through the whole graph, node by node, without notes.
§suggested approach
- Get a noise value on the surface. Sample a seamless noise texture (the site's noise generator makes one). This gives you a 0-1 value per pixel.
- Cut with a step. step(noise, Progress) gives you 1 where the surface should be gone. Wire that into opacity mask and watch it dissolve. That's the core effect already.
- Find the frontier. A thin band where noise is near Progress - a smoothstep around the threshold - is your glowing edge.
- Make the edge glow. Multiply the edge band by a colour, overdrive it past 1.0, feed it to emissive.
- Expose the knobs - edge colour, edge width - as parameters so it's art-directable.
HLSL From Zero uses the same functions to explain a dissolve effect. Compare the code with your node graph and trace how the inputs reach the final mask and emissive output.
§stretch goals
- Directional dissolve: bias the effect so it burns from one side, by adding a gradient to the noise before the threshold.
- Ember particles spawned at the dissolve edge (if your engine's VFX system is handy) - now it's a full effect, not just a material.
- A "materialise" mode - run it in reverse so the object assembles instead of dissolves. One 1 - away.
- World-space noise so the pattern stays put as the object moves, instead of swimming with the UVs.
§breakdown template
Lead with a short clip showing Progress moving from 0 to 1. Follow it with the graph and an explanation of the mask, edge, and exposed controls.
## Dissolve Shader **Effect:** [looping GIF of Progress sweeping 0 -> 1, edge glowing] **How it works, in one breath:** a seamless noise texture is thresholded against a Progress value with step() for the cutout, and a smoothstep band around that threshold drives an over-bright emissive edge. **The graph:** [annotated screenshot - label the noise, the step, the smoothstep edge, the emissive multiply] **The dead end:** [e.g. "first attempt wiped top-to-bottom because I used UV.y instead of noise - here's what that looked like"] **Knobs exposed:** edge colour, edge width, progress. **What I'd add:** [embers / materialize mode / world-space noise]
Practise giving a short explanation of the effect. It should make sense to someone who hasn't seen the graph before.