Dither based transparency in Unreal Engine’s Material Editor

When optimizing TINY METAL for the Switch a technique I have started using is dithered transparency. To use dithering in Unreal Engine you can use the “DitherTemporalAA” node.

A couple years back Adrian Courreges’ graphics study of GTA V brought to my attention how dither could be useful even for modern games. In TINY METAL we use a dither based transparency for the area of movement and area of attack visuals.

The purpose of using dither instead of vanilla transparency is to eliminate pixel overdraw. You can see the net result in Unreal Engine’s per-pixel shader complexity buffer view below.

Overall this was a small but meaningful optimization. It ensures that our frame time does not jump when players begin moving units and half the screen files with movement ranges.

From experimentation dither based transparency works well for large consistent levels of transparency with animated fade-in and no movement. The fade-in being helpful because it gives TAA time to adjust. The no movement being vital because otherwise TAA smears the dither where it should not generating glitches. Attempting to use it with symbols or UI resulted in ugly 90’s era visual side-effects and I do not recommend using it.