A detailed step-by-step guide to make your first AR face filter in Unity

Alika 7up
4 min readAug 23, 2023

Introduction

Welcome to the world of AR creativity! This guide will walk you through the steps of creating your first AR face filter using Unity’s AR Foundation package. Each step is explained clearly, helping you build an exciting AR experience.

Seun Oderinde on Pexels

1. Setting up face tracking

In the Unity Package Manager, install the following packages:

  • AR Foundation
  • AR Core XR Plugin (if using Android)
  • AR Kit XR Plugin (if using iOS devices)

These packages provide the necessary functionality for AR face tracking.

Create a new GameObject and name it "Face".
This will be the GameObject that will track the user's face.

Add the following components to the "Face" GameObject:

  • AR Face Tracking
  • AR Camera

The AR Face Tracking component will track the position and rotation of the user's face. The AR Camera component will render the scene from the user's perspective.

2. Adding a face texture

Create a new material and set its shader to "Cutout".
The Cutout shader will allow the face filter image to be displayed only where the face is detected.

Drag and drop your face filter image into the material's Albedo slot.
This will set the image as the texture for the material.

3. Adding accessories to your filter

Create a new GameObject and name it "Accessory".
This will be the GameObject that will represent the accessory in the scene.

Add the following components to the "Accessory" GameObject:

  • AR Mesh Renderer
  • AR Pose Driver

The AR Mesh Renderer component will render the accessory in the scene. The AR Pose Driver component will drive the position and rotation of the accessory based on the position and rotation of the user's face.

Create a new 3D model of the accessory.
This can be done in a 3D modeling software like Blender or Maya.

Import the 3D model into Unity.
This can be done by dragging and dropping the file into the Unity Project window.

Assign the 3D model to the "Mesh" property of the AR Mesh Renderer component.
This will make the accessory appear in the scene.

4. Adding animation

Create an animation clip that moves the accessory.
This can be done in a 3D animation software like Maya or Blender.

Import the animation clip into Unity.
This can be done by dragging and dropping the file into the Unity Project window.

Assign the animation clip to the "Animation" property of the AR Pose Driver component.
This will make the accessory animate when the user moves their face.

5. Add postprocessing

Create a new post-processing profile.
This can be done by going to the Window menu and selecting Post-processing.

Add a colour grading effect to the post-processing profile.
This can be done by clicking on the Color Grading tab and dragging and dropping a colour grading effect into the Effects list.

Set the colour grading effect to make the face filter look more realistic.
This can be done by adjusting the settings of the colour grading effect.

RF-Studio on Pexels

6. Testing on mobile devices

Build your project for mobile devices.
This can be done by going to the File menu and selecting Build Settings. In the Platforms section, select the platform you want to build for. Then, click on the Build button.

Install your project on a mobile device.
This can be done by connecting your mobile device to your computer and dragging and dropping the built project file onto the device.

Test your face filter on the mobile device.
This can be done by opening the project on the mobile device and moving your face around to see the face filter in action.

Extra tips

  • Use high-quality face filter images. The better the quality of the images, the better the results will be.
  • Experiment with different shaders. The shader you choose will affect the way the face filter is rendered.
  • Add animations to your face filters. This will make them more engaging and fun to use.

You can learn more here:

Creating an AR face filter is a mix of technical and creative steps. Feel free to explore, experiment, and make your filter truly unique!

--

--