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

6d223772-db43-47d9-b35f-925433d63e70:a4c25a6f7982

Overview

Set up your buttons

Create a new visual script

Create required variables

Rotate left and right 

Add a tag to identify your model

Create a new setup script graph

Rotate the marker-generated model

Optimize with a null check

More things to try

Next steps

Zu-UnityLearn

Desarrollo de AR para novatos

Hammad_N

Visual Scripting para novatos

3.8-Rotate-marker-generated-model (2).mp4

Mission2A3.5VisualScriptButtonRotateLeft.mp4

2A-3.5-rotate-left-button-in-editor (1).mp4

2A-3.5-rotate-for-scene-obj-not-prefab (1).mp4

Mission2A3.7VisualScriptfindObject.mp4

3.8-Rotate-marker-generated-model (3).mp4

Mission2A3.8VisualScriptNullCheck.mp4

3.9-optimize-with-null-check (1).mp4

Mission2A3.9MediumMoveObjectUpDownOnButtonPress (1).mp4

Mission2A3.10MoreToTryDifficultRotateOnTurnTable.mp4

Mission2A3.7TestingFindObjectInEditor.mp4

Making an object appear in the user’s environment is exciting, but it’s a much more engaging experience if the user can interact with that object in some way. 

In this tutorial, you’ll add a user interface to your scene with buttons to rotate the model. In later tutorials, you’ll add more features to this user interface.

Games

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

robinmitra

Crear interacciones para aplicaciones básicas con Visual Scripting

Making an object appear in the user’s environment is exciting, but it’s a much more engaging experience if the user can interact with that object in some way. To do this, you’re going to create a user interface called a screen space overlay (it’s called this because it’s always in front of the camera and visible on the screen!) Screen space overlays are useful when you want your users to see the user interface no matter what else they are viewing on their device. 

Unity uses a special kind of GameObject called a canvas to display 2D images for the user interface. Your canvas in this project will display buttons that the user will be able to press. 

Follow these instructions to add the canvas to your scene: 

1.  In the Project window, go to Assets > _ARMarker > Prefabs > UI, then click and drag Button_Canvas into the Hierarchy window. 

In the Scene view, the canvas will be very large, but don’t worry, it’s just the way that Unity handles screen space overlays.

Note: If the TMP Importer window appears, select the Import TMP Essentials button and then close the window. TextMeshPro (TMP) gives you control over text formatting and layout. You don’t need to select Import TMP Examples & Extras for now.

2.  Go to the Game view to preview how the four default buttons will appear in your application.

3.  In the Hierarchy window, expand the ButtonCanvas GameObject and rename the Button1 and Button2 child GameObjects to “ButtonRotateLeft” and “ButtonRotateRight”, respectively.

4.  In the Hierarchy window, select the Text (TMP) child GameObject of the ButtonRotateLeft GameObject. In the Inspector window, change TextMeshPro Text Input to “<”. Repeat for the ButtonRotate Right GameObject and change the Text Input to “>”. 

5.  Customize the text by selecting the Font Asset, Font Size, and Font Style properties you think look best. 

Note: If you want to get additional fonts and styles, go to Window > TextMeshPro > Import TMP Examples and Extras. 

6.  If you want to adjust the size of the buttons, use the Rect tool.

TMP Importer dialog window with the Import TMP Essentials button highlighted.

The ButtonCanvas prefab GameObject selected in the Hierarchy window. The Game view displays four buttons positioned in the corners of the screen with the word “Button” on each button.

The TextMeshPro - Text (UI) component shown in the Inspector window with the Text Input field set to “<”.

Rect Tool selected with handles around the button sprite in the Scene view.

Now that your buttons are on the screen, it is time to make the buttons work. You’ll use visual scripts to control the app’s behavior when the user presses the buttons. You’ll create one GameObject for all your visual scripts to make them easier to find. 

Follow these instructions to create a visual script: 

1.  In the Hierarchy window, create a new empty GameObject named “VisualScripts”.

2.  In the Inspector window, add a Script Machine component to VisualScripts.

4.  When the File Explorer appears, open the _ARMarker folder, create a new “VisualScripts” folder there, and save the graph with the name “RotateObject”.

5.  In the Inspector window, enter the title “Rotate Object” and the summary “Rotates the AR object using rotate UI buttons”. 

6.  Select Edit Graph to open the visual script graph.

Note: The first time you open your graph, it will be in a floating window. You may dock it in the Unity Editor if you prefer.

The Save Graph Finder window showing the file path of the Visual Scripts directory.

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

Your script will use variables that reference the buttons and the GameObject the buttons will affect. 

Follow these instructions to create variables for your visual script: 

1.  In the RotateObject script graph, delete the On Start and On Update nodes. 

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

3.  Create a new variable called “buttonRotateLeft” and set its Type to Button.

4.  For the Value, use the object picker (circle) and select the ButtonRotateLeft GameObject.

5.  Repeat the same process for a variable called “buttonRotateRight” with the ButtonRotateRight GameObject.

7.  Create a new variable called “modelObject” and set its Type to GameObject.

8.  Assign the in-Editor model from the Hierarchy window to the modelObject variable.

Setting the value of modelObject variable to the model prefab from the Assets.

Now you have variables that you can use, it’s time to create the logic in the graphs that will control the rotation of your model when your user presses a button. 

Watch the video or follow the instructions below to make your visual script rotate your model when you press a button: 

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

2.  Drag the buttonRotateLeft variable onto the graph to the left of the On Button Click node, then connect them. 

3.  In the Graph Editor, add a Transform Rotate node (X Angle, Y Angle, Z Angle) and then assign it the following values: X Angle = 0, Y Angle = 15, Z Angle = 0. 

Important: If you are testing your marker on your monitor and are using a rotated model, you will have to rotate about the z axis instead of the y axis. 

4.  Connect the On Button Click node to the flow input of the Transform Rotate node.

5.  Drag the modelObject variable into the Graph Editor, then connect it to the transform input of the Transform Rotate node.

6.  In the Hierarchy window, select your in-Editor model. In the Inspector window, enable it so it is visible in the Scene view. 

Note: Currently the Script Graph is dependent on the actual in-Editor model, not the prefab that is spawned in the Simulated Environment. This will be adjusted in a later step. When you enter Play mode, there will be two models in the scene: the one automatically spawned on the simulated image marker, and your in-Editor model. You may have to look around the environment to locate the in-Editor model. Only the in-Editor model will rotate at this time.

7.  Select Play in the Editor to test the script. 

You'll be able to select the ButtonRotateLeft button in Scene view and see that your model rotates to the left. Then exit Play mode.

9.  In the Script Graph window, click and drag across your existing graph to select all of the nodes.

10. Press Ctrl+D (macOS: Cmd+D) to duplicate the graph. Drag the new graph down so it’s positioned directly below the old graph without overlapping.

11.  On the new graph, change the variable in the Get Variable node to buttonRotateRight, and change the Y Angle value to -15 (or X Angle if you are testing your marker on a vertical monitor).

12.  Test the app in Play mode in the Unity Editor to verify that both buttons work.

Note: If you test the app on your device, you’ll see that it works on your in-Editor model, but not the one generated by the marker. Don’t worry — you’ll address this issue in the next steps.

The RotateObject script graph for the ButtonRotateLeft object.  

The RotateObject script graph for the ButtonRotateLeft and ButtonRotateRight GameObjects.

Your rotate buttons work, but they only work with the in-Editor model in the scene. 

How will you write a script to rotate a GameObject that won’t exist until your app runs? You’ll apply a tag to the prefab that will also exist on the spawned prefab instances. In your script, when the camera sees the marker and spawns a model from the prefab, the app will search for a GameObject with that tag. Tags are useful to identify GameObjects for scripting purposes. 

Follow these instructions to add the tag that will allow you to find the model when the model is spawned in the app: 

1.  In the Hierarchy window, select the in-Editor model and disable it in the Inspector window.

2.  In the Project window, find the prefab of your model and double-click it to open it in prefab editing mode.

3.  In the Inspector window, open the Tag dropdown and select Add Tag.

4.  Select the Add (+) button, enter “modelObject”, and select Save.

5.  In the Hierarchy window, select the Mesh child GameObject for your selected prefab and use the Tags dropdown to assign it the tag modelObject.  

Important: You won’t be able to rotate the highest parent GameObject of the prefab, so make sure it is the Mesh child GameObject that has the tag. The parent GameObject should be untagged. If you are using your own 3D model, you will need to tag a child GameObject that contains the GameObject’s mesh. 

7.  Make sure the changes were successfully applied to the prefab. Check that the modelObject tag appears in the in-Editor model and in the prefab in your Project window.

The Add Tag option selected in the Tag dropdown menu.

New Tag Name property being set to “modelObject” with the Save button highlighted.

The FuseboxMesh child GameObject selected in the Hierarchy window with the tag set to modelObject in the Inspector window.

Next, you’ll create a new script that will constantly search for any GameObject that has the modelObject tag. If the tagged GameObject is located, it will be assigned to a variable so that it’s ready for the RotateObject script. With the new variable assigned correctly, you will be able to control the model that spawns in the scene.

Follow these instructions to set up a new setup script:

1.  In the Hierarchy window, select the VisualScripts GameObject.

2.  In the Inspector window, select Add Component and create a new Script Machine named “Setup” with the title “Setup” and the description “Initializes variables”.  Then select Edit Graph. 

3.  In the Blackboard area of the Graph Editor, select the Object tab. Then, find the modelObject variable’s Value and use the picker (circle) to select None. The script will assign this variable’s value. 

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

Blackboard Object tab with modelObject variable value set to None.

With your setup script and variable ready, you can now create the graph. Watch the video or follow the instructions below to search for the tagged GameObject and assign it to the modelObject variable when the object is located: 

2.  In the Graph Editor, use the fuzzy finder to add a Find Game Object With Tag node. 

Note: Make sure to select the singular Find Game Object node and not the plural Find Game Objects node.

3.  In the Tag field, enter “modelObject”. 

4.  Connect the On Update output to the input of the Find Object with Tag node.

5.  In the Graph Editor, use the fuzzy finder to add a Set Object Variable node to the graph. 

6.  Connect the flow output of Find Game Object With Tag to the flow input of the Set Variable node. Then connect the object output to the bottom input of the Set Variable object, which doesn’t have a label. 

This New Value field sets the new value of the variable, which can be any data type. When the script runs, the modelObject variable will be set to a model’s child GameObject with the specified tag. 

7.  Select Play and look at your visual script. You’ll see that the Find Game Object With Tag node found the GameObject and assigned the modelObject variable value.

8.  In the Hierarchy window, select the in-Editor model and disable it in the Inspector window. 

9.  Build to your device and test the buttons in the app.

Script graph that finds the object tagged as modelObject and sets the modelObject variable.

An important part of developing apps is ensuring that they are optimized. Optimization is especially important when you’re creating mobile devices, and optimization is usually easier to do when it is done from the beginning of your designs. 

In your script right now, the Find Game Object With Tag node is always looking for the model, as you can see in the video in the previous step. The script is constantly searching all of the GameObjects in your scene, without stopping when it finds the GameObject with the tag. If there are only a few GameObjects, that might not be so bad, but as you increase the number of GameObjects in your scene, this search can really reduce your performance. To optimize this script, you’ll add a null check that will stop the search as soon as the tag is found. 

Add a UI with rotation buttons

1. Overview

2. Set up your buttons

3. Create a new visual script

4. Create required variables

5. Rotate left and right

6. Add a tag to identify your model

7. Create a new setup script graph

8. Rotate the marker-generated model

9. Optimize with a null check

10. More things to try

11. Next steps

Complete this tutorial