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.

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

Create basic application interactions with Visual Scripting

Absolute Beginner Visual Scripting

Optimize assets and application to meet mobile performance standards

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

Mobile AR Development

AR Sumo Balls

Goggles Filter

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

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

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

3233a48c-9bdf-43e3-8ebd-1ad9bc8506f4:34e5fdffb3fe

Overview

Add a world space canvas

Customize world space UI

Update the UI button

Create variables in your script graph

Get a reference to the canvas

Display popup on click

Make button toggle info on and off

More things to try

Next steps

Zu-UnityLearn

Desarrollo de AR para novatos

Hammad_N

Visual Scripting para novatos

Mission2A4.7TestingOnDeviceUIToggleOnAndOff.mp4

Mission2A4.5VisualScriptAddCanvasPopopToSetup.mp4

2A-4.6-test-canvas-popup-in-editor (1).mp4

Mission2A4.6VisualScriptDisplayPopupOnClick.mp4

Mission2A4.6TestingOnDeviceUIToggleOnButNotOff.mp4

Z-TO-DELETE.mp4

Mission2A4.7TestingInEditorToggleInfoOnOff.mp4

Mission2A4.7TestingOnDeviceUIToggleOnAndOff (1).mp4

Mission2A4.9MoreToTryMediumHaveCanvasLookAtCamera.mp4

World space layouts allow you to place user interface and image elements in the real-world AR space instead of attaching them to the screen. Unlike a screen space canvas, you can position a world space canvas anywhere in the scene. 

In this tutorial, you’ll make a label that will hover near the model when it appears over the marker. You’ll also make a button to let the user turn the label on and off. 

Games

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

robinmitra

Crear interacciones para aplicaciones básicas con Visual Scripting

World space layouts allow you to place user interface and sprite elements in the real-world AR space instead of attaching them to the screen. Unlike a screen space canvas, you can position a world space canvas anywhere in the scene. 

In this tutorial, you’ll make a label that will hover near the model when the model appears over the marker. You’ll also make a button to let the user turn the label on and off. 

The first step is to add a world space canvas to your scene. We’ve provided a prefab for this canvas.

Follow these instructions to add the provided assets for the world space UI to your scene: 

1.  In the Project window, open the prefab of the modelObject in prefab editing mode.

2.  In the Project window, navigate to Assets > _ARMarker > Prefabs > UI. Click and drag the CanvasPopup prefab into the Hierarchy window as a child GameObject of the [your model]Mesh GameObject.

3.  In the Scene view, change the location, rotation, and scale of the canvas relative to your model.

4.  Stay in prefab editing mode for the next step.

Important: The canvas must be a child GameObject of the [your model]Mesh GameObject, otherwise it will not be affected by the rotate buttons.

The world space popup canvas after positioning, rotation, and scaling.

Once you have your canvas positioned the way you want it in the world, it’s time to make it look a little more stylish. 

Follow these instructions to customize the world space UI: 

1.  In the Hierarchy window, select the Panel child GameObject under CanvasPopup.

2.  In the Inspector window, in the Image component, change the Source Image to a different sprite using the picker (⊙). You could also create or download your own UI image.

3.  In the Hierarchy window, select the Text (TMP) child GameObject of the Panel GameObject, and in the Inspector window change the Text Input text to something you want to say about your GameObject.

4.  Customize the font, size, and style of the text in the TextMeshPro component.

5.  If you want to adjust the size of the Panel or Text GameObjects, use the Rect tool. 

6.  When your layout and style are just the way you want them, exit prefab editing mode. 

The world space popup canvas after customizing the text.

Next, you’ll make one of the buttons turn your world space canvas on and off so that users can view or hide the text next to the model. In this step you’ll also customize the look of your button. 

Follow these instructions to customize the UI button for the world space UI: 

1.  In the Hierarchy window, select ButtonCanvas > Button3 and rename it “ButtonPopup”. 

2.  Customize the sprite for the button, if you prefer.

3.  In the Text (TMP) child GameObject, change the text to “Info”, or something else that gives your user an idea of what this button will do.

4.  Customize the style, font, and other properties of the text as you like. 

The Info button with edited sprite and text formatting.

Now that your button looks great, it is time to make it functional. Similar to what you did with the mesh itself, you will need to get a reference to the popup canvas by searching for it when it spawns in the scene. To achieve this functionality, you’ll need a variable for the UI button and an unassigned variable for the canvas. 

Follow these instructions to create the two new required variables for your script graph: 

1.  In the Hierarchy window, select your VisualScripts GameObject and open the Setup graph.

2. In the Blackboard, add a new GameObject variable called “buttonPopup”, select Button from the Type dropdown, and then assign the Value ButtonPopup (Button) using the picker (circle).

3. In the Blackboard, add a new GameObject variable named “canvasPopup” and select GameObject from the Type dropdown. Don’t set a Value.

Blackboard settings for buttonPopup and canvasPopup values.

With your variables ready, you’re ready to search for the popup canvas child GameObject within your tagged prefab. In your setup script, you already have a reference to the GameObject with the tag modelObject, so you don’t need to look for another tag. Instead, you’ll use the Get Component in Children node to search for a Canvas component in any child GameObject of that tagged Mesh GameObject. Since your popup canvas is the only GameObject with a Canvas component, the Get Component in Children node will successfully locate your popup canvas GameObject.  

Watch the video or follow the instructions below to get a reference to the popup canvas and assign it to your variable: 

1.  In the Graph Editor, at the end of your Setup graph, add a Get Component in Children (Type, Include Inactive) node. Change the Type to Canvas, and enable Include Inactive.

Important: Make sure to select the singular Get Component in Children node and not the plural Get Components in Children node.

2.  Connect the output of the Set Variable modelObject node to the GameObject input of the Get Components in Children node. The script will look for a canvas among the child GameObjects of the model’s Mesh GameObject.

3.  Add a Set Object Variable node to follow Get Component in Children, and select canvasPopup.

4.  Connect the Get Component in Children output nodes to the Set Variable canvasPopup node, using the bottom input that has no label. This node will set the canvas to the canvasPopup variable.

5.  Enter Play mode and test your script to ensure that the canvas is added to the variable.

Note: For the moment an error message will appear in the console, but don’t worry we will solve this issue in the following steps.

The script graph that gets the Canvas component and then assigns that Canvas to the canvasPopup variable.

Next, it’s time to make the button functional by setting the CanvasPopup GameObject to be active in the scene when the user presses the button. 

Watch the video or follow the instructions below to create a visual script that will turn on your world space canvas: 

1.  In the Hierarchy window, select the VisualScripts GameObject, and in the Inspector window select Add Component > Script Machine.

2.  Select New in the new component. When prompted, save the new script machine in your Visual Scripts folder, and name it “DisplayPopup”.

3.  In the Inspector window, add a Title (“Display Popup”) and Summary (“Makes an object appear and disappear”). Then select Edit Graph.

4.  Delete the OnStart and OnUpdate nodes.

5.  In the Graph Editor, add an On Button Click node.

6.  Click and drag the buttonPopup variable into the Graph Editor, then connect it to the input of the On Button Click node.

7.  In the Graph Editor, add a Game Object Set Active node and connect the flow input to the flow output of the On Button Click node. Set the Value to True (checked) to specify that the GameObject will become active.

8.  Drag the canvasPopup variable into the Graph Editor, then connect it to the GameObject input of the Game Object Set Active node.

9.  Open your model object in prefab editing mode. Select the CanvasPopup child GameObject and disable it in the Inspector window. From now on, this GameObject won’t be active by default — your scripts will activate the canvas when the user presses a button. 

10.  Test the new button functionality in Play mode.

The Script Machine component for the Display Popup graph with the title, description, and Edit Graph button highlighted. 

The script graph that will turn on the world space canvas on button click.

The model object open in prefab editing mode. The CanvasPopup child GameObject is disabled in the Inspector window.

Now that you can turn the popup on, you can make it turn off again when your user presses the button again. You’ll use a Negate node to switch the canvas from inactive to active and back again, so that the button works like a toggle. 

Watch the video or follow the instructions below to adjust your visual script so that it toggles the world space canvas on and off: 

1.  In your DisplayPopup script, move the Get Object Variable node with the canvasPopup value to the left so you have some space for additional nodes. 

Important: Keep the Get Object Variable node connected to the Set Active node. 

2.  In the Graph Editor, add a GameObject: Get Active Self node. This node detects whether canvasPopup is active, and outputs a Boolean value. Connect the Get Object Variable canvasPopup node output to the input of your new node.

3.  In the Graph Editor, add a Negate node and connect it to the output of the Get Active Self node. This node will set the Boolean value to the opposite of the output from the Get Active Self node.

4.  Connect the Negate node flow output to the Value input of the Set Active node.

Now, if the canvas is currently active, it will be set as inactive. If the canvas is currently inactive, it will be set as active.

5.  Test the toggle functionality in Play mode by pressing  your ButtonPopup button a few times.

6.  Build to your device and test the buttons to make sure that the canvasPopup turns on and off when you press the button.

The visual script that toggles the world space canvas on and off with the same button press using the Negate node. 

If you want to further develop your skills, explore new concepts, or improve your project, check out the optional activity below. Each activity is identified as being either Easy, Medium, or Difficult, so you know what level of difficulty to expect.

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!

It can be helpful to have world space canvases look towards the camera since they aren’t attached to the screen. This requires having the object rotate on its own to look at a defined camera. Sometimes, when you do that you need to test what you have made to make sure that your text is facing the correct way, and if it isn’t you might need to rotate it in the prefab. 

To do this particular challenge you might need some new nodes: 

In this tutorial, you made the third of four buttons functional, which toggles a world space canvas on and off. In the next tutorial, you will add functionality to the final button in the UI, which will make spatial sound emanate from your AR model.

Add world space UI to your marker-based app

1. Overview

2. Add a world space canvas

3. Customize world space UI

4. Update the UI button

5. Create variables in your script graph

6. Get a reference to the canvas

7. Display popup on click

8. Make button toggle info on and off

9. More things to try

10. Next steps

Complete this tutorial