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.

Create basic application interactions with Visual Scripting

Absolute Beginner Visual Scripting

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

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

Absolute Beginner AR Design

Develop AR experiences that use trackable targets in the environment

Absolute Beginner AR Development

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

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!

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

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

Add world space UI to your marker-based app

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

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

7e32d2dd-b008-40ec-8b58-316d3b08eb66:90a14322688d

Overview

Why is plane detection useful?

Import the AR portal assets

Select your portal theme 

Create a new scene

Set up a Default Plane with a new material

Configure the AR Plane Manager

Build and test

More things to try

Next steps

Zu-UnityLearn

vertical-portal-fully-working.mp4

portal-fully-functional.mp4

2B-1.8-final-function-plane-detection.mp4

2B-1.2-plane-detection-unite.mp4

2B-1.4-JohnLemon.mp4

2B-1.7-assign-plane-prefab-to-manager.mp4

2B-1.8-final-function-plane-detection (1).mp4

2B-1.9-horiz-and-vert.mp4

1B-1.9-pink-plane-mat.mp4

2B-1.4-TheStreet.mp4

2B-1.4-WitchHut.mp4

2B-1.9-point-clouds.mp4

In this project, you’ll create an AR app that makes use of plane detection technology. 

You can use plane detection to build an approximate understanding of your surrounding physical environment in AR: the floor, the walls, and any large flat surface, like tables or couches. 

Plane detection is extremely useful in AR applications. Users are often asked to place objects on real surfaces in their environment, which helps those objects feel like they are really there. 

In this first tutorial, you will set up a new scene in your Unity project. Then you will configure your scene to detect planes in your environment. 

Games

Build AR projects to mobile devices

Create a plane detection AR app 

In this project, you’ll create an AR app that makes use of plane detection technology. Both ARKit (for iOS devices) and ARCore (for 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. 

In your app, the user will be able to tap on a vertical plane (most likely a wall) or a horizontal plane (a table or the floor) 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. 

In this first tutorial, you will set up a new scene in the Unity project you created for your marker project. Then you will configure your scene to detect planes in your environment. By the end of this first tutorial, your project will look like the example below.

Explore the following examples of plane detection in use:

In Jurassic World: Alive, users can view dinosaurs on the street around them.

In Angry Birds AR: Isle of Pigs, users can place their game area on any flat surface that is large enough to fit it. 

In the Wayfair AR app, users can place and visualize virtual furniture in their physical rooms.

A portal is an ideal use case for AR technology, as it is not an experience that could be replicated on a computer screen or in VR. The user might want to generate one of these portals on their living room floor, their work desk, or on the exterior wall of a building – and can do so as long as they have their mobile device with them. 

As you set up your project in this tutorial, take some time to think about portals from popular culture that could inspire the portal that you’re going to create. If you’re not sure where to begin, use the following examples to get you started:

The portals in the Portal video game series

The portals created by Dr. Strange in the Avengers movies

Video from What’s new in Unity’s AR Foundation | Unite Now 2020, showcasing AR Foundation demos.

Now that you have an understanding of what plane detection is and what it can be used for, you’re ready to get started on your own plane detection project.  

Follow these instructions to import the portal assets:

1.  If you don’t already have the Unity project open from your AR Marker app, open it now.

2.  Download and unzip the AR Portal assets.

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

4. Navigate to the location of the unzipped folder, select the ARPortalAssets.unitypackage file, and then select Open.

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

6.  In Unity, go to the Project window and navigate to Assets > _ARPortal > Prefabs. Take a little time to explore the assets that you have just imported before you continue.

The Prefabs folder in the Project window.

The package you imported contains three distinct asset sets, which are drawn from existing Unity learning content. You will select one of these themed environments to be what your app’s users will see inside the portal. 

The John Lemon assets come from the John Lemon's Haunted Jaunt: 3D Beginner project. The 3D Beginner project features the interior of a cartoonish haunted mansion filled with silly ghosts, fun portraits, and the lovable, timid main character, John Lemon. 

The street assets come from the vertical slice for the Practical Game Accessibility course. The assets create a fantastical outdoor street scene, leading towards a library.

The witch’s hut assets come from the VR Beginner: Escape Room project. The VR Beginner project features the interior of an eclectic witch’s hut, which includes a wide range of intriguing magical objects. 

Follow these instructions to browse and choose between the three environment options:

1.  In the Project folder, go to Assets > _ARPortal > Source Files > Sample Scenes.

2.  Open each of the three scenes and explore them in the Scene view. 

3.  Decide which of the three sets of environment assets you would like to use for your portal. 

Note: You can also import custom assets for your portal environment, but we would recommend waiting to try that until after you have successfully implemented the portal functionality with the assets that we’ve provided.

Now that you have selected a set of assets, follow these instructions to create a 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 “AR_Portal” in Assets > _ARPortal > Scenes.

3.  In the Hierarchy, select the Cube GameObject and delete it. This is only included for testing purposes.

The AR_Portal scene open in the Scene view with a cube floating in the environment.

AR Foundation provides a Default Plane GameObject that is used to display planes detected in the user’s physical environment. 

First you need to create a new AR Default Plane prefab, which will be instantiated in the scene each time a plane is detected.

Follow these instructions to create the prefab and customize its material color:

1.  In the Hierarchy, right-click and select XR > AR Default Plane.

2.  Select the new AR Default Plane GameObject and examine the following components in the Inspector:

The AR Plane (Script) component represents a plane detected by an AR device, which can be instantiated when a flat surface is detected.

The AR Plane Mesh Visualizer (Script) component handles the display of the material and outline of a detected AR plane.

The Mesh Renderer component has a DebugPlane material assigned to it.

The Line Renderer component handles the appearance of the plane’s border outline.

3.  In the Mesh Renderer component, expand the Materials section.

4.  Select the Element 0 object picker (circle) and choose one of these three alternative materials: Plane_Green, Plane_Blue, or Plane_Red. The material that you select will be the color that detected planes will be highlighted.

Important: The default DebugPlane material does not work. If you skip the instruction above, your planes will not be displayed.

5.  In the Project window, navigate to Assets > _ARPortal > Prefabs.

6.  Click and drag the AR Default Plane GameObject from the Hierarchy into the Prefabs folder in the Project window.  The GameObject icon and name should now be displayed in light blue in the Hierarchy.

7.  Delete the AR Default Plane GameObject from the Hierarchy. AR Foundation will generate an AR Default Plane GameObject from the prefab that you have just created when a plane is detected.

A table with a semi-transparent green polygon superimposed on top of it.

The Inspector window for the AR Default Plane with the AR Plane component, the AR Plane Mesh Visualizer component, and the Line Renderer component highlighted. The DebugPlane material is also highlighted.

The AR Default Plane GameObject highlighted in the Hierarchy.

Next, you need to specify which GameObject you want to display over a plane when it’s detected by the app. You’ll do this using a new component called the AR Plane Manager. The configuration process for the AR Plane Manager is the exact same process you used for the AR Face Manager in previous projects.

Follow these instructions to set up the AR Plane Manager component:

1.  In the Hierarchy, select the AR Session Origin GameObject.

2.  In the Inspector, select Add Component and then search for and add the AR Plane Manager component. This component creates GameObjects for each plane that is detected in the environment.

3.  In the AR Plane Manager component, locate the Plane Prefab property.

4.  Click and drag the AR Default Plane prefab from the Project window (in Assets > _ARPortal > Prefabs) and assign it to the Plane Prefab property.

5.  In the AR Plane Manager component, set the Detection Mode property to either Vertical or Horizontal planes, but not both.

If you want your portal to appear on the wall like a window, select Horizontal Detection Mode. If you want your portal to appear on the floor or a table as if you’re peering into the scene from above, select Vertical Detection Mode.

The AR Plane Manager component highlighted in the Inspector for the AR Session Origin GameObject.

The AR Plane Manager component with the Detection Mode property dropdown open. The Horizontal and Vertical options are highlighted.

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: 

1.  In the Hierarchy, check that the AR Default Plane GameObject has been deleted. Remember, your app will instantiate the prefab when a plane is detected.

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

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

5.  Make sure that your device is connected to your computer, 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.

6. The application will open automatically on your device. Point the camera slowly around the scene until a vertical or horizontal plane is detected. 

Note: It can be difficult to detect planes in certain environments, such as a room with very plain white walls. If you have any trouble, try temporarily switching the Detection Mode in the AR Plane Manager to detect both vertical and horizontal planes. 

The Build Settings window with the AR_Portal scene selected in the Scenes In Build section. The Add Open Scenes button is highlighted.

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!

Easy: Experiment with plane detection modes 

You may have chosen a vertical or horizontal portal because you prefer that design. However, it is helpful to understand how your device’s plane detection works for both horizontal and vertical surfaces. In the AR Plane Manager component, temporarily set the Detection Mode property to Everything and see what kinds of surfaces are detected.

Medium: Edit the AR Default Plane material

In the assets for this project, you were provided with simple materials for the AR Default Plane, like Plane_Green, Plane_Red, and Plane_Blue. You can use any of those three options, or you could make your own new material and use that instead. There is also a Line Renderer component on the AR Default Plane that controls the appearance of the plane’s outline – you can edit that too!

Feature points are notable features in the environment that the device can track between frames, such as a knot in a wooden table. A set of multiple feature points is called a point cloud. Simple point clouds can be used for simple tasks like spawning a virtual object in the environment. More complex, detailed point clouds can be used for advanced tasks like mapping or modeling an environment. 

You need the AR Point Cloud Manager component and an AR Default Point Cloud prefab to implement point clouds in your app. This is a very similar process to the one you followed when setting up an AR Plane Manager and AR Face Manager. 

Note: You may want to temporarily disable the AR Plane Manager component in order to see the point cloud clearly.

The AR Point Cloud Manager (Script) component set up in the Inspector window.

In this tutorial you selected a set of assets for your portal and created a basic plane detection application — great job! In the next tutorial, you will get started on the portal placement functionality by detecting a user’s touch in your app.

Set up a scene with plane detection

1. Overview

2. Why is plane detection useful?

3. Import the AR portal assets

4. Select your portal theme

5. Create a new scene

6. Set up a Default Plane with a new material

7. Configure the AR Plane Manager

8. Build and test

9. More things to try

10. Next steps

Complete this tutorial