Transparency Best Practices

Avoid transparency and use opaque as much as possible

Opaque Shadows 

Use an opaque material whenever possible. On mobile platforms, using transparency is best avoided unless necessary. Rendering an object with transparency will always be more expensive than opaque. Having lots of these transparent objects in games 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 the same pixel is drawn multiple times. The more layers of transparency we have, the more expensive the rendering becomes. For mobile platforms, overdraw can severely affect performance; therefore, we need to be mindful when building our levels 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.

Unreal Engine Overdraw

Unity Overdraw

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. The 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 the performance data of a device.

Alpha test/cutout

The alpha test implementation will make the object material look either 100% opaque or 100% transparent. We can also set the threshold of the cutout for the mask. In Unreal Engine, the term used is Masked blend mode, while in Unity this type of transparency is called Cutout.

Alpha blend

Visually alpha blend allows the material to have a range of transparency (and can make an object look partially transparent), instead of completely opaque or transparent. Unreal Engine calls this blend mode Translucent, while Unity uses 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 a sharp cutout.

Alpha Blend Alpha Test 

Alpha test 

  • 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 platforms as it disables some of the optimization features within the GPU. However, as always, we need to profile and compare the performance just to be sure.

Alpha blend

  • For mobile platforms, Unity recommends using alpha blend over alpha test - https://docs.unity3d.com/Manual/MobileOptimisation.html. In practice, we should always profile and compare the performance between alpha test and alpha blend, as they are usually content dependent and need to be measured.
  • In general, alpha blend (all kinds of transparency) should  be avoided on mobile platforms.
  • If we need to have alpha blend in games, try to make the coverage of the blend area small.

Alpha test transparency might work better for foliage

In a static view, both examples below show the foliage looking perfectly fine, with alpha blend actually looking slightly better due to the soft edges compared with the sharp cut in alpha test.

Foliage stationary 

However, in motion, alpha blend looks wrong and the leaves doesn't seem to render in the correct order. Alpha test handles the transparency and order of the leaves 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.

Foliage rotating 

 

Previous Next