Shaders and Materials - Overview

Optimizing Shaders for Mobile Platforms

Transparencies

Additional Material and Shader Best Practices

Demo: Draw Calls and SRP Batcher

Shaders and Materials play a crucial role in determining how target hardware will process and render your 3D objects. In this project, you will explore best practices that will keep the shaders lightweight and fast when running on phones with limited resources.

Shaders and Materials

Course Introduction

The Optimization Process

Profiling Tools

Geometry - Introduction 

Triangle and Polygon Usage

Level of Detail

Additional Geometry Best Practices

Demo: Level of Detail

Textures - Introduction

Texture Size, Color Space, and Compression

Texture Atlases

Texture Filtering

Mipmapping

UV Unwrap, Visual Impact, and Texture Channel Packing

Alpha Channels and Normal Map Best Practices

Editing Texture Settings

Demo: Texture Atlases

Lighting - Overview

Light Modes and Types

Lighting for Static Objects

Light Probes

Shadows

Demo: Baked Lighting

Conclusion/Next Steps

Welcome to 3D Art Optimization for Mobile Applications! In this introductory project, we will review the course's main learning objectives, discuss the practice of optimization, and identify the optimization tools available at your disposal.

Introduction/Optimization and Profiling

This project will highlight optimizations for 3D models that can make a game more efficient while maintaining aesthetic intent, improving the performance and experience on mobile devices. 

Geometry

This project will highlight the different implementation considerations and optimizations that take advantage of a Texture’s flexibility. When given the correct settings and applied correctly over their many use cases, Textures play a major role in achieving your desired visual effects. 

Textures

Lighting is one of the most important aspects of real-time 3D visuals. It can set the mood, guide interactions, and identify goals and objectives. In this project, you will learn about and compare the differences between the available lights and light modes that you can use in your 3D mobile application.

Lighting

ARMUnityMobileOptimization.zip

In this intermediate course, participants will learn how to produce performance-optimized 3D assets and scenes for mobile applications. Topics will cover tips on optimizing Geometry, Textures, Materials, Shaders, and Lighting. This course was created with technical artists and content creators in mind.

Arm & Unity Presents: 3D Art Optimization for Mobile Applications

2e605075-c028-5df6-8dc7-5f8c6ac921aa:KNyBhALw6RpujrBA0XsHJf

Using Transparencies

Comparing Transparency Implementations

Use Case: Foliage

Conclusion

In this tutorial, we discuss the payoffs and consequences of using transparencies in our 3D mobile application.

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. 

Transparencies

1. Using Transparencies

2. Comparing Transparency Implementations

3. Use Case: Foliage

4. Conclusion

Complete this tutorial