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

03ee5ad1-9b95-42d3-94e9-507190d19c3a:84442509f539

Overview

What is raycasting?

Add an AR Raycast Manager

Add the AR Foundation Visual Scripting node

Add variables for raycasting

Add the Raycast node to the node sequence

Configure the Raycast node inputs

Display the raycast result on the debug UI

More things to try

Next steps

Zu-UnityLearn

Desarrollo de AR para novatos

Hammad_N

Visual Scripting para novatos

raycast-true-false-demo.mp4

Add-AR-Foundation-VSNode.mp4

raycast-true-false-demo (1).mp4

2B-3.9-concat-msg.mp4

Add-AR-Foundation-VSNode-revised-pt2.mp4

make-room-for-ar-raycast2022.mp4

configure-ar-raycast-inputs2022_NEW.mp4

raycast-boolean-to-string2022_NEW.mp4

Eventually, the user’s touch on a plane will spawn a portal. In this tutorial, you will first determine whether or not the user has successfully touched a plane detected in the environment. 

To implement this functionality, you will use a technique called raycasting.

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 

Your app detects vertical or horizontal planes in the environment. It also detects the position of a user’s touch on the screen. Now you need to use those two features to determine whether the user has successfully touched one of the planes. 

Later on, the user’s touch on a plane will spawn a portal so the user can view a virtual world through a surface in their physical environment. 

Raycasting is the process of projecting an invisible straight line (a ray) from an origin point through a scene to determine what that line would hit. It’s a little similar to fishing, where you cast a line to see what fish you can catch. With raycasting, you cast a ray to see what that ray would hit in the scene. 

All of the objects hit by a raycast are usually stored in a List variable. You can then access the objects within that list and do whatever you want with them.

Raycasts are very useful in video game development. For example, casting a ray can help determine if a weapon would hit its target or if there are objects close by. 

In the case of your app, raycasts will help you to determine whether something on the screen was successfully touched by the user. When the user touches the screen, the app will cast a ray straight into the scene using the touch position as the origin point. If that ray hits a plane, the app will register this as a successful touch.

 A diagram showing the behavior of a raycast. A straight ray is generated from an origin, and any objects the ray intersects will be stored in a list.

Previously, you added an AR Plane Manager component to manage planes detected in your scene. Similarly, you will need an AR Raycast Manager component to manage the rays cast in your scene. The AR Raycast Manager provides precisely the functionality that you need: it casts a ray from a screen touch position and determines whether that ray intersects with a trackable object, like a horizontal or vertical plane.

Follow these instructions to add the new component:

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

2. In the Inspector window, add a new AR Raycast Manager component.

The AR Session Origin GameObject shown in the Inspector with the AR Raycat Manager component highlighted.

In order to complete this functionality, you will need to make use of the AR Raycast Manager: Raycast Visual Scripting node.

However, if you try to add this node to a script graph, you won’t find it in the node library. Try searching for the node in the Graph Editor right now — there are no results.

Up to this point, you have not actually used any nodes that are unique to AR development or the AR Foundation package. The Visual Scripting library does not come with AR-specific nodes by default. You have to manually import the AR Foundation node library, and then you will be able to add AR-specific nodes.

Watch the video or follow the instructions below to import the AR Foundation node library:

1.  From the main menu, go to Edit > Project settings. 

2.  In the left panel of the Project Settings window, select Visual Scripting.

3.  Use the foldout (triangle) to expand the Node Library section, then scroll to the bottom of the list of node assemblies. 

4.  At the bottom of the list, select Add (+) to add a new item to the list.

5.  Select the new item’s assembly dropdown, then search for “AR Foundation” and select Unity.XR.ARFoundation.

6.  Beneath the list, select Regenerate Nodes to load the AR Foundation nodes into the toolset.

Now that you have the node library in your project, you can add the specific node types that you’ll need.

Watch the video or follow the instructions below to add new node type options:


1.  Expand the Type Options, located directly above the Node Library. Now that the nodes have been added, we’ll add the specific components that will be used in the visual script being worked on.

2.  At the bottom of the list, select the Add (+) button three times to add three new items to the list.

3.  Select the first new Type dropdown and search for AR Raycast Manager.

4.  For the remaining two type fields, add AR Plane Manger and AR Plane.



5.  Beneath the list, select Regenerate Nodes to make the new nodes accessible in the Script Graph window.

6.  In the Graph Editor, use the fuzzy finder to search for “AR Raycast Manager” and verify that AR-specific nodes are now available.

The AR Raycat Manager: Raycast node shown in the script graph.

Searching for “ar raycast manager” in the script graph’s fuzzy finder with no search results available.

The Visual Scripting project settings with the AR Foundation assembly highlighted in the list of included assemblies. The Regenerate Nodes button is also highlighted.

The Visual Scripting project settings with the three new Type nodes highlighted.

In order to complete this functionality, you will need two new Object variables in your visual script: one for the AR Raycast Manager component you just added and another for the List that will store the objects hit by the raycast.

Remember, when a raycast goes into the scene on a mission to hit objects, the raycast will produce a list of objects that it hits. You need to be ready to store that list in a new variable. In this case, you’re going to use a specific type of list called an Aot List. Aot stands for Ahead Of Time, since the list is defined ahead of time — before the application is run.

Follow these instructions to create new variables for the AR Raycast Manager and Aot List:

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

2.  In the Blackboard, select the Object variable tab.

3.  Create a new variable named “arRaycastManager” and set its Type to AR Raycast Manager.

4.  Select the Value object picker (⊙) and choose the XR Origin (AR Rig). 

XR Origin (AR Rig) contains the AR Raycast Manager component.

5. Create another new variable named “hits” and set its Type to Aot List, but leave its Value empty. 

The raycast will add objects to the list while the app is running.

You now have all the variables you need to implement the raycast.

The arRaycastManager variable and the hits variable highlighted in the Object tab of the Blackboard. 

Your app will perform the raycast right after it determines the position of the user’s touch, but before it sends a message to the debug UI. 

Watch the video or follow the instructions below to add the Raycast node to your graph:  

1.  In the Graph Editor, make room for the new Raycast node after the On Input System Event Vector2 node.

2.  Add an AR Raycast Manager: Raycast (Screen Point, Hit Results, Trackable Types) node using the fuzzy finder.

Important: Make sure to select the Raycast node with the specific inputs noted above – there are others with very similar inputs that don’t provide the same functionality.

3.  Disconnect and reconnect the nodes so that the raycast is performed after the On Input System Event Vector2 node, but before the To String node.

Your Raycast node is now in the correct position in the sequence.

The AR Raycast Manager: Raycast node connected in the node sequence flow, with its inputs not yet configured.

You’re now ready to configure the raycast with your specific inputs. You can review all of the inputs required for this node in the Graph Inspector when you select the Raycast node.

Watch the video or follow the instructions below to configure your Raycast node inputs:

1.  Go to the Object tab of the Blackboard. Click and drag the arRaycastManager and hits variables into the Graph Editor.

2.  Connect the Target input to the arRaycastManager variable node.

3.  Connect the Screen Point input to the Vector 2 output node of the On Input System Event Vector2  node and delete the link with the input of the Vector2 to String.

4.  Connect the Hit Results input to the hits variable node.

5.  Set the Raycast node’s Trackable Types property to None to deselect all available options, then select Plane Within Polygon.

The inputs of the Raycast node highlighted in the Graph Inspector.

The AR Raycast Manager: Raycast node with all of its inputs configured.

Once again, you will use the debug UI to confirm that your app is functioning as expected. You’re going to configure the debug UI to display true if the user touches a valid plane and display false if the user touches something that is not a valid plane. This will confirm that the app is correctly recording whether or not the user is selecting a plane where the app could place a portal.

Previously, you used the Vector 2: To String node to convert the touch position to text that could be displayed in the UI. However, you can use the Raycast node to take a different approach.

If you select the Raycast node and check the Graph Inspector, you’ll notice that the output is a Boolean — a true or false value indicating whether or not the raycast hit a plane or not.

Instead of displaying the touch position in the debug UI, you’re now going to display that Boolean. This means that you need to use a Boolean: To String node, instead of the Vector 2: To String node. 

Watch the video or follow the instructions below to replace the debug UI’s message with the Raycast node’s output Boolean:

1.  In the Graph Editor, right-click on the Vector 2: To String node and select Replace. Search for and select the Boolean: To String () node instead.

2.  Connect the Raycast output to the To String input. The output of the To String node should still be connected to the Set Text node.

3.  Build and run the app to preview the new functionality. When you touch a valid plane, the UI should display True. When you touch outside of a valid plane, the UI should display False. 

Congratulations! You have successfully used raycasting to detect what a user has touched on the screen.

 The Raycast node shown in the Graph Inspector with the Boolean Result output highlighted.

The visual script that displays the Raycast node’s output Boolean on the Debug UI.

If you want to further develop your skills, explore new concepts, or improve your project, check out the optional activity below. 

This activity is entirely optional, so if you’re not interested, no problem – just skip this step. 

We do recommend attempting this kind of challenge to get the most out of this learning experience. Good luck!

Medium: Concatenate a more specific debug message 

In this tutorial, you displayed a boolean value on the debug UI, which said either “true” or “false”. This is not a very clear debug message – It should say something more specific, like “plane touched: true” or “ plane touched: false”.

In order to display this kind of message, you’ll need to use concatenation. In programming terminology, concatenation usually refers to the process of joining multiple strings of characters together. You often concatenate plain text strings (like “plane touched:”) with more dynamic data (like the Boolean value) to make that data more readable. See if you can implement a more useful concatenated debug message in your app. 

Use the following guidance for help completing this challenge:

Use the String: Concat (arg 0, arg 1) node. 

Connect a simple string that says “plane touched: “ to the first input and the Raycast Boolean to the second input.

Connect the Concat node output to the Set Text node.

In this tutorial you used a raycast to determine whether or not the user touched a valid plane target on the screen. In the next tutorial, you will actually spawn the portal GameObject into the scene, positioning it on the plane selected by the user.

Detect when the user touches a plane

1. Overview

2. What is raycasting?

3. Add an AR Raycast Manager

4. Add the AR Foundation Visual Scripting node

5. Add variables for raycasting

6. Add the Raycast node to the node sequence

7. Configure the Raycast node inputs

8. Display the raycast result on the debug UI

9. More things to try

10. Next steps

Complete this tutorial