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

c7056746-5aaf-4a98-b4af-e82e546c49c5:7b3307247bef

Overview 

Add layers for the portal window and contents

Put GameObjects on appropriate layers

Apply a custom shader to portal window

Assign a custom URP asset

Configure the Renderer’s layer settings

Finalize your portal

How is this really working?

More things to try

Next steps

Zu-UnityLearn

Desarrollo de AR para novatos

Hammad_N

Visual Scripting para novatos

portal-fully-functional (1).mp4

vertical-portal-fully-working (1).mp4

double-check-portal-layers.mp4

remove-portal-layers-from-filtering.mp4

portal-fully-functional (2).mp4

AR-2B-6.9-disappearing-instructions.mp4

AR-2B-6.9-select-portal-detection.mp4

AR-2B-6.9-select-portal-detection (1).mp4

AR-2B-6.5-set-quality-settings.mp4

In this tutorial, you'll add the finishing touch to your work: limiting the visibility of the world inside the portal so it can only be viewed through the portal window. This will dramatically increase the wow-factor of your app!

Games

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 

It's time to add the finishing touch to your work: limiting the visibility of the world inside the portal so it can only be viewed through the portal window. This will dramatically increase the wow-factor of your app!

Achieving the full portal effect will require fairly advanced rendering techniques, including custom shaders, custom renderer features, render layers, layer filtering, and layer masks. These complex techniques are very particular to this project and to projects with a similar, highly specific goal. 

It’s unlikely that you will take the skills learned in this one tutorial and apply them to other projects. However, the process should still be interesting and will produce an incredibly cool effect for your portal. ​​

Now without further delay, let’s get this portal working!

You will control what is visible and what is not visible using Unity’s layer system. Layers provide a simple way of separating GameObjects into different groups. You can then control what happens to distinct groups of GameObjects independently, based on the layer they’re on. 

For the portal app, you will create one layer for the portal window and another layer for the portal content (anything inside the portal). 

Follow these instructions to create the two new layers:

1.  From the toolbar, select the Layers dropdown and then select Edit Layers.

3.  Enter “PortalWindow” for User Layer 6 and “PortalContents” for User Layer 7. Even though Layer 3 is available, it is simpler to keep these layers next to each other on layers 6 and 7. 

Note: It's important that you enter “PortalContents” on a higher layer number than “PortalWindow”. Later, you will filter out what the app renders based on which layer number is higher. 

The Layers foldout expanded with the Edit Layers button highlighted.

The Tags & Layers editor shown in the Inspector with ​​PortalWindow set as User Layer 6 and PortalContents set as User Layer 7.

You have now created the required layers, but you have not yet put any GameObjects on these layers. Follow these instructions to assign the portal window and portal contents to the right layers:

1.  In the Project window, double-click your portal prefab to open it in the Scene view. 

2.  In the Hierarchy window, expand the Window GameObject, then select the Glass GameObject.

3.  At the top of the Inspector window, from the Layer dropdown, select PortalWindow.  

4.  In the Hierarchy window, select the [Theme]_Level parent GameObject that includes all of the GameObjects in the portal world. 

5.  From the Layer dropdown, select PortalContents. 

6.  When the Change Layer dialog window appears, select Yes, change children. 

You need to include all of the child GameObjects of the level in this layer.

7.  Review the GameObjects in the Hierarchy to make sure that the portal Glass GameObject is on the PortalWindow layer and that all other GameObjects are on the PortalContents layer.

The Glass child GameObject selected and shown in the Inspector window. The Layer foldout is expanded with the PortalWindow layer selected.

 The level prefab GameObject selected and shown in the Inspector window. The Layer foldout is expanded with the PortalContents layer selected. The Change Layer dialog window has the Yes, change children option highlighted.

Shaders perform calculations that determine how materials appear on the screen. The same material can look very different depending on the type of shader you apply to it. 

For example, look at the same brick material below, but with three different shaders applied.

You need to use a custom shader in order for the portal window to display objects on one layer, but not another layer. This shader will behave just like a normal shader, but with one important difference: the ZWrite property will be disabled. This concept is a bit too complex for this tutorial, but you can read more about the ZWrite property in the documentation.

Follow these instructions to apply the custom shader to your portal window:

1.  With your portal prefab still open in the Hierarchy window, expand the Window GameObject and select the Glass GameObject.

2.  In the Inspector window, find the Mesh Renderer component.

3.  In the Materials section, double-click the PortalWindow material to open it in the Inspector window.

4.  In the Material Inspector, select the Shader dropdown and choose Custom > PortalWindowShader.

Nothing will appear to change yet, but this is a critical step for the portal window to function as expected. 

Three separate images of brick materials, each with a slightly different appearance. The image on the left has normal-looking bricks. The image in the middle has bumpy-looking bricks. The image on the right has shiny-looking bricks.

Caption: Images from the Unity Manual

The Glass child GameObject selected and shown in the Inspector window. There is an arrow pointing to the PortalWindow material, which is set as Element 0 in the Materials section.

In the Material Inspector, the Shader dropdown is expanded and PortalWindowShader is selected.

This project is built with the Universal Render Pipeline (URP), which is a highly customizable rendering system used to achieve high-quality, optimized graphics in a Unity project. When you use URP you can also add Renderer Features, which control the rendering of objects based on their layer. To save you time, we have provided you with a pre-configured URP asset that already includes these Renderer Features — you’ll learn how those Renderer Features were set up a bit later. 

Follow these instructions to assign the custom URP asset in your graphics settings:

1.  From the main menu, select Edit > Project Settings. In the left panel, select Graphics.

2.  In the Scriptable Render Pipeline Settings, use the object picker (⊙) to select the URP_Portal Asset.

3.  A window may pop up warning that changing the render pipeline may take a significant amount of time — select Continue.

In addition to changing the URP asset in the main Graphics settings, you also need to do so in the Quality settings. The Quality settings allow you to select specific URP assets for different quality levels, including assigning a default quality level for each platform. 

However, since you need the portal to be functional at all quality levels on all platforms, it makes sense to set the URP_Portal Asset for all quality levels. 

4.  In the left panel of the Project Settings window, select Graphics.

5.  Select each quality level and set the Render Pipeline Asset to the URP_Portal Asset for each level.

This demonstrates the power of URP: you can easily configure and switch between different URP assets to change how your scenes are rendered.

In the Scriptable Render Pipeline Settings, the object picker (circle) is highlighted and the URP_Portal Asset is selected.

The Quality settings window with the URP-Performant asset set for the Render Pipeline Asset property. 

Next, you need to configure the Renderer Features so that the PortalContents layer will only be visible through the PortalWindow layer.

Follow these instructions to configure your project:

1.  Open your portal prefab in the Scene view. 

2.  In the Project window, use the search bar to locate and select the URP_Portal Asset_Renderer.

3.  In the Inspector window, in the Filtering section, use the dropdowns for the Opaque Layer Mask and Transparent Layer Mask properties to deselect the PortalWindow and PortalContents layers for both properties. 

This should make the portal window pane and portal contents disappear in the Scene view.

The Filtering section controls which layers your app will render. Deselecting your two custom layers filters the portal window and portal contents out of the rendering process. You can still see the portal window frame, since it is on the Default layer. Now you’ll use renderer features to add the portal window and contents back into view with custom behaviors.

4.  With the URP_Portal Asset_Renderer still selected, locate and expand the Portal Window (Render Objects) Renderer Feature. Set the feature’s Layer Mask property to the PortalWindow layer. 

As you do this, watch the semi-transparent portal window reappear in the Scene view.

In the Inspector window, notice the Portal Window Queue property is set to Transparent, since the window material includes transparency. This tells the renderer to render any transparent objects located on the PortalWindow layer.

We included these pre-configured renderer features in the provided URP asset to save you time. To add new Renderer Features, you can select Add Renderer Feature at the bottom of the Inspector.

5.  Locate and expand the Portal Contents (Render Objects) Renderer Feature, then set its Layer Mask property to the PortalContents layer. 

As you do this, watch the portal contents become visible through the portal window.

In the Project window, the search bar has the text “urp” and URP_Portal Asset_Renderer is selected from the search results.

In the Portal Window (Render Objects) Renderer Feature, the Layer Mask property is set to the PortalWindow layer.

In the Portal Contents (Render Objects) Renderer Feature, the Layer Mask property is set to the PortalContents layer.

Build and run the app to preview the fully functional portal. It should appear similar to the video below.

Now that you have experienced the fully functional portal, you may wish to make edits and see if you can improve it. You could change the scale, relocate some of the set pieces, change the portal position within the scene, or add completely new elements. 

This custom portal rendering relies on a feature in URP called stencils. You can use stencils to specify areas of the screen that can or cannot be drawn on, which is perfect for effects like portals or mirrors. 

Stencils are a bit complex, but if you’re interested in learning how they work, then read on. Otherwise, you can skip this step!

These digital stencils are very similar to a physical stencil you might use when drawing with a pencil. A stencil defines an area that you can draw within and prevents you from drawing outside that area. You can draw whatever you want within the stencil area. 

Stencils are configured in the Renderer Feature Overrides section. If you review the Portal Window Renderer Feature now, you will notice that the Stencil property is enabled and the Value is set to 1. 

Just like you can use multiple physical stencils layered on top of each other, you can also have multiple stencil layers in URP. The Value property controls the number of stencils in use. The Compare Function is set to Always and its Pass property is set to Replace. You can read more about the specifics in the stencil documentation, but these settings add the pixels of the portal window to the first stencil layer. 

With the stencil area defined on the stencil layer 1, the next step is rendering the portal contents within that stencil area on the screen. 

In the Portal Contents Renderer Feature Overrides section, you will see that the Stencil property is enabled for this feature too. However, in this case, you will see that the Compare Function is set to Equal, which will only render the pixels of these GameObjects if they fall within that defined stencil area. 

If you’re interested, try playing around with these stencil settings to see their effect and better understand how stencils work. 

 A photograph of a stencil for drawing ellipses with someone drawing inside one of the stencils. 

In the Portal Window (Render Objects) Renderer Feature, the Stencil property is enabled and the Value is set to 1. The Compare Function is set to Always and its Pass property is set to Replace.

In the Portal Contents (Render Objects) Renderer Feature, the Stencil property is enabled and the Value is set to 1. The Compare Function is set to Equal and its Pass property is set to Keep.

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!

When a user opens your app, they may not be sure what to do. It would be very helpful to display a message that tells them to slowly scan the area for a flat surface, then to tap the screen when one appears. However, when they do place a portal, this message should disappear.

The user may place a portal, but may not be happy with its location. Or, the user may just wish to place a new portal in another location. Currently, the only way for the user to place a new portal is to restart the application entirely. There should be a way within the app experience to reset plane detection and allow the user to place a new portal. Use the following guidance for help completing this challenge:

Create a new reset button and a new Script Machine to manage the reset button functionality.

When the reset button is pressed, the portal GameObject should be destroyed, the AR Plane Manager should be reactivated, and the AR Session should be reset. You can use the AR Session: Reset node to reset plane detection in the area. If you do not reset the AR Session, any previously detected planes will instantly reappear when the AR Plane Manager is reenabled. 

Optionally, you can have the reset button only appear when a portal has spawned. 

Difficult: Allow the user to select vertical or horizontal plane detection

You have selected either a vertical or horizontal portal for this experience, but why not allow the user to choose for themselves? Use the following guidance for help completing this challenge:

Create a new portal prefab so that you have one horizontal portal and one vertical portal. Review the previous tutorials for guidance on creating a new portal.

By default, set the AR Plane Manager Detection Mode property to None. 

Create a new Script Machine to manage the portal style selection. 

When a button is pressed, use the AR Plane Manager: Set Requested Detection Mode node to set the detection mode appropriately.

In the instantiation sequence, use an If node to check which detection mode was pressed. If the detection mode is vertical, instantiate the vertical portal. If the detection mode is horizontal, instantiate the horizontal portal. 

Limit the visibility of the portal world

1. Overview

2. Add layers for the portal window and contents

3. Put GameObjects on appropriate layers

4. Apply a custom shader to portal window

5. Assign a custom URP asset

6. Configure the Renderer’s layer settings

7. Finalize your portal

8. How is this really working?

9. More things to try

10. Next steps

Complete this tutorial