All content in this course uses:

Build an AR face effect by adding a 3D mesh overlay and applying both color tints and detailed textures to the user’s face.

Add a face texture

One of the most common features in AR face filter apps is covering the user’s face with a new material or texture. This could be used to apply a funny mask or to visualize tattoos. 

In this tutorial you'll do the following: 

Add a 3D mesh overlay that covers the user’s face.

Apply a simple color tint to the face overlay.

Apply a more intricate texture to the face overlay.

In the previous tutorial, you went through the process of creating a simple face filter. In this tutorial, you’ll do the following:

Add a custom texture to the face filter you created.

Create a custom texture to display on your face. 

Explore best practices for creating custom textures. 

 Overview

 prefab is that it only becomes visible when the application is running and a face is detected. This constraint makes debugging and design iteration a tedious task, since you have to build your project to see the results.

To solve this problem, a model is supplied by AR Foundation and included in the assets you imported earlier (Face_Reference_Mesh). A 

 is just another word for a 3D model. This Face Reference Mesh can be placed in the scene as a placeholder while you experiment with textures, accessories, and effects.

Follow these instructions to add the Face Reference Mesh to your scene:

Open your AR Template Unity project and the BasicFaceFilter scene, if you haven’t already done so.

To get a good view of the face mesh, double-click the 

Add the face reference mesh

 (also called the Albedo) represents the color of an object before the influence of any lights. One of the best parts of creating AR face filters is creating new looks to display on your face, so now is the time to create a new look for yourself!

Follow these instructions to create a new material for your filter: 

 from the context menu to create a new material.

  Name the new material “FaceTexture”.

 and select it. Your selected image is now applied to the material as the color (Albedo) map.

window, select the foldout (arrow) to the left of the 

 GameObject to reveal its child GameObjects. 

 GameObject to apply your material.  In the 

 view, the wave pattern will now be visible on the 

Create a new material

When a color is selected in the base map property, it is applied as a solid color to the material. When a texture is also added in the base map property, the selected color acts as a tint on the image texture.

Follow these instructions to change the tint of the Base Map:

 Change the tint color using the selectors in the 

  Experiment with colors and select a tint you like. You can remove the tint by changing the color back to white.

Set a tint to the material

The transparency of a material is dictated by the information in its alpha channel. 

 are grayscale maps that control the translucency of your material, with darker pixels being more transparent and lighter pixels being more opaque. These maps do not affect the color of your material. 

Since alpha maps only use grayscale values, they don’t need three channels, as RGB color values do — they can be contained in one channel. Unity uses the grayscale values of the alpha channel of the Base Map image to control the transparency. 

Follow these instructions to set the transparency of your material:

 view, the face model should now have transparency in the areas around the edges to create a wave effect.

Set transparency

You have created a material and applied it to the

 GameObject in your scene, but in order to see it working in your application, you’ll need to apply it to the 

 GameObject in your scene is just there as a reference, so you’ll need to make it invisible when you build your application.

Complete the following steps to apply your material to the prefab:

 prefab in the folder to open the prefab in the 

window, find the Mesh Renderer component. 

window, select the back arrow in the top left of the window to exit prefab editing mode.

You no longer need this GameObject because you have now applied your material to the prefab. (You don’t want to have two faces when there should only be one in the scene!) 

Apply your material to the default face

When you test your app now, it should display the material you created and applied on any face it detects.

Follow these instructions to build and test your app:

 Make sure that your device is plugged in and then select 

 The application will open automatically on your device. The new texture should now be displayed on your face in the app!

 For a reminder of how to build to your device, you can review the process for 

Build and test

is the process of making things in your application as efficient as possible. Unoptimized textures can cause an application to run slowly.

Optimization is critical for AR experiences because they run on mobile devices, which have limited processing power compared to other devices. When it comes to creating textures for AR, you need to consider the image size, image type, and whether your textures need to have transparency. 

The textures that you use for your AR applications (or any Unity project) are images. You can choose the texture size to balance quality and performance. If the texture size is too small, your app might provide a poor user experience, especially if the key purpose of the app is to present engaging visuals. If the texture size is too big, the app could run too slowly and provide a frustrating user experience.

You may have noticed that texture sizes are typically presented in powers of two. Examples of these sizes include 512 x 512, 1024 x 1024, 2048 x 2048 (2K) and 4096 x 4096 (4K).

Older graphics cards require these sizes to perform well at runtime. Most modern graphics cards don't have this restriction, but it is still considered best practice to use sizes in powers of two. 

Image type also has a significant impact on optimization. You need to consider the following factors when making a decision:

Storage space available on the target platform.

Reading speed (that is, the speed at which the target platform can get the image from disk to system memory).

Reading speed from system memory to the GPU.

The video RAM storage budget of your target platform.

Here’s some guidance on potential advantages of different images types you might consider as a creator:

 This format preserves quality with reasonably small file size. However, PNG files are compressed, so they need decompression in the reading process. The benefit of the small file size tends to be greater than the extra time spent reading the file, and so in most cases PNGs are an ideal file type.

 This is a good choice for quality since it is uncompressed and includes an alpha channel. However, TGA is a large file format, so it could be slow to load. TGA files are good options for textures that can be pre-loaded, like background images in an AR app.

 This format has a small file size, but there is quality loss with every compression in the process. JPGs do not contain an alpha map, so they can't be used for anything that requires transparency.

Image optimization tips

If you want to further develop your skills, explore new concepts, or improve your project, check out some of the optional activities below. Each one is tagged as either Easy, Medium, or Difficult, so you can choose the level of challenge. 

These activities are entirely optional, so if you’re not interested, no problem — just skip this step. We do recommend attempting at least one of them in order to get the most out of this learning experience. Good luck!

Materials contain a variety of properties you can use to customize the look and feel of an object. In these tutorials you have changed the color of a material, but there are other properties of a material you can also change. 

Try modifying the following properties of your material in the Surface Inputs section of the 

 The higher this value, the more metallic your material will be. The more metallic, the more it will reflect light.

 The higher this value, the smoother your material will be. The smoother, the more it will reflect light.

 This property determines whether the material glows. When you enable this property, a color picker will become available.

For more information about how to adjust materials, you can explore 

Duplicate one of the provided textures and edit it to create your own texture. For example, you could delete sections of the texture or add a line in a different color. 

 is an open source alternative to Adobe® 

® that can be used to create, modify, and export graphics. 

 if you don’t have Photoshop. A quick search on a search engine should return a lot of tutorials to help you use your preferred texture editing software. 

Create your very own texture from scratch, and begin designing your own filters! Use the 

 as a base to create your own textures to apply to the 

 The wave texture provided in the sample files is an example of a texture that uses transparency. If you want to use transparency in your face filters, you'll need to save your texture image in a file format with an alpha channel, such as PNG.

More things to try

In this tutorial you created a custom material to add more colors and patterns to the face filter, but there is even more you can do! In the next tutorial, you’ll add some accessories to your filter as well.

Next steps

Absolute Beginner AR Development

Zu-UnityLearn

Desarrollo de AR para novatos

Hammad_N

Games

Develop AR experiences that use trackable targets in the environment

Desarrollar experiencias de AR con objetivos que se puedan rastrear en el entorno.

Unity Version 2022.3