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

Set up the UI

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.

Develop AR experiences that use trackable targets in the environment

Absolute Beginner AR Development

Evaluate platform capabilities and limitations in order to determine whether or not a given feature will work.

Absolute Beginner AR Design

Create basic application interactions with Visual Scripting

Absolute Beginner Visual Scripting

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

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!

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

Welcome to AR Development

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

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

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

db3774ac-0671-44aa-ae29-a4c247320a16:d323c70fb777

Overview

Make the glasses invisible by default

Create and assign custom tags

Update your visual script graph

Enable the Mesh Renderer with On Button Click

Duplicate your graph 

Create new button variables

Set the second and third tag

Optional: Test on your device

Next steps

Zu-UnityLearn

Desarrollo de AR para novatos

Hammad_N

Visual Scripting para novatos

1.4.4.mp4

1.4.5.1.mp4

1.4.5.2.mp4

1.4.6.mp4

1.4.7.1.mp4

1.4.7.2.mp4

1.4.8.mp4

1.4.8.2.mp4

You’ve learned how to detect button clicks using script graphs, so now it’s time to make something happen when a click is detected. In this tutorial, you’ll make your UI buttons control the visibility of each pair of glasses.

In this tutorial you'll do the following: 

Create tags to help identify each pair of glasses.

Build the complete functionality for one pair of glasses.

Duplicate and modify the graph for the remaining two pairs of glasses.

Games

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

robinmitra

Crear interacciones para aplicaciones básicas con Visual Scripting

You’ve learned how to detect button clicks using script graphs, so now it’s time to make something happen when a click is detected. In this tutorial, you’ll make your UI buttons control the visibility of each pair of glasses. You’ll first build the complete functionality for one pair of glasses, then duplicate and modify the graph for the remaining two.

When the app starts, ideally there should be no glasses visible until the user selects the pair that they want to try. Currently the opposite is occurring — all three pairs of glasses are visible at once. 

To make the glasses invisible when the app opens, you’ll disable the Mesh Renderer components. The Mesh Renderer component manages a GameObject’s visibility. By disabling this component, you’ll make a GameObject invisible in the scene, but still accessible to your visual scripts. 

Follow these instructions to disable the mesh renderers of the glasses:

1.   In the Hierarchy window, activate and expand the GlassesGroup prefab using the foldout icon to reveal its child GameObjects.

2.  Select all three pairs of glasses by holding the Shift key and selecting the GameObject for the first pair, and then the last pair.

3.  In the Inspector window, find and disable the Mesh Renderer component.

Note that the glasses are no longer visible in the Scene view, but the GameObjects are present and active in the Hierarchy window.

The Mesh Renderer component in the Inspector window with its checkbox disabled.

In Unity, there are several different ways for a script to locate specific objects in a scene. One method is to assign a special type of reference to an object called a Tag. Tags are manually created and assigned to GameObjects directly in Unity Editor and are easy to reference through a script.

Note: In this step, the names of the tags will be based on the glasses provided in the sample scene. If you are using different pairs of glasses, be sure to name the tags according to the pairs you are using. 

Follow these instructions to create custom tags: 

1.  Select the first pair of glasses in the GlassesGroup parent GameObject.

2.  In the Inspector window, locate and select the Tag dropdown.

The Tag & Layers Inspector window will open. 

5.  Name the tag according to the type of glasses selected, as a single word in lowercase, then save it.

6.  Add tags for the other two pairs of glasses that you have selected using the same process.

7.  In the Hierarchy window, select the first pair of glasses to exit the Tag & Layer Inspector window.

8.  In the Inspector window, select the Tag dropdown and assign the appropriate tag to your glasses. 

For example, assign the cat tag to Glasses_Cat.  

9.  Repeat this process for the remaining two pairs of glasses. 

10.  In the Hierarchy window, select the GlassesGroup GameObject. Now you need to apply the changes that you made to the GlassesGroup prefab. 

11.  In the Inspector window, select the Overrides dropdown and select Apply All.

The Tag dropdown shown in the Inspector window, currently set to Untagged.

A tag named “cat” added to the Tags Inspector window to represent the cat eye glasses in the scene.

All three tags added to the Tag Inspector window.

The cat tag assigned to the Glasses_Cat GameObject in the Inspector window.

Apply the changes to the prefab by selecting Apply All in the Overrides dropdown.

Each pair of glasses now has an identifier attached to it that will make it easier to access via your script graph. To search the scene and locate the tags, you’ll use a new node: Find With Tag.

Watch the video or follow the instructions below to update your graph:

1.  In the Script Graph window, delete the Debug Log node and its associated string, as you don’t need these any more.

2.  Open the fuzzy finder (right-click the Graph Editor), search for “Find With Tag”, and then select Game Object: Find With Tag (Tag) from the list of nodes.

3.  Select the Find With Tag node and read its description in the Graph Inspector window.

The Find With Tag node specifies that it will return one active GameObject in the scene. The glasses in the GlassesGroup prefab only have their mesh renderers disabled and otherwise remain active in the scene, so this will work perfectly for your needs.

The Find With Tag node takes one data input, which is the name of the tag to find.

4.  In the Find With Tag node, enter the name of the tag associated with the first pair of glasses in the Tag field. 

Important: Remember to use lowercase letters, as you did when you created the tag.

5.  Connect the flow output of the On Button Click node to the flow input of the Find with Tag node.

The Find with Tag node with the “cat” tag connected to the On Button Click node.

Now that the glasses GameObject is accessible to the script, you can enable its mesh renderer to make it visible when a user selects the button. You’re going to use a Mesh Renderer: Set Enabled node to implement this functionality.

Before you finish updating your graph, take a moment to review the process.

Despite its name, the Mesh Renderer: Set Enabled node is used for both enabling and disabling mesh renderers. You’ll need two pieces of data to use the node:

The specific mesh renderer for the node to affect

Whether that mesh renderer should be enabled or disabled

The action of the node is controlled by the Boolean checkbox on the left side of the node. A Boolean is a data type that returns either true or false. If the Mesh Renderer: Set Enabled node Boolean is set to true (enabled), then the specified mesh renderer will be enabled. If the Boolean is set to false (disabled), then the mesh renderer will be disabled.

You can manually adjust the Boolean value on the node itself. To do this, you need a reference to the specific mesh renderer you want to affect. Fortunately, you already have ready access to a mesh renderer from the Find With Tag node. 

The Find With Tag node has two outputs. Just like their inputs, nodes can have both flow outputs (arrow icon) and data outputs (cube icon). If you select the Find with Tag node, you’ll find that the data output is the GameObject that the node finds. From this output, the Set Enabled node can access the GameObject’s mesh renderer.

Watch the video or follow the instructions below to configure the Mesh Renderer: Set Enabled node:

1.  Open the fuzzy finder and add a new Mesh Renderer: Set Enabled node.

2.  Connect the flow output of the Find with Tag node to the flow input of the Set Enabled node.

3.  Connect the Find With Tag result output to the target input of the Set Enabled node.

4.  Enable the Boolean input of the Set Enabled node.

5.  Select the Play button to test your changes.

6.  Select the first glasses button — the glasses will appear in the Game view.

7.  Select the Play button again to exit Play mode.

The Mesh Renderer Set Enabled node now connected to the Find with Tag node.

The process for enabling the other pairs of glasses is exactly the same as it was for the graph you’ve already built. Rather than recreate the already existing graph from scratch, you can duplicate it and make small modifications to work for the other glasses.

Watch the video or follow the instructions below to duplicate the graphs: 

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

2.  Press Ctrl+D (macOS: Cmd+D) to duplicate the graph.

3.  Drag the new graph down so it’s positioned directly below the old graph without overlapping.

4.  Repeat the duplication process one more time so you have three copies of the graph.

The original graph sequence duplicated two times to produce three identical node sequences. 

There are only two modifications that you need to make to the graph: the button variable and the tag. 

First follow the instructions or watch the video below to create the two new button variables:

1.  In the Script Graph Blackboard, select the Object Variable tab. 

2.  In the (New Variable Name) field, enter “glasses2Button” and select Add (+).

3.  In the Type field, use the dropdown to select Button.

4.  Select the Value Object Picker (circle icon) and select Glasses 2 Button.

5.  Repeat this process again for the final variable, glasses3Button.

6.  In the Graph Editor, find the first duplicated Get Variable node (this is your second row). Select the Variable dropdown and select glasses2Button.

Tip: If you zoomed out in the Graph Editor to duplicate the nodes, you’ll need to zoom back in to access the dropdown. 

7.  Set the second duplicated Get Variable node (in your third row) variable to glasses3Button.

Each of the three graphs should now reference a different button.

The Object tab selected in the Graph Inspector window.

The two new glasses button variables completed in the Graph Inspector window.

Each Get Variable node now associated with a different glasses button variable.

Finally, follow the instructions or watch the video below to update the tags on the two duplicated graphs:

1.  Replace the tag on the second Find With Tag node to reflect the tag for the pair of glasses on your second button.

2.  Repeat this process for the third Find With Tag node for the final pair of glasses on your third button.

3.  Select the Play button to enter Play mode.

4.  Select one of the new buttons and observe the new pair of glasses appear.

5.  Select the remaining glasses buttons in turn and watch as the other glasses appear.

Important: Remember that the glasses will be positioned on top of each other in the order that you select them — you haven’t implemented any functionality to disable the mesh renderers yet. 

6.  Select the Play button again to exit Play mode.

The three completed node sequences with the Get Variable and Find with Tag nodes individually modified with their respective glasses variables and tags.

Follow these instructions to test the app on your device:

1.  In the Hierarchy window, select the GlassesGroup GameObject, and in the Inspector window, mark it as inactive.

3.  Open the Build Settings window (File > Build Settings).

4.  Make sure that your device is plugged in and then select Build and Run to build the app on your device.

Turn on the glasses with buttons

1. Overview

2. Make the glasses invisible by default

3. Create and assign custom tags

4. Update your visual script graph

5. Enable the Mesh Renderer with On Button Click

6. Duplicate your graph

7. Create new button variables

8. Set the second and third tag

9. Optional: Test on your device

10. Next steps

Complete this tutorial