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

Now that you have buttons in your app, you will begin programming their functionality using Unity’s Visual Scripting editor. You can use Visual Scripting to create the logic for your Unity projects without writing actual code.  

In this tutorial you'll do the following: 

Familiarize yourself with the Visual Scripting editor.

Detect a button press with a visual script.

Overview

What is Visual Scripting?

Create your first graph

Open and navigate the Script Graph

Create your first node

On Button Click node overview 

Create your first variable

Test the button functionality

Send a message to the console

More things to try

Next steps

You have completed the functionality for a single color button. You will now expand that functionality to the remaining color buttons. In order to do this efficiently, you will learn about a new important scripting concept: arguments.

Create a new custom event that requires an argument.

Use the new custom event to finalize the color button functionality.

Separate the graph to create a custom event

What are arguments?

Add an argument to the custom event

Create the custom trigger event

Call the custom event with all color buttons

Right now, it appears that your app is working as expected. However, if a user’s face is momentarily lost by the camera, something unexpected happens: when the user returns after moving out of the camera’s view, the glasses don’t reappear on their face! 

Save the user’s choices with a variable.

Reapply the user’s choices once the user’s face has returned to the camera view.

Create a variable to store the current glasses tag

Save the value of the currentGlassesTag

Call the SaveTag custom event

Create a graph to load the glasses

Enable the current mesh

Test your changes in Play mode

Save a reference to the current material

Load and apply the saved material 

Set an initial material and test your app

Interactive_Face_Filter_Assets.zip

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

Welcome to AR Development 

Configure your AR development environment

Deploy your project to iOS or Android

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

Welcome to AR Development Quiz

Welcome to AR Development

In these initial tutorials, you will get ready for AR development. First, you will learn about the field of AR and hear from established creators in the AR industry. Next, you will download all required software to get started and configure a Unity project for AR development. Finally, you will deploy a test project to your mobile device to make sure everything is working as it should.

Get started with AR

 Overview

Add the face reference mesh

Create a new material

Set a tint to the material

Set transparency

Apply your material to the default face

Build and test

Image optimization tips

Explore animations

Attach animations to the AR Default Face

Basic_Face_Filter_Assets.zip

In this project 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

In this course, you will learn to create your own augmented reality (AR) face filter apps using Unity. You will create multiple face filter projects from start to finish that are compatible with both Android and iOS devices. 

The first app you’ll create will overlay textures, animated 3D models, particles, and other effects on the user’s face. The second app is more interactive and will allow the user to select, customize, and visualize different pairs of glasses. 

To implement this functionality, you will use Visual Scripting: a graphical programming system that does not require any written code. Along the way, there are also quizzes and challenges to help solidify your skills and build your portfolio. 

AR apps have never been in higher demand. Whether you just want to create cool face filters or pursue this industry as a potential career, this course is the perfect place to start

2022.3

2021.3

Create with AR: Face Filters

22f224cd-5590-4d94-b890-474224cb0db6:yLp09thJhNvnon364cG58E

Absolute Beginner AR Development

Zu-UnityLearn

Absolute Beginner Visual Scripting

Desarrollo de AR para novatos

Hammad_N

Visual Scripting para novatos

YouCut_20220811_134550569.mp4

1.8.3.1.mp4

1.8.4.mp4

1.8.6.mp4

glassesSaved.mp4

YouCut_20220812_152726881.mp4

1.8.10.mp4

1B-8.11-load_saved_material.mp4

1.8.9_revised.mp4

YouCut_20220812_161010413.mp4

Games

Develop AR experiences that use trackable targets in the environment

Create basic application interactions with Visual Scripting

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

robinmitra

Crear interacciones para aplicaciones básicas con Visual Scripting

It’s important to regularly test your applications as you work on them, but often you won’t be able to identify bugs until everything appears to be complete. For this reason, you should always plan to thoroughly test your app after you’ve finished development and before you release it to the public. 

Right now, it appears that your app is working as expected. However, if a user’s face is momentarily lost by the camera, something unexpected happens:

When the user returns after moving out of the camera’s view, the glasses don’t reappear on their face! Additionally, when the user reselects one of the glasses buttons, the material they had previously selected is no longer applied.  

This problem occurs because whenever a user’s face leaves the camera, the GlassesGroup prefab is deleted by the AR Face Manager component. When the user’s face returns to the camera, the AR Face Manager component instantiates a new version of the prefab. The new version of the GlassesGroup prefab will have the default setting configuration, which means all of the mesh renderers will be turned off and no material will be applied.

In this tutorial, you’ll create the functionality to save the user’s choices and reapply them once the user’s face has returned to the camera view.

First, you need to store a reference to the current pair of glasses the user has selected. Each time the user changes the glasses, that reference needs to update as well. 

If you need to keep a reference to something, you also need to create a variable to store that reference. So far in these tutorials you’ve used variables to provide data to different nodes in your script graphs. However, the opposite can occur as well: script graphs can add data to variables, which can in turn be referenced by a different graph. The functionality you’ve built for accessing the meshes has been tag-based, so you’ll create a variable that can store the tag of the glasses that are currently visible.

Follow these instructions to create the new variable:

1.  In the Hierarchy window, select the GlassesGroup GameObject and then make sure it is enabled in the Inspector window.

2.  In the Hierarchy window, select the Visual Scripts GameObject.

3.  In the Inspector window, go to the Script Machine component associated with the MeshChanger graph and select Edit Graph.

4.  In the Object Variable section of the Blackboard, create a new variable named “currentGlassesTag”.

When you’re using a variable as a reference for a graph, you can drag it from the Blackboard. However, to set a variable requires a different node. Once a variable has been created in the Blackboard, it is available within the fuzzy finder as well. 

6.  In the Graph Editor, navigate to a new empty area above your other nodes to begin a new node sequence.

7.  Open the fuzzy finder and search for “Set currentGlassesTag” to add it to your graph.

he currentGlassesTag variable with its Type set to String.

Navigate to an empty area above your other nodes in the Graph Editor.

Because the value of currentGlassesTag will need to change based on which button your user selects, you’ll create a custom event that you can call for each button.

Watch the video or follow the instructions below to configure the event:

1.  In the Graph Editor, use the fuzzy finder to add a Custom Event node.

3.  Set the Arguments property to 1. Just as you did with the ChangeMaterial event, you’ll use an argument to pass along data. In this case, you’ll pass the tag of the pair of the glasses the user has selected.

4.  Connect the SaveTag Custom Event node’s flow output to the flow input of the currentGlassesTag Set Variable node.

5.  In the Graph Editor, use the fuzzy finder to add a Game Object Get Tag node.

Arguments on custom events can’t be set to require a specific type of data, so the value you pass to this event will be a reference to the entire GameObject and all of its components. To access the tag specifically, you’ll need to use this Game Object Get Tag node.

6.  Connect the SaveTag Custom Event node’s Arg. 0 output to the input of the Get Tag node.

7.  Connect the Get Tag node’s output to the value input of the currentGlassesTag Set Variable node (white filled circle icon).

The SaveTag Custom Event node connected to the flow input of the currentGlassesTag Set Variable node.

The completed SaveTag event, which sets the currentGlassesTag variable by getting the tab of the selected GameObject.

The custom event will now save to the currentGlassesTag variable and only needs to be triggered by the On Button Click graphs. 

Watch the video or follow the instructions below to add the Event Trigger to the end of the graph chain:

1.  In the Graph Editor, use the fuzzy finder to add a Trigger Custom Event node.

3.  Set the new node’s Arguments property to 1.

4.  In the glasses1Button On Button Click graph (the first of your three rows), find the final Set Enabled node. Connect the flow output of the Set Enabled node to the flow input of the SaveTag Trigger node.

5.  Connect the final Find With Tag node’s result output (cube icon) to the Arg. 0 input of the SaveTag Trigger node.

The Find With Tag node provides the custom event with the data it requires as an argument: which GameObject should be saved. 

6.  Enter Play mode to test your changes. Select the first glasses button.

7.  In the Object Variable section of the Blackboard, scroll down to the currentGlassesTag variable and observe the Value. The SaveTag event has added the tag of the first pair of glasses.

9.  Duplicate the SaveTag Custom Event node twice and repeat steps 4 and 5 for the remaining buttons.

You can now test your app again with each of the glasses buttons. In the Blackboard, notice how the value of the currentGlassesTag variable changes with each button click.

The flow output of the node that enables the mesh connected to the SaveTag Custom Event Trigger. The Find With Tag node’s output is connected to Arg. 0 of the Custom Event node. 

The updated MeshChanger node sequences. All button click events now also trigger the SaveTag custom event.

You now have a reference to the current pair of user-selected glasses that will update whenever there’s a change in the app. As a next step, you need to create functionality that will reload these changes onto the new GlassesGroup prefab when it’s instantiated (created) by AR Foundation. 

Reloading these changes is new functionality, which means that you should create another dedicated graph:

1.  In the Hierarchy window, select the Visual Scripts GameObject.

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

3.  Create a new graph named “FilterUpdater” and save it in the Visual Scripts folder.

4.  In the Title field, enter “Filter Updater.”

5.  In the Summary field, enter “Reloads the last worn pair of glasses and selected material after a user’s face is lost and rediscovered by AR Foundation.”

6.  Select Edit Graph to open the new FilterUpdater graph.

7.  Delete the On Start node. For this graph, you’ll need the On Update node.

Both the color and the mesh-changing functionality in your app occur in very controlled situations. Specifically, they only occur when the user interacts with the UI buttons. Your script graphs are relatively simple, as your app only detects exactly when the user selects the buttons. Unfortunately, when it comes to managing when the user’s face is lost by the camera, you have zero control. Therefore, you need to build a graph that accounts for the fact that the user may leave and later return to the camera view at any time. 

To accomplish this, you’ll use the On Update node.

The On Update node runs continually while an application is active, so you can use it to constantly check whether the user’s face has been lost. This continual checking is just what you need for your final app functionality. 

A new Script Machine component added to the Visual Scripts GameObject. It includes a new FilterUpdater visual script.

The FilterUpdater graph will run in a very similar fashion to the original MeshChanger functionality. FilterUpdate will search for a GameObject with a specific tag, and then enable that GameObject’s Mesh Renderer component. The only difference is that where the nodes in the MeshChanger script specify which tag to search for, the FilterUpdater graph will use the currentGlassesTag variable instead.

Watch the video or follow the instructions below to enable the current mesh: 

1.  In the Graph Editor, after the On Update node, use the fuzzy finder to add a Game Object Find With Tag node.

2.  After the Find With Tag node, add a new Mesh Renderer Set Enabled node.

3.  In the Blackboard, go to the Object Variable section and drag the currentGlassesTag variable onto the Graph Editor below the On Update node.

4.  Connect the On Update node flow output of the to the flow input of the Find With Tag node.

5.  Connect the currentGlassesTag Get Variable node data output to the tag input of the Find With Tag node.

6.  Connect the Find With Tag node flow output to the flow input of the Set Enabled Node.

7.  Connect the Find With Tag node result output (cube icon) to the target input of the Set Enabled node (grid with eye icon).

8.  On the Set Enabled node, set the Value Boolean to true.

Now you’re ready to test these changes.

The FilterUpdater script graph. On update, it finds the GameObject with the currentGlassesTag, then enables that GameObject’s mesh.

Follow these instructions to test your changes in Play mode:

1.  Select the Play button to test the app in the Editor. 

2.  Notice that the Find with Tag node turns red to indicate it has encountered an error. It is trying to find an object with a specific tag, but that tag has not yet been assigned (it is null). 

3.  In the Game view, select one of the glasses buttons.

4.  In the Hierarchy window, select the GlassesGroup prefab and delete it.

5.  In the Project window, go to Assets > _InteractiveFaceFilter > Prefabs. Drag a new GlassesGroup prefab into the Hierarchy window. The new GlassesGroup prefab will appear in the Game view with the last pair of active glasses visible!

If you were to build the app now, you would find that the glasses are now working as expected and reappearing when the user returns to the camera view. However, something’s missing: the material that the user has selected isn’t saved yet.

To solve this issue, you’ll create a variable to store the currently selected material, and then integrate it into the FilterUpdater graph.

Follow these instructions to save the current material: 

2.  In the Inspector window, find the Script Machine component associated with the MaterialChanger graph and select Edit Graph.

3.  In the Object Variable section of the Blackboard, create a new variable named “currentMaterial”.

4.  Set the new variable’s Type to Material.

5.  In the Graph Editor, to the right of all your other nodes, use the fuzzy finder to add a Set currentMaterial node.

Note: Rather than create a new Custom Event node to set the currentMaterial variable, you can use the existing ChangeMaterial Custom Event, since it’s already passing along the user’s selected material.

6.  Connect the final Set Material node flow output to the flow input of your new Set currentMaterial node.

7.  Connect the ChangeMaterial Custom Event node Arg. 0 output to the new value input of the Set currentMaterial node.

The material associated with the button the user selects will now be stored in the currentMaterial variable. You can test this in the app by selecting a material button while monitoring the value of the currentMaterial variable. It should save each time you select a new material.

The currentMaterial variable. By default, its Value is set to None.

The Set currentMaterial node connected to the end of the ChangeMaterial node sequence. This saves the variable with the current material value.

The final step is to load and apply the saved material when a new face is detected in the scene.

Watch the video or follow the instructions below to add the currentMaterial variable to your FilterUpdater graph: 

2.  In the Inspector window, find the Script Machine component associated with the FilterUpdater graph and select Edit Graph.

3.  In the Graph Editor, to the right of the current node sequence, use the fuzzy finder to add a Mesh Renderer Set Material node.

4.  Go to the Object Variable section of the Blackboard, then drag the currentMaterial variable onto the Graph Editor.

5.  Connect the Mesh Renderer Set Enabled node flow output (at the end of the existing graph) to the flow input of the new Mesh Renderer Set Material node.

6.  Connect the Find With Tag node result output to the target input of the Set Material node.

7.  Connect the currentMaterial Get Variable node to the material input of the Set Material node.

Something appears to have broken! When you select a pair of glasses, it appears in the Game view as a bright magenta rather than the default gray. This magenta color means that the GameObject has a missing material. 

Save and load the glasses

1. Overview

2. Create a variable to store the current glasses tag

3. Save the value of the currentGlassesTag

4. Call the SaveTag custom event

5. Create a graph to load the glasses

6. Enable the current mesh

7. Test your changes in Play mode

8. Save a reference to the current material

9. Load and apply the saved material

10. Set an initial material and test your app

11. Next steps

Complete this tutorial