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

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

da8daa92-9503-4023-b202-4d64cfd3edbf:de360299eb2b

Overview

How do you instantiate an object?

Instantiate the portal

Fix the vertical portal’s rotation

How to limit an action to only run one time?

Set the Boolean values

Use an If node to run the sequence only once

Disable all planes after a portal spawns

More things to try

Next steps

Zu-UnityLearn

Desarrollo de AR para novatos

Hammad_N

Visual Scripting para novatos

portal-spawn-final.mp4

vert-portal-spawning-properly.mp4

vert-portal-rotated-downwards (2).mp4

rotate-portal-face-down.mp4

vert-portal-spawning-properly (1).mp4

hundreds-of-portals.mp4

set-portalspawned-bool-true.mp4

display-boolean-one-portal-only.mp4

disable-AR-planes.mp4

portal-spawn-final-no-green-planes.mp4

2B-4.8-add-particle.mp4

2B-4.8-add-sound.mp4

2B-4.8-limit-one-plane.mp4

instantiate-the-portal2022.mp4

check-if-portalspawned-is-false2022.mp4

You have done so much setup work for this portal: you’ve chosen your portal theme, set up plane detection, detected the user’s touch position, and raycasted into the scene to determine whether or not the touch was on a valid plane. In this tutorial, you will actually spawn (or instantiate) the portal GameObject onto the selected plane in your environment. 

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

robinmitra

Crear interacciones para aplicaciones básicas con Visual Scripting

Create a plane detection AR app 

You have done so much setup work for this portal: you’ve chosen your portal theme, set up plane detection, detected the user’s touch position, and raycasted into the scene to determine whether or not the touch was on a valid plane. Now you will actually spawn (or instantiate) the portal GameObject onto the selected plane in your environment. 

By the end of this tutorial, your project will look something like the video demos below.

The trickiest aspect of spawning this portal in your scene will be only spawning one of them. You will need to use a new If node to make sure that you don’t accidentally spawn hundreds of portals at once.

When you spawn a new object (GameObject) in a scene it is often referred to as instantiating, as you are creating a new instance (version) of an object. In this case, you’ll create a new instance of a portal prefab. 

When you instantiate this object, you’ll need to define the following inputs: 

For the Original input, you’ll select the prefab you want to instantiate. If your app detects horizontal planes on tables and floors, you’ll select a horizontal portal that you can peer down into. If your app detects vertical planes on walls and doors, you’ll select a vertical portal that you can peer through like a window. 

The portals are located in _ARPortal > Prefabs > Portals — we have provided a horizontal and vertical option for all three of the environments. 

The goal is to position the portal at the same position as the plane. In order to get the position of the plane, you’ll use the Find Object Of Type node and the Transform: Get Position node. You can then use that same position when you instantiate the portal GameObject. 

The portal’s rotation should also match the plane’s rotation. Just as you used the Transform: Get Position node to get the plane’s position, you’ll use the Transform: Get Rotation node to get the plane’s rotation. 

The inputs for the Instantiate node highlighted in the Graph Inspector.

The portal prefabs shown in the Project window.

The Transform: Get Position node connected to the GameObject: Find Object of Type node.

The Transform: Get Rotation node connected to the GameObject: Find Object of Type node.

Now that you understand the approach for instanting this portal, watch the video or follow the instructions below to update your visual script:

1.  Check that you have the TapToPlace script graph open in the Script Graph window.

2.  In the Graph Editor, at the end of the On Input System Event sequence, add a new Game Object: Find Object of Type (Type) node. Set the Type input to AR Plane. 

3.  Add a new Game Object: Instantiate node and connect it to the end of the sequence. Make sure to select the Instantiate node with the three inputs: Original, Position, and Rotation. 

4.  For the Original input, use the object picker (⊙) to select either a horizontal or vertical portal prefab. 

5.  For the Position input, create a Transform: Get Position node. Attach the Find Object of Type node output to your new Get Position node, which then connects to the Position input of the Instantiate node. 

6.  For the Rotation input, create a Transform: Get Rotation node. Attach the Find Object of Type node output to your new Get Rotation node, which then connects to the Rotation input of the Instantiate node. 

7.  Build and run the app to preview the new functionality. 

When you touch a valid plane, a portal should spawn at the center of the plane. 

Important: If you’re using vertical planes and portals, you'll notice that the portal spawns rotated downward rather than flat against the wall (as shown below). 

Don’t worry – you’ll fix this in the next step!

The visual script to instantiate the portal prefab with the position and rotation of the plane. 

If you are using a vertical portal, complete this step to fix the portal’s spawn rotation. If you are using a horizontal portal, you don’t need to complete this step, but we recommend that you read through it anyway to better understand how to orient objects on planes. 

If you tried to create a vertical portal, you’ll have noticed that the portal spawned facing downward.

The problem is that vertical planes are rotated 90 degrees from the floor. When you set your portal’s rotation to match the plane’s, this will also rotate the portal 90 degrees from the floor. 

To visualize this, the image below shows how a vertical portal would spawn on a horizontal plane.

But notice what happens when the plane is rotated by 90 degrees to the position of a vertical wall — the portal rotates downward.

To fix this downward rotation, the portal window needs to be rotated backwards to lie flat so that when it spawns on a vertical plane, the portal is vertical too.

Follow these instructions to rotate your vertical portal and have it spawn flat against a vertical plane:

1.  From the Project window, go to _ARPortal > Prefabs > Portals, then double-click the portal you’re using to open the prefab in the Scene view.

2.  In the Hierarchy window, select the Window GameObject, then rotate it by 90 degrees so that it is facing upward in the Scene view. The outside face of the window should point in the direction of the green y-axis arm of the Scene gizmo and the top of the window should point in the direction of the blue z-axis arm.

Important: You must rotate the child Window GameObject — not the parent GameObject. The top-most parent GameObject’s rotation gets reset when it is instantiated, so any edits to this parent GameObject’s rotation will be overridden.  

3.   Build and run the app to preview the new functionality. When you instantiate the vertical portal, it should lie flat against the vertical plane, oriented correctly.

A still from a video where a vertical portal is sticking out of a wall, rotated 90 degrees downwards. 

A vertical portal window sitting upright on top of a green plane in the Scene view. 

A vertical portal window rotated backwards to lie flat on top of a green plane in the Scene view.

The parent Window GameObject selected in the Hierarchy. In the Scene view, the top of the window is aligned with the blue z-axis arm. 

In the previous step, it may have seemed like you were only spawning a single portal onto the plane — but in reality, you may have actually spawned hundreds of portals! 

The debug UI in the video below displays the current number of objects in the scene. As you will see, portals are generated continuously while the user’s finger is touching the screen.

Spawning multiple portals may not seem like a huge problem right now, but once you have an entire scene spawned within the portal, instantiating more than one portal could severely slow down the app. 

You can avoid spawning many portals by preventing the node sequence from running more than one time. You can use a Boolean to limit the number of times a sequence runs using the following logic: 

Create a Boolean variable and set it to false by default.

At the end of the node sequence, set the Boolean to true. 

Only run the sequence if the Boolean is false.

The diagram below visualizes the Boolean logic.

Note: If you want to display the number of objects spawned in your own app’s Debug UI, check out the visual script below. This is entirely optional.

A diagram of the boolean logic required to spawn only a single portal in the scene. At the start of the sequence, the Boolean is set to false. When a touch event occurs, the Boolean value is checked.. If the Boolean is false, the instantiation sequence runs and the boolean is set to true. When another touch event occurs, and the Boolean is true, the entire sequence will stop.

The visual script to display the number of objects spawned in the app’s Debug UI.

As you learned in the previous step, setting up this Boolean logic is a three-stage process. Stage one and stage two are laid out below.

Stage 1: Create the Boolean variable and set it to false

Follow these instructions to set up a new Boolean variable:

1.  Check that the TapToPlace script is open in the Script Graph window. 

2.  In the Object tab of the Blackboard, add a new variable named “portalSpawned” and set the Type to Boolean. 

3.  Make sure to leave the checkbox disabled, which means it is false by default.

Stage 2: Set the Boolean to false at the end of the sequence

Watch the video or follow the instructions below to set the Boolean value to false:

1.  After the Instantiate node, connect a Set Object Variable node. Set the variable Name to portalSpawned.

2.  Connect the New Value input node to a new Boolean Literal node. 

3.  Enable the checkbox in the Boolean node to set the new value to true.

The portalSpawned variable shown in the Blackboard with its type set to Boolean and its value property disabled, setting it to false.

The portalSpawned Boolean will now be set to true after the first instantiation sequence runs. The final stage of this process is preventing the sequence from running again when the portalSpawned Boolean is true. You will use the If node to implement this logic. 

The If node has Boolean Condition input as well as True and False outputs. This allows you to plug in a Boolean, then initiate one sequence if that Boolean is true or another sequence if the Boolean is false. 

Watch the video or follow the instructions below to check if the portalSpawned Boolean is false at the start of your script:

1.  At the start of the On Input System sequence, add a new If node directly after the On Input System Event Vector2 node, and connect the Enter input of the If node with the output of the On Input System Event Vector2.

2.  Connect the Condition input of the If node to a Get portalSpawned variable node. This is an alternative method to dragging the variable in from the Blackboard.

3.  Connect the False output flow of the If node to the rest of the sequence. The rest of the sequence will now only run when portalSpawned is false.

You should now only be able to spawn a single portal in the scene. To test this, try to spawn a portal on the first plane that appears, then try to spawn a second portal on the second plane that appears. You should now not be able to spawn a second portal. 

As an optional challenge for your visual scripting skills, you could also use the debug UI to display the current Boolean value, as in the example above.

The If node shown in the Graph Inspector.

The visual script to check if the portalSpawned Boolean is false at the start of the On Update sequence.

After a valid portal appears, all existing AR planes should be removed in the app and no new AR planes should appear. The focus should be entirely on the single portal in the scene — not on distracting, non-functional, semi-transparent planes.

Conveniently, the AR Plane Manager includes the following two nodes: 

AR Plane Manager: Set Trackables Active, which you can use to deactivate all existing planes.

AR Plane Manager: Set Enabled, which you can use to disable the entire AR Plane Manager, preventing any new planes from generating.

To use these nodes, you need to create a new AR Plane Manager variable.

Watch the video or follow the instructions below to disable all existing and newly-detected planes:

1.  In the Object tab of the Blackboard, create a new variable named “arPlaneManager” and set its Type to AR Plane Manager. Use the object picker (⊙) to select the AR Session Origin GameObject. 

2.  At the end of the sequence, add a new AR Plane Manager: Set Trackables Active node. Make sure the new node’s Active checkbox is disabled, which deactivates the trackable planes. 

3.  At the end of the sequence, add an AR Plane Manager: Set Enabled node. Make sure the node’s checkbox is disabled, which disables the plane manager. 

4.  Connect both of the new nodes’ AR Plane Manager inputs to your arPlaneManager Object variable.

5.  Build and run the app to preview the new functionality. When a portal is spawned, all planes should disappear and no new planes should be detected.

6.  After you have verified that the app is working as expected, it's a good time to disable the Debug Canvas GameObject and disconnect all nodes related to the Debug UI nodes.

The visual script to ​​disable all existing and newly-detected planes at the end of the instantiation sequence.

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. 

Instantiate the portal on a plane

1. Overview

2. How do you instantiate an object?

3. Instantiate the portal

4. Fix the vertical portal’s rotation

5. How to limit an action to only run one time?

6. Set the Boolean values

7. Use an If node to run the sequence only once

8. Disable all planes after a portal spawns

9. More things to try

10. Next steps

Complete this tutorial