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

Set up the UI

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.

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

Create basic application interactions with Visual Scripting

Absolute Beginner Visual Scripting

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

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

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.

Welcome to AR Development

test

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

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.

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

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

ea9b016a-d1c0-43f1-8e5e-26a2467ef628:140f93f9dd81

Overview

Set up a new scene

Configure your build settings

Import the new assets

Explore the new assets

Add a Face Manager

Create the GlassesGroup

Set up the GlassesGroup as an AR Face prefab

Prepare your test environment

Build and test

More to try

Next steps

Zu-UnityLearn

Desarrollo de AR para novatos

Hammad_N

importing.mp4

1B-1.5-create_glasses_prefab.mp4

1B-1.5-assign_face_prefab.mp4

aspectratio.mp4

1B1EasyMoreToTry_1RESIZE.mp4

pivotPoint.mp4

YouCut_20220803_165228438_1RESIZE.mp4

1B1DifficultMoreToTry.mp4

1B1MediumMoreToTry (3).mp4

FinishedAppVideo.mp4

grouping (1)_1.mp4

In this next project, you’ll learn how to implement multiple filters that your users can select and customize through a user interface. Specifically, users will choose between sets of glasses and then select a color for those glasses.   

In this tutorial you'll do the following: 

Set up your project for face detection and tracking. 

Select the pairs of glasses the user can choose from.

Build and test your app to preview the glasses. 

Games

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

robinmitra

In the last project, you created a single face filter of your own design using various features, such as face textures, meshes, and animations. Although you added a variety of different features to your filter, it was still only one filter. Often, apps present their users with multiple filters to experiment with. 

In this next project, you’ll learn how to implement multiple filters that your users can select and customize through a user interface (UI). Along the way, you’ll explore ways to create a user interface in Unity, deepen your knowledge of the AR face filters, and most importantly, build your first interactive features using visual scripting.

Let’s check out the app you’ll be building:

Just as you did in the previous project, you’ll begin by creating and configuring a new scene using the provided AR template. These initial steps are exactly the same as what you did before, so try to challenge yourself by following along with these more brief instructions. If you get stuck, you can always review the previous setup tutorial for more details.

Follow these instructions to set up your new scene:

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

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

3.  In the Hierarchy window, delete the Cube GameObject.

4.  In the Hierarchy window, select the Main Camera GameObject (it’s a child GameObject of XR Origin (AR Rig)).

5.  In the Inspector window, find the AR Camera Manager component and set the Facing Direction to User.

You also need to add the new scene to the build settings and set it as the only scene to be built. This process can happen at any time prior to completing your first build test. However, it’s good practice to add the scene immediately after it is created so you don’t forget later and waste time building a previous scene!

Follow these instructions to update your build settings:

1.  Open the build settings (File > Build Settings).

2.  In the Scenes in Build section, select Add Open Scenes. This will add your new InteractiveFilter scene to the Scenes In Build list.

3.  If the BasicFaceFilter scene is enabled, disable it in that same list.

Tip: You can also right-click a listed scene and select Remove Selection to completely remove it from the list.

Now you’re prepared to build the app when you’re ready to test your progress.

The Build Settings window with the InteractiveFilter scene added to Scenes In Build. BasicFaceFilter has been disabled from the list.

As in the previous project, we’ve provided you with a selection of starting assets that you will customize to your personal preference as you build the app. 

Follow these instructions to import the assets:

1.  Download the Interactive Face Filter assets.

2.  Unzip the downloaded folder and locate InteractiveFaceFilter.unitypackage.

Note: It’s important to fully unzip the folder rather than looking inside by double-clicking. Attempting to import zipped files will result in an error.

3.  Drag InteractiveFaceFilter.unitypackage into the Project window of Unity Editor. This is an alternative technique for importing assets than what you did last time.  

4.  When prompted by the Import Unity Package dialog window, select Import.

The new assets have now been imported into your project. 

Before you continue, take a moment to explore the assets you have imported:

1.  Familiarize yourself with the package contents in the Project window. There are four folders:

Meshes: Contains five pairs of uniquely styled glasses.

Prefabs: Contains an AR_Canvas GameObject, which is the starting point for your app’s UI.

Resources: Contains a glasses UI icon template in PSD format, in case you want to create your own.

Sprites: Contains the UI sprites that you will use to create your user interface design.

2.  Open the Meshes folder and select each of the assets in turn to review them in the Inspector window — you’ll be choosing three to add to your app soon.

The four folders that make up the InteractiveFaceFilter assets shown in the Project window.

The Glasses_Cat glasses model preview in the Inspector window.

The filters for this app will be entirely mesh-based and will work somewhat like the accessories did in the last project. The major difference between the two apps will be the way the prefabs are created.

Before you get to that, you need to configure the XR Origin (AR Rig) GameObject:

1.  In the Hierarchy window, select the XR Origin (AR Rig) GameObject.

2.  In the Inspector window, select Add Component.

3.  Search for and add an AR Face Manager component.

You used the Face Manager in the previous project. This component manages the human faces detected in the scene.

The AR Face Manager component for the AR Session Origin GameObject shown in the Inspector window.

Rather than make individual prefabs for each pair of glasses, you’ll create a single prefab that contains all of the glasses that you’ve selected for your app called GlassesGroup. Later, you’ll build on this prefab and create a visual script to enable and disable the visibility of each individual pair of glasses in real time based on the user’s button selection. 

Follow these instructions to create a single GameObject that contains all pairs of glasses:

1.  In the Project window, go to Assets > _InteractiveFaceFilter > Meshes.

2.  Drag the three pairs of glasses that you want to add to the app from the Project window into the Hierarchy window.

3.  In the Hierarchy window, select each pair of glasses and check that its Transform Position property is set to 0,0,0 in the Inspector window.

4.  Select all three pairs of glasses in the Hierarchy window. Then, right-click and select Create Empty Parent. 

This creates a new parent GameObject for the glasses GameObjects. 

Tip: You can select multiple GameObjects by holding Ctrl (macOS: hold Cmd) as you select them. 

5.  Rename the new parent GameObject “GlassesGroup”.

The Transform component for the Glasses_Stars GameObject shown in the Inspector window. The X, Y, and Z position values are all set to 0.

For the GlassesGroup to appear on your face, you need to turn it into a prefab that can be applied to the user’s face.

Follow these instructions to set up the GlassesGroup as an AR Face prefab:

1.  In the Inspector window, select the GlassesGroup, then select Add Component and add an AR Face component. 

This component will allow the GlassesGroup to track along with a detected face.

2.  In the Project window, navigate to Assets > _InteractiveFaceFilter > Prefabs.

3.  Drag the GlassesGroup GameObject from the Hierarchy window into the folder in the Project window to make it a prefab. 

The GameObject should now appear blue in the Hierarchy window.

4.  In the Hierarchy window, select the XR Origin (AR Rig) GameObject. Locate its AR Face Manager (Script) component in the Inspector window.

5.  Drag the GlassesGroup prefab from the Project window and assign it to the Face Prefab property in the AR Face Manager component.  

Important: Drag the GlassesGroup prefab from the Project window and not from the Hierarchy window.

The AR Face component for the GlassesGroup GameObject shown in the Inspector window. 

Throughout this project you will be testing both in the Unity Editor and on your mobile device. Both methods of testing have pros and cons: 

Testing in the Unity Editor is very fast, and you can evaluate precisely how the interactions you’re building are working. However, you won’t be able to see your work-in-progress filters applied directly to your face. 

Testing on your mobile device will demonstrate how your filter actually works on your face, but it can take several minutes to build the app to your device. If something isn’t working as expected, it can also be much more challenging to understand why. 

By using both testing methods, you’ll be able to take advantage of their strengths while minimizing the impact of their weaknesses.

First, you’ll prepare the Unity Editor for testing in general, and then you’ll prepare your scene for device testing. Follow these instructions to prepare your test environment:

2.  In the Game view control bar, set the Aspect Ratio to 16:9 Portrait using the dropdown. 

The aspect ratio of the Game view will change to simulate a phone screen in portrait mode.

3.  In the Hierarchy window, select the GlassesGroup GameObject.

4.  In the Inspector window, find the Transform component and change its Position property Z value to 0.4. 

The glasses will now appear centered in the Game view.

5.  Select the GlassesGroup prefab in the Project window and change its Position property Z value to 0.4 as you did with the prefab in the Hierarchy window.

As shown in previous tutorials, AR foundation includes XR Environments, which allow you to test how some AR projects work directly in the Editor. However, for testing face filters, these simulated environments aren’t as helpful. For the time being you’ll disable XR Environments, but you can turn them back on for later projects.

6.  Navigate to Edit > Project Settings, and select the XR Plug-in Management section.

7.  Select the Windows, Mac, Linux settings tab and deselect XR Simulation.

Both test environments are now complete. When you are testing in the Unity Editor, you’ll use the GlassesGroup prefab in the Hierarchy window. When you test the app on your mobile device, you’ll deactivate the GlassesGroup prefab and then build to your device. Don’t worry if this seems complicated now, we’ll guide you through each step!

The GlassesGroup GameObject visible in the Game view. 

The GlassesGroup prefab selected in the Project window with its Position property Z value set to 0.4 

The XR Plug-in Management section of the Project Settings window. The Windows, Mac, Linux settings tab is selected, and XR Simulation has been deselected.

You’re now ready to complete your first test build: 

1.  In the Hierarchy window, select the GlassesGroup prefab.

2.  In the Inspector window, disable the GlassesGroup prefab using the checkbox at the top of the window next to its name.  

Important: If you don’t deactivate the GlassesGroup prefab, a pair of glasses will float in the middle of your screen on your mobile device build. 

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

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

Build a new scene with glasses

1. Overview

2. Set up a new scene

3. Configure your build settings

4. Import the new assets

5. Explore the new assets

6. Add a Face Manager

7. Create the GlassesGroup

8. Set up the GlassesGroup as an AR Face prefab

9. Prepare your test environment

10. Build and test

11. More to try

12. Next steps

Complete this tutorial