Transparencies

It’s important to consider performance implications when using transparent Material settings. It’s a good practice to use an opaque Material whenever possible, especially for mobile platforms.

Rendering an object with transparency always uses more GPU resources than rendering an opaque object. Using many transparent objects impacts performance on mobile platforms, especially when transparent objects are rendered on top of one another multiple times, a process known as overdraw.

In the following screenshot, the blue lights could have had a transparency effect, but they still look good with an opaque Material:

There are several different ways to implement transparency in a Shader; each has its benefits and drawbacks.

The most commonly used transparency implementations are alpha test and alpha blend. Alpha test makes a Material look either completely opaque or completely transparent. You can set the threshold of the cutout for the mask. In Unity, this is called Cutout.

Alpha test disables some optimization features within the GPU, so it’s often best to avoid unless it’s required. When using alpha test/cutout, It’s highly recommended that you test on the mobile platforms that you are targeting. Also, don’t forget to profile and compare this transparency implementation against alpha blend for any differences in performance.

Alpha blend allows a Material to have a range of transparency, making an object look partially transparent. Unity calls this blend mode Transparent.

For mobile platforms, Unity recommends using alpha blend over alpha test. As with alpha test implementations, you should profile and compare the performance between alpha test and alpha blend. Each use case is content-dependent and therefore needs measuring. If alpha blend is needed, try to make the blend area small.

Alpha blend allows partial transparency while alpha test results in a sharp cutout. A comparison of alpha blend and alpha test can be seen in the following image:

In a static view of foliage, alpha blending can look better due to the soft edges compared to the absolute cuts in alpha test.

However, when the foliage is in motion, alpha blend looks incorrect. The leaves don’t render in a realistic order because the partial transparency will give a ghost-like effect while the foliage moves into and out of each other.

Alpha test handles the transparency and the order of the leaves much better in motion, such that each leaf will be completely rendered or obfuscated rather than partially transparent. However, the edges will be harsher, or aliased, when compared with alpha blend.

Usually, alpha test’s visual quality is acceptable because the aliased edges are not as obvious in motion. But the optical illusion is broken when the leaves and branches jump back and forward from the use of alpha blend.

To avoid excessive overdraw, it’s important to evaluate your needs carefully before implementing any kind of transparency in a mobile application. Selecting which type of transparency to use isn’t always clear, but when in doubt, profiling the application will provide more data to make a decision. In the next tutorial, we’ll explore additional Material and Shader best practices for 3D mobile applications.