Transparency Best Practices
Avoid transparency and use opaque as much as possible
Use an opaque material whenever possible. On mobile platforms, usage of transparency is best avoided unless necessary. Rendering an object with transparency will always be more expensive than opaque, and having lots of these transparent object in game can/will affect performance, especially when these objects are rendered on top of one another many times.
This problem is known commonly as overdraw, when same pixel is drawn multiple times. The more layers of transparency we have, the most expensive the rendering becomes. For mobile platforms, overdraw can severely affect performance and we need to be mindful when building our level and try to keep overdraw to a minimum. Unreal Engine and Unity have a mode to visualize overdraw that can be used to track the severity of overdraw in a given scene.
If we have to use transparency in our game, profile the performance and compare between the different implementations.
There are different ways to do transparency in a shader, most commonly used are alpha test and alpha blend. There are different best practices that suggest one over the other, but the result will always vary from differing use cases, so our best practice is to always profile the performance difference between the two. For the mobile platform, one of the ways to do this is using Streamline, a software/tool developed by Arm to collect performance data of a device.
Alpha test implementation will make the object material look either 100% opaque or 100% transparent. We can also set threshold of the cutout for the mask. In Unreal Engine the term used is Masked blend mode, and Unity call this type of transparency Cutout.
Visually alpha blend allows the material to have range of transparency (and make an object look partially transparent), instead of completely opaque or transparent. Unreal Engine call this blend mode as Translucent, Unity use the term Transparent.
A comparison of alpha blend and alpha test can be seen in the image below. Alpha blend allows partial transparency while alpha test will result in sharp cutout.
- It is best to avoid cutout material (alpha test) unless it's really needed.
- Alpha test means that a material will be either 100% opaque or 100% transparent.
- Alpha test will generally not be recommended in mobile platform as it disables some of the optimization feature within the GPU. However, as always, we need to profile and compare the performance just to be sure.
- For a mobile platform, Unity recommend using alpha blend over alpha test https://docs.unity3d.com/Manual/MobileOptimisation.html. In practice we should always profile and compare performance between alpha test and alpha blend, as they are usually content dependent and need to be measured.
- In general, even alpha blend (all kinds of transparency) should also be avoided on mobile platform.
- If we need to have alpha blend in the game, try to make the coverage of the blend area small.
Alpha test transparency might work better for foliage
In a static view, both example foliage look perfectly fine, with alpha blend actually looking slightly better due to the soft edges compared with sharp cut in alpha test.
However, in motion, alpha blend looks wrong and the leaves doesn't seem to render in the correct order. Alpha test handle the transparency and the leaves order much better, but the edges will be harsher/aliased compared with alpha blend. Most of the time, the alpha test visual quality will be acceptable.