Dynamic Dissolve Shader
We build it together: set up the stage, connect three tiny blocks, then watch the dissolve come alive.
This example uses mx_noise_float、 oscTriangle、 step、 time、 uv TSL nodes.
Set up the stage
Create a 3D canvas, place the camera a bit back, switch to WebGPU, and add two lights. A dark background makes the glow pop.
- Canvas = surface; camera = position and FOV.
- Create WebGPURenderer in gl and await init().
- Use background #222 for a calmer look.
Create the material once
Wrap the material in useMemo to avoid rebuilding it every frame. Turn on transparent and pair with alphaTest for clean edges.
- alphaTest=0.5: like a gate. < 0.5 is transparent; ≥ 0.5 is opaque.
- For softer edges, lower alphaTest or switch to a smooth threshold.
Three blocks to form the dissolve
- Noise pattern: feed uv() into mx_noise_float. uv().mul(2.0) acts like zoom. Higher value = finer grain.
- Dynamic threshold: oscTriangle(time.mul(0.15)) turns time into a triangle wave. Smaller number = slower.
- Threshold cut: step(threshold, noise) keeps areas above the bar and hides those below, giving a crisp black‑white mask.
- Hook to material: material.opacityNode = finalAlpha. Black disappears, white stays.
Fine‑tune the feel?
- Bigger chunks: decrease the value in uv().mul(2.0). Finer details: increase it.
- Slower animation: reduce the factor in time.mul(0.15), e.g., 0.1.
- Softer edge: lower alphaTest or use a smooth threshold.
Swap geometry. Effect stays
The material is decoupled from geometry. Replace the torus knot with a box-the dissolve logic stays the same.