Material and Shader Best Practices for Artists

Overview Shader and Materials Hints and Tips Transparency Best Practice

Transparency Best Practices

Avoid transparency and use opaque as much as possible

Opaque Shader

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.

Shader Unreal Overdraw

Shader 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, 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/cutout

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.

Alpha blend

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.

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 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.

Alpha blend

  • For a mobile platform, Unity recommend using alpha blend over alpha test 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.

Foliage Transparent

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.

Rotating Bush example