Hexagon Dissolve Shader

I was recently asked by a friend to reproduce a pretty cool effect used in the “Footlight Lane” level of Super Mario 3D World. In that level, there are platforms made up of tiny hexagons, and they materialize when you step on them, but otherwise they’re invisible. You can see the effect in the following video:

Description of the Technique

This effect is most likely achieved using a dissolve shader with some clever textures. A dissolve shader takes in a grayscale texture (usually Perlin noise), and cuts out the pixels in the darker parts of the texture. By sliding the threshold for what pixels to cut out, a dissolving effect is accomplished:

basicdissolve

If we change the texture to a hexagon pattern instead of Perlin noise, we can create the effect that little hexagons are materializing:

hexagondissolve

To make it look more like the effect in the Mario level, we first change the “albedo” (color) texture to look more like a glowing blue hexagon grid. The dissolve texture is the same as above.

hexagondissolvetexture

Since a dissolve shader clips out pixels, what happens is that the blue border gets clipped out first, so the hexagons appear to darken when they’re shrinking. This can be fixed by modifying the shader to draw a border around the dissolving parts, which gives the following final result:

hexagondissolveborder

The only thing that remains is to use the distance to the player as the cut-off threshold, and we’ve achieved the full effect: