All content in this course uses:

Test the frame rate of the portal world

When the user touches a plane detected in the environment, a portal appears on that plane. In this tutorial, you’ll design the entire digital world that appears inside the portal. The portal window won’t be functional yet — you'll be able to see the entire scene, even outside the portal. However, this is an exciting first opportunity to see the environment of your portal world appear on planes. In this tutorial, you will also learn about mobile performance requirements and optimization techniques.

You’ve developed most of the functionality for this app: when the user touches a plane detected in the environment, a portal appears on that plane. In this tutorial, you’ll design the entire digital world that appears inside the portal. The portal window won’t be functional yet — you will be able to see the entire scene, even outside the portal. However, this is an exciting first opportunity to see the environment of your portal world appear on planes.

Here’s an example of what a horizontal portal could look like:

The scene that you create can include 3D models, textures, lighting, and animated characters. However, you need to be thoughtful — you can make the assets look amazing, but you also need the app to perform well on mobile devices. So in this tutorial, you will also learn about mobile performance requirements and optimization techniques. 

Overview

The process for positioning the world in a horizontal portal is a bit different than for a vertical portal. If you are using a horizontal portal, follow this step. If you are using a vertical portal, skip to the next step. 

Adding the world inside the portal is very simple: you just need to place it behind the 

 prefab. Then, when you instantiate the prefab, you will also instantiate the world along with the portal. 

To save you time, we have provided you with pre-built levels for each theme. However, feel free to tweak the provided levels or even create your own from scratch later on.

Follow these instructions to add the level for the 

, then double-click the portal you’re using to open the prefab in the 

Use the Move, Rotate, and Scale tools in the 

 view to reposition the level beneath the portal window. 

 Do not reposition or rotate the portal itself — move the level child GameObject relative to the parent 

  Build and run the app to preview the new functionality. When a portal is spawned, the entire level should also spawn behind it. If you need to, you can adjust the position of the level relative to the portal until it looks perfect.

 You will still be able to see the level outside of the portal window — don’t worry, you’ll fix that in the next tutorial. 

Position your portal world (horizontal portals)

This step will show you how to position the portal world relative to a vertical portal. If you are using a horizontal portal, you can skip this step. If you are using a vertical portal, you must complete this step. 

, then double-click the portal you’re using to open the prefab in the Scene view.

 window as a child GameObject of your portal prefab.

You will notice that the window is not correctly oriented relative to the world. Remember, you previously rotated your vertical portal window to lie flat on the ground so that it would spawn properly on a vertical plane. 

Rotating and positioning the level relative to this artificially rotated window would be very difficult and disorienting. Instead, you will temporarily rotate your window vertically, then rotate it back after you position the level and attach it to the window.

 window, reset the GameObject’s rotation so that its top aligns with the green y-axis arm of the Scene gizmo and the back aligns with the blue z-axis arm.

 GameObject. Use the Move, Rotate, and Scale tools in the 

 view to reposition the level relative to the portal window. 

GameObject to make it a child GameObject of the 

 GameObject, then reset its rotation so that it’s lying flat on its back again.

Now that the level prefab is a child GameObject of the 

 GameObject, it will rotate along with the window.

The outside face of the window should point in the direction of the green y-axis arm of the Scene gizmo and the top of the window should point in the direction of the blue z-axis arm. 

 Now that the entire scene is rotated by 90 degrees, navigating the 

 view may be a bit disorienting. If you want, you can reset the rotation of the window to make edits, and position the window flat again when you are ready to test.

You will still be able to see the level outside of the portal window — don’t worry, you’ll fix that in the next tutorial. 

Position your portal world (vertical portals)

From a user’s perspective, the most important measure of an app’s performance is the frame rate, which is measured in frames per second (fps). An app with a high frame rate like 60 fps runs very smoothly. An app with a low frame rate like 15 fps appears very laggy and jittery, which results in a very poor user experience. 

60 fps is recommended for most apps, especially if there are interactive elements, like the ones you have implemented in this portal app. A minimum rate of 30 fps is recommended for apps that prioritize image quality over interactivity, such as videography or virtual production apps. 

We have created a simple UI for you that will display the current frame rate of your application.

GameObject to your scene and test your app’s frame rate:

If the debug UI is still active in the Hierarchy, delete it or deactivate it. You won’t need this UI anymore.  

If the TMP Importer dialog window opens, select 

and then close the window. You do not need to import the TMP Essentials and Extras.  

 GameObject to preview how it will appear on your device’s display.

GameObject selected, go to the Inspector and locate the Display FPS (Script) component.

These threshold values control the color of the text displayed in the 

Fps values between the two threshold values will appear in yellow text.

  Build and run the app to preview the new functionality. 

The current frame rate should be displayed in the user interface at the bottom of the screen.

Hopefully, your frame rate will be close to 60 fps throughout the experience and appear in green text.

Test your frame rate

Superimposing an entire digital scene on top of a live camera feed is a lot of work for a processor. Rendering complex models, detailed textures, realtime lights, or semi-transparent materials can quickly overwhelm your user’s device, which can cause the application’s frame rate to drop and drain the battery. 

Optimization is critical when you’re developing for mobile platforms, as mobile devices don’t have the kind of processing power of console or desktop platforms. 

 is the process of ensuring that everything in the application runs as efficiently as possible, including the scripts, 3D models, textures, materials, and more. There are people in the real-time 3D industry whose entire jobs are dedicated to optimization. 

Optimization is a deep, complex topic that you’re not going to explore in depth in this tutorial, but below are a few things to keep in mind as you import new assets and design scenes for your mobile AR projects:

Use low poly assets. Low Poly is short for low polygon, which means that the 3D models are simpler and therefore easier on the processor.

Reduce the number of real-time lights. Real-time lights update constantly and interact with each other as objects move in the scene. 

Reduce the use of semi-transparent materials. Rendering objects through multiple semi-transparent surfaces can quickly overwhelm a processor. 

Reduce the total number of materials used in the scene. You can achieve this by creating a Texture Atlas (sometimes called a 

), which allows many different objects to share a single texture and material. 

If you are interested in reading more about mobile optimization techniques, check out our  

How do you optimize mobile apps?

The assets we provided you for this project were already optimized for mobile performance, which is why your frame rate was likely high. However, it will be helpful to experience low frame rate in your project so you can appreciate how much it negatively impacts the user experience. 

In the project assets, we have provided a sample particle system deliberately designed to negatively impact performance. The system is made up of large, overlapping, semi-transparent particles, which combine to create a fog effect.

These overlapping, semi-transparent images cause 

, which is what happens when a single pixel has to be drawn (calculated) multiple times. Every time Unity’s renderer encounters a semi-transparent surface, it needs to redraw every pixel affected. When there are multiple semi-transparent surfaces in a row, overdraw increases exponentially, and this dramatically slows the processing speed.

Follow these instructions to add the unoptimized particle system to your scene and experience its impact:

then click and drag the Unoptimized Particle System prefab into the 

 window and add it as a child GameObject of the 

Position the particle system somewhere in the scene that will be visible through the portal window. 

  Build and run the app to preview the new functionality.

Pay attention to the fps value as you point the camera towards and away from the unoptimized particles.

When you are finished testing, delete the 

Experience low frame rate in your app

If you want to further develop your skills, explore new concepts, or improve your project, check out some of the optional activities below. Each one is tagged as either Easy, Medium, or Difficult, so you can choose the level of challenge. 

These activities are entirely optional, so if you’re not interested, no problem – just skip this step. 

We do recommend attempting at least one of them in order to get the most out of this learning experience. Good luck!

Medium: Add spatial audio to the portal world

If you completed the AR Marker project, you are already familiar with spatial audio and how much it can enhance AR. As you get closer to the object emitting sound, it gets louder. As you move farther away, the audio gets quieter. This dynamic effect makes for a more immersive, grounded AR experience. Use the following guidance for help completing this challenge:

Download audio from the Unity Asset Store or other online sources. Looping audio that can play continuously in the scene will probably work best.

 GameObjects to your portal world and assign sounds to the 

 and adjust the volume and volume roll-off as desired. 

For a reminder on how to implement spatial audio in an AR app, review the 

spatial audio tutorial from the AR Marker project

Difficult: Add animation to the portal world

Adding movement and life to your portal world will make it feel much more intriguing and tempting for the user to peer around. Try incorporating a moving object or character in your own portal world – ideally in a looping movement so that the user has more than once chance to see the action. 

Use the following guidance for help completing this challenge:

Add the new animation to the Animator Controller.

To set the new animation to play by default, right click the new animation node and select 

If you would like to play two animations at once, use the following guidance:

In the Animator Controller, create a new layer and add an animation to it.

Set the new animation layer blending settings to override and set the weight to 1.

If you need more guidance, you can learn more about VFX in 

More things to try

In this tutorial, you added a dynamic scene behind the portal window and made sure the app maintained a high frame rate. In the next tutorial, you will complete the portal window functionality and make sure that the user can only view the portal contents through the window itself. 

Next steps

Absolute Beginner AR Development

Zu-UnityLearn

Absolute Beginner Visual Scripting

Desarrollo de AR para novatos

Hammad_N

Visual Scripting para novatos

display-FPS.mp4

JohnLemonHorizontal.mp4

portal-with-level-behind.mp4

reposition-vertical-level.mp4

rotate-vertical-window-and-level.mp4

vert-portal-demo-no-occlusion.mp4

display-FPS (1).mp4

slow-fps-from-particles.mp4

2B-5.7-spatial-audio.mp4

2B-5.7-add-animation.mp4

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

Unity Version 2022.3