Placing and Manipulating Objects in AR

Tutorial

·

intermediate

·

+10XP

·

30 mins

·

(395)

Unity Technologies

Placing and Manipulating Objects in AR

In this tutorial, we’ll learn how to use AR Session and AR Session Origin — both part of the Unity AR Foundation package — to place and manipulate objects in AR. If you haven’t installed the AR Foundation and AR package for your chosen mobile platform, please see Configuring Unity for XR Development.

Languages available:

1. Placing and Manipulating Objects in AR

This tutorial has been verified using Unity 2019.4 LTS, AR Foundation 2.1.10 and ARCore XR Plugin 2.1.12

Instantiating objects, also known as spawning, and adjusting their positions are foundational features of interactive AR applications. Although these applications may serve different use cases with different visual styles, the logic behind object spawning is typically very consistent.

Figure 01: Wayfair uses AR to let users visualize what furniture would look like in their homes before purchasing it.

Figure 01: Wayfair uses AR to let users visualize what furniture would look like in their homes before purchasing it.

In essence, an AR application with object-spawning features must be able to:

  • Detect planes in your play area.
  • Spawn and move an object after you press on the plane.
  • Spawn multiple objects around the plane after you tap on other areas.
  • Allow you to select and reposition objects.

2. Installing the AR Foundation Package

1. Go to Window > Package Manager.

2. Once the Package Manager window is open, ensure that you can see the packages in the Unity Registry (Figure 02).

Figure 02: Package Manager window showing the Unity Registry

Figure 02: Package Manager window showing the Unity Registry

3. Search for AR Foundation and click Install (Figure 03).

Figure 03: Installing the AR Foundation package

Figure 03: Installing the AR Foundation package

You now have the AR Foundation package in your project. For this project, we will be using an Android device, so install the ARCore XR Plugin.

3. Configuring Your Scene for AR Foundation and Plane Detection

1. Add the AR Session to your Scene by clicking GameObject > XR > AR Session (Figure 04).

Figure 04: Adding the AR Session to the Scene

Figure 04: Adding the AR Session to the Scene

2. If your AR session doesn’t have an AR Input Manager, add it by clicking Add Component and searching for AR Input Manager (Figure 05). The AR Input Manager handles all of your Scene input so you can interact with trackable objects, such as planes and feature points.

Figure 05: AR Session GameObject with the AR Input Manager

Figure 05: AR Session GameObject with the AR Input Manager

3. Add the AR Session Origin GameObject to the Scene by clicking GameObject > XR > AR Session Origin (Figure 06).

Figure 06: Adding the AR Session Origin to the Scene

Figure 06: Adding the AR Session Origin to the Scene

4. In the AR Session Origin Inspector, make sure AR Camera is set as the reference in the AR Session Origin Camera parameter (Figure 07).

Figure 07: AR Session Origin Camera field

Figure 07: AR Session Origin Camera field

5. To enable plane detection in your AR Scene, add the AR Plane Manager to the AR Session Origin object.

6. Specify the AR Plane Manager to detect vertical and horizontal planes by adjusting its DetectionMode to Everything.

7. To interact with trackable features (such as planes), add the AR Raycast Manager.

8. Your AR Session Origin object should look like the following (Figure 08):

Figure 08: Add and configure the AR Session Origin

Figure 08: Add and configure the AR Session Origin

9. We’ll need a plane Prefab so the AR Plane Manager script can display the location of the planes in our AR Scene. In the Hierarchy, right-click and select XR > AR Default Plane (Figure 08).

Figure 08: Adding the AR Default Plane

Figure 08: Adding the AR Default Plane

10. Drag this new plane from the Hierarchy into the Project window to create a Prefab and delete it from the Hierarchy.

11. In the AR Plane Manager script, assign the AR Default Plane Prefab from the Project window to the Plane Prefab variable in the Inspector (Figure 09).

Figure 09: Assigning the AR Default Plane Prefab

Figure 09: Assigning the AR Default Plane Prefab

12. We need an object to spawn in our Scene. Create a Cube and name it SpawnableObject.

13. Set the scale to 0.1, 0.1, 0.1

14. Create a tag named Spawnable and assign it to SpawnableObject. We will use that tag to tell when a ray hits one of these Prefabs.

15. Drag SpawnableObject from the Hierarchy into the Project window to create a Prefab and then delete SpawnableObject from the Hierarchy (Figure 10).

Figure 10: The completed SpawnableObject Prefab

Figure 10: The completed SpawnableObject Prefab

4. Creating the Interaction Script

1. Create a C# script and name it SpawnableManager.

2. Create an Empty Game Object in your Scene and name it SpawnManager.

3. Assign the SpawnableManager script to your SpawnManager object.

4. Open the SpawnableManager script.

5. At the top, add:

[@portabletext/react] Unknown block type "code", specify a component for it in the `components.types` prop

6. Now we’ll create some variables to the top of the script’s class:

[@portabletext/react] Unknown block type "code", specify a component for it in the `components.types` prop

7. Inside the Start method, we’ll set the spawnedObject variable to null and find the AR Camera. Add these lines to the Start method:

[@portabletext/react] Unknown block type "code", specify a component for it in the `components.types` prop

8. In the Update method, we’ll check to see if there’s a touch event and, if so, we will:

  • Check to see if a ray has hit a plane.
  • Check to see which phase our touch event is at.
  • If the phase is set to Begin, we will:
    • Check to see if we are touching a previously spawned object.
    • If so, we will assign that object to our spawnedObject variable.
    • If not, we instantiate the Prefab and assign that object to our spawnedObject variable.
  • If the phase is set to Moved and our spawnedObject variable has something in it, we’ll move the spawnedObject to the touch location on the plane.
  • If the phase is Ended, we’ll set the spawnedObject variable to null so we no longer are able to drag the Prefab around.

9. Add the following code to the Update method:

[@portabletext/react] Unknown block type "code", specify a component for it in the `components.types` prop

10. Lastly, we need to create a method that will take in a location and instantiate our Prefab. Add the following method your Update method:

[@portabletext/react] Unknown block type "code", specify a component for it in the `components.types` prop

11. Save your script and head back to Unity (Figure 11).

Figure 11: The completed SpawnableManager script

Figure 11: The completed SpawnableManager script

12. In your SpawnableManager script on your SpawnManager object, drag the AR Session Origin object from the Hierarchy into the Raycast Manager variable in the Inspector.

13. Drag the SpawnableObject Prefab from the Project window into the Spawnable Prefab variable (Figure 12).

Figure 12: The completed SpawnManager object

Figure 12: The completed SpawnManager object

5. Configuring Your Build Settings for Android

If you’re using Android, you must first change a few settings in order to build your app.

1. Go to Edit > Project Settings… > Player > Other Settings and go to the Graphics APIs section. Remove Vulkan API from the list (Figure 13).

Figure 13: Remove the Vulkan API so you are left with the OpenGLES3 API.

Figure 13: Remove the Vulkan API so you are left with the OpenGLES3 API.

2. Set the Minimum API Level to API Level 24 or higher (Figure 14).

Figure 14: Set the Minimum API Level to API level 24 or higher.

Figure 14: Set the Minimum API Level to API level 24 or higher.

3. Open a web browser and go to https://gradle.org/releases.

4. Download Gradle v5.6.4 and unzip it into a location of your choosing.

5. Go to Edit > Preferences… > External Tools and uncheck Gradle Installed with Unity, then set the Gradle location to the location where you unzipped the download (Figure 15).

Figure 15: Uncheck Gradle Installed with Unity and set the Gradle location.

Figure 15: Uncheck Gradle Installed with Unity and set the Gradle location.

Now we just need to alter some Gradle files located in Assets\Plugins\Android inside your Project folder.

1. Go to https://developers.google.com/ar/develop/unity/android-11-build and follow the directions in the Unity 2019.3 and 2019.4 section.

2. Build and launch your project on your device.

6. Conclusion

You can now spawn a single object and adjust its position and spawn multiple objects in your Scene. If you need to reposition an object, you can touch a previously instantiated object and drag it to a new position on the AR Planes. You are well on your way to mastering the basics of mobile AR interaction.

Complete this tutorial