Set up a face tracking project

Add a face texture

Add accessories to your filter

Add animations to your filter

Add particle effects to your filter

Add post-processing to your filter

Submission: Ice cream company filter

Learn how to create a custom face filter app with fun textures, 3D models, particles, and effects. In the challenge, design a themed filter for an ice cream company.

Develop AR experiences that use trackable targets in the environment

Absolute Beginner AR Development

Evaluate platform capabilities and limitations in order to determine whether or not a given feature will work.

Absolute Beginner AR Design

In this mission you'll create your own custom face filter app that includes a wide variety of digital content. The face filter will include interesting textures, animated 3D models, dynamic particles, and post-processing effects. You'll also complete a challenge where you design a custom filter for an ice cream shop.

Create a basic face filter

Mobile AR Development

Mobile AR Development - Unity Learn

Ready to create AR experiences? In this learning pathway, you’ll develop AR apps compatible with iOS and Android devices!

Research future AR use cases to prepare for developing new kinds of applications

Create basic application interactions with Visual Scripting

Absolute Beginner Visual Scripting

Welcome to AR Development! In this learning Pathway, you'll create Augmented Reality (AR) applications that are compatible with iOS and Android devices. You’ll use Visual Scripting and Unity’s AR tools to develop a wide variety of engaging AR experiences. This pathway assumes a basic knowledge of Unity.

2022.3

2021.3

Welcome to AR Development

Configure your AR development environment

Deploy your project to iOS or Android

Welcome to AR Development Quiz

Get ready for AR development: explore the field, hear from experts, install essential software, set up a Unity project, and deploy a test project to your mobile device.

In these tutorials, you'll get ready for AR development. First, you'll learn about the field of AR and hear from established creators in the AR industry. Next, you'll download all required software to get started and configure a Unity project for AR development. Finally, you'll deploy a test project to your mobile device to make sure everything is working as it should.

Get started with AR

Build a new scene with glasses

Set up the UI

Create a visual script to detect a button press

Turn on the glasses with buttons

Update your graph to switch between glasses

Configure one color button

Complete the color switching functionality

Save and load the glasses

Submission: Ocean-themed face filter

Create with AR: Face Filters Quiz

Expand on what you’ve learned with filters that add interactive elements. You’ll create an app for customizing and trying on glasses, then an ocean-themed face filter.

Now that you’ve created a basic face filter, you’re ready to develop your skills and work on a filter that involves interactivity. In this project, you will create your own interactive app that allows a user to select, customize, and visualize different pairs of glasses on their face.You will also complete a challenge where you design an interactive underwater scuba filter for an aquarium.

Create an interactive face filter

Create a new project for marker-based AR

Spawn an object on an AR Marker

Add a UI with rotation buttons

Add world space UI to your marker-based app

Add spatial audio to your marker-based app

Submission: Bring art to life with AR

Learn to create marker-based AR apps, which make digital models appear over marker images in the real world. In the challenge, you’ll breathe life into a 2D work of art.

Beginner Mobile Optimization

 app is an application that can recognize images (called markers) in the real world and then make content appear in the app. You may have seen applications that use this kind of technology to make AR content for movie posters, product labels, card games, and even business cards.

In this project, you’ll make a marker-based app with a user interface that lets the user control a 3D model, text, and audio.

Create a marker-based AR app

Set up a scene with plane detection

Detect the user’s touch

Detect when the user touches a plane

Instantiate the portal on a plane

Test the frame rate of the portal world

Limit the visibility of the portal world

Submission: AR friend

Create with AR: markers and planes Quiz

Make an app that detects flat surfaces and allows the user to spawn a portal on their floor or wall. Then complete a challenge to create an interactive character app.

In this project, you’ll create an AR app that makes use of plane detection technology. iOS and Android devices have the ability to detect flat surfaces — or planes — in your physical environment. This includes horizontal planes like the floor or a table, and vertical planes like the walls. 

You will create an app where the user will be able to tap on a plane in order to place a portal onto it. This portal will be a window into a virtual 3D environment that the user can peer into and explore. 

You will also complete a challenge where you design an app that allows the user to place a character on a table and interact with it.

Create a plane detection AR app

UFO project overview

Explore the Unity project

Begin the AR port

Selecting an orientation for your AR game

Enable the play area

Develop the AR UFO movement

Develop the AR UFO abduction action

Other AR considerations

Design your own AR app

In this Mission, you’ll port an existing desktop game to mobile and redesign it to be a fully functioning (and fun!) AR experience.

In this learning experience, you’ll port an existing desktop game to mobile and redesign it to be a fully functioning (and fun!) AR experience. You’ll conduct research, create a design document, modify visual scripts, and regularly playtest your app. At the conclusion of this project, you’ll also design and create your own fully realized AR application.

AR experience design

8f30f9d9-0476-4e4d-b898-43d3fee1d8e7:b0977cf6c731

Overview

Hear from some established creators

Before you begin

Import the project assets

Create an AR Default Face prefab

Configure the AR Face Manager

Update the camera’s facing direction 

Build and test

More things to try

Next steps

Zu-UnityLearn

Desarrollo de AR para novatos

Hammad_N

1A-1.4_assign-face-prefab.mp4

YouCut_20220930_151551573.mp4

1A1EasyMoreToTry.mp4

YouCut_20220930_151551573 (1).mp4

1A4DifficultMoreToTry (6).mp4

VIDEO 2 - What is your day-to-day work in AR Development_1.mp4

0.3.8_Spinning-cube-test (6).mp4

The first step in developing an AR face filter app is setting up your project for face tracking. 

In this tutorial you'll do the following: 

Set up your project for face detection and tracking. 

Build and test your app’s face tracking functionality. 

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

robinmitra

Create a Basic Face Filter

In this learning experience, you'll learn to create your own AR face filter apps. The first app you’ll make is a simple filter that applies materials and 3D models to the user’s face. 

In this tutorial, you’ll take the first step in developing an AR face filter app. You’ll set up your project to detect and track the user’s facial features and visualize the tracking functionality with a green material overlay.

As you prepare to begin your AR development work, it might be helpful to hear what other creators experience in their day-to-day work. In the video below, a few experienced AR creators discuss their personal development process and what it means to work professionally in XR.

You should have already completed Get started with AR tutorials. In those tutorials, you complete the following setup tasks:

Make sure your mobile device and computer are set up for AR development.

Create a new Unity project using the Mobile AR Template. Deploy a simple AR app to your mobile device that displays a spinning cube in your physical environment. 

If you have already successfully built and run the spinning cube app on your device, you’ are ready to continue with this tutorial.

Let’s get started by setting up your project: 

1.  If your AR project is not already open, open it now.

2.  Select File > New Scene to create a new scene from the AR template.

3.  Select File > Save As, then save the scene as “Basic_Face_Filter” inside the Scenes folder.

4.  Download and unzip the Basic Face Filter assets.

5.  In Unity, go to the main menu and select Assets > Import Package > Custom package.

6. Navigate to the location of the unzipped folder, select the BasicFaceFilterAssets.unitypackage file, and then select Open.

7.  In the Import Unity Package window, check that all the assets are selected and then select Import.

8.  In Unity, go to the Project window and navigate to Assets > _BasicFaceFilter. 

Take a little time to explore the assets that you have just imported before you continue.

Hierarchy window with the scene highlighted, named Basic_Face_Filter. In the Project window the _BasicFaceFilter folder is highlighted.

Augmented reality experiences that overlay digital content on your face require face tracking ability. Face tracking tells your mobile device where your face is when a camera sees it. The good news is that there’s already computer code packaged up for you that makes this work! You’ve already imported some of that code, but now you need to set up your scene to make that code work and to visualize the faces that are tracked in your application.  

You’ll use the AR Default Face GameObject to visualize the tracking of your face. In order to see the AR Default Face when you test, you'll create a prefab that will be activated when the camera sees your face. You'll also need to apply a material to that AR Default Face GameObject so that it shows up. A special material is provided as part of the project. 

Follow these instructions to set up the AR Default Face prefab:

1.  In the Hierarchy window, right-click and select XR > AR Default Face to add a new AR Default Face GameObject to the scene. 

The AR Default Face is a GameObject you can customize to make your own creative face filters. 

2.  Next, you need to make sure that the AR Default Face will show up when a face is detected by your phone’s camera. In the Project window, navigate to Assets > _BasicFaceFilter > Materials and find the Face Debug MAT material. 

3.  Drag the Face Debug MAT material from the Project window onto the AR Default Face GameObject in the Hierarchy window to set the material. You can check if the material has been set by navigating to the Inspector window for the AR Default Face GameObject and scrolling down to the Material Inspector. Here, you should see the Face Debug MAT (Material).

4.  In the Project window, navigate to Assets > _BasicFaceFilter > Prefabs.

5.  Drag the AR Default Face GameObject from the Hierarchy window into the Prefabs folder in the Project window. 

The GameObject icon and name should now be displayed in light blue in the Hierarchy window.

You have just turned the AR Default Face GameObject into a prefab. Prefabs act as templates so that you can reuse GameObjects configured in a specific way. 

Inspector window for the AR Default Face GameObject with the Face Debug MAT (Material) highlighted.

Next, you need to tell the XR Origin (AR Rig) which GameObject you want to display over a face when it’s detected. You’ll do this using a new component called the AR Face Manager.

Follow these instructions to set up the AR Face Manager:

1.  In the Hierarchy window, delete the Cube GameObject – it is only there for testing. 

2.  Select the XR Origin(AR Rig) GameObject.

3.  In the Inspector window, select Add Component and then search for and add the AR Face Manager component. This component will manage the addition, updating, and removal of GameObjects to represent faces. 

4.  In the Inspector window, go to the AR Face Manager component and locate the Face Prefab property.

5.  Drag the AR Default Face prefab you created from the Project window (in Assets > _BasicFaceFilter > Prefabs) onto the Face Prefab property.

6.  In the Hierarchy window, delete the AR Default Face GameObject. When a face is detected by your app, AR Foundation will generate an AR Default Face GameObject from the prefab that you have just created.

AR Face Manager component on the XR Origin (AR Rig).

The app you built with the spinning cube used the camera on the back of your handheld device. However, this new app involves face tracking, so it makes more sense to use the camera on the front of your device. 

Follow these instructions to configure the app to use the front camera:

1.  In the Hierarchy window, hold the Alt key (macOS: hold the Option key) and select the foldout icon on the XR Origin (AR Rig) GameObject to expand all of its child GameObjects. Parent and child GameObjects are a way to organize the different GameObjects in a scene.

3.  In the Inspector window, find the AR Camera Manager (Script) component. 

4.  Set the Facing Direction property to User.

AR Camera Manager component with Facing Direction property set to User.

It’s time to test your project! The video below demonstrates how the app should function on your device.

To test the project in its current state, follow these instructions to build to your device: 

2.  Open the Build Settings window (File > Build Settings). 

3.  Select Add Open Scenes to add the current scene to the build. Clear any previous scenes to make sure that they are not included in your new build.

4.  Make sure that your device is plugged in, and then select Build and Run to build the app on your device. 

Note: For a reminder of how to build to your device, you can review the process for Android or iOS.

5. The application will open automatically on your device. When a face is detected, the application should cover the face with a simple green face filter.

Note: If you're developing for iOS and the application is still using the world-facing camera instead of the user-facing one, it may be that Face Tracking is not enabled in your project settings. From the main menu, select Edit > Project Settings. From the left panel, select ARKit, then make sure Face Tracking is enabled.

Build Settings window with Add Open Scenes button highlighted and an arrow extending into the Scenes In Build section.

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, or Medium, 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!

While the debug material is a fantastic shade of green, you might like to make the material a different color. One way to change the color would be to open the debug material and change the color using a color picker. Another way to change the face debug material color is to make a new material and apply that to the face. 

For more information on how to work with materials, you can explore the Manage materials in a project section of the Creative Core pathway. 

Medium: Create screen recordings of the application to share

Sharing what you have done with others is a great way to show off your accomplishments and learning. One of the easiest ways to share the progress that you're making on your AR journey is to record your screen as the application runs. 

There are different processes for recording on iOS and on Android. Once you’ve made a recording, share it with your friends, family, and the world! 

In this tutorial you created a basic face tracking application that overlays the default AR face model over your face — great job! In the next tutorial, you'll make things a little more exciting by adding custom materials to the face model.

Set up a face tracking project

1. Overview

2. Hear from some established creators

3. Before you begin

4. Import the project assets

5. Create an AR Default Face prefab

6. Configure the AR Face Manager

7. Update the camera’s facing direction

8. Build and test

9. More things to try

10. Next steps

Complete this tutorial