Creating simple AR App in Unity3D using ARCore
AR and VR applications are emerging more and more, providing new possibilities and new perspectives to end user. In this article we’ll explore how AR library called ARCore can be implemented using Unity3D in order to display simple chair object.
Before we dig in into coding, let us remind ourselves what is AR and VR?
Augmented reality (AR) is an enhanced version of reality created by the use of technology to overlay digital information on an image of something being viewed through a device (such as a smartphone camera).¹
Virtual reality (VR) is an artificial environment which is experienced through sensory stimuli (such as sights and sounds) provided by a computer and in which one’s actions partially determine what happens in the environment.²
The main difference between VR and AR is that VR creates whole new, detached virtual experience — for example, you can enter in virtual hotel, walk there, all while sitting in your chair using VR goggles and controller in your hand. AR adds virtual objects, for example chair in real world space and thus enhances the experience of real world.
Applications that provides AR/VR experiences are mostly used in cinematic, gaming, educational, automotive, healthcare, travel & tourism experiences etc.
Before we can start with implementation of our AR app, we need to check some requirements (according to the ‘ARCore Quickstart for Android’):
At the bottom of this article you can find sample code.
Project preparation
In order to make our AR application, we need to make the following project preparation steps:
- Install ‘Unity 2017.4.34f1’ or later. Unity version used for creating this sample is ‘Unity 2019.2.12f1’. Make sure that ‘Android Build support’ is checked because we are going to runt the app on Android device.
2. Download ‘ARCore SDK for Unity 1.18.0’ or later:
https://github.com/google-ar/arcore-unity-sdk/releases
3. After you have downloaded ‘ARCore SDK’, start Unity3D and create new project, with ‘3D’ template selected.
4. Import ‘ARCore SDK’ (file will be named like ‘arcore-unity-sdk-1.18.0.unitypackage’) downloaded in step 2, while Unity3D is running.
5. If you are using Unity3D 2019, select ‘Window > Package Manager’ and install the following packages:
- Multiplayer HLAPI
- XR Legacy Input Helpers
6. In Unity3D we need to open scene named ‘ObjectManipulation’ which is located in the following folder:
- Assets/GoogleARCore/Examples/ObjectManipulation/Scenes/
This scene will be our main scene for application, so the next step is to configure Android build settings.
Configuring Android Build Settings
In order to make Android builds, we need to implement some steps in order to enable that functionality:
- Go to ‘File > Build Settings’ and open ‘Build Settings’ window
- Click on ‘Switch Platform’ near ‘Android’ Platform and wait until Unity finishes compiling scripts.
- Click on ‘Player Settings’ and make sure that ‘Player’ settings item is selected.
- Expand ‘Other Settings’ and in ‘Graphic APIs’ delete ‘Vulkan’ graphic API.
5. In the same settings section (section called ‘Other Settings’), make sure that ‘Multithreaded rendering’ is checked.
6. Scroll down to find ‘Package Name’ property and set package name by as you wish (like: ‘com.zsasko.arcore-sample’).
7. In ‘Minimum API Level’ property select Android 7.0 ‘Nougat’ (API Level 24) or higher.
8. In ‘XR Settings’ section, make sure that ‘ARCore Supported’ is checked.
9. Now we can close ‘Project Settings’ window and in previous window ‘Build Settings’ click on ‘Add Open Scenes’ button. It will add current ‘ObjectManipulation’ scene as main scene for application. This scene will allows us also to reposition our chair and even change it’s size.
If you want to learn more on how all the Game Objects are connected, you can read the following simple guide:
Very nice, we have imported and configured ‘ARCore SDK’ in our Unity project. We can now run the app by clicking ‘Ctrl + B’ or pressing ‘File > Build And Run’ button. The app will show the pawn figure which we are going to replace with nice chair object.
When the app is running make sure that you move the camera until you see white grid:
This white grid indicates that user can click somewhere on the grid and by doing that he will place some object in this location.
If you have some difficulties in project setup or Android Build setup, you can read similar setup instructions on ‘ARCore Quickstart Android guide’ page:
Adding custom Chair model
In the following step, we are going to replace default pawn object with our custom chair model. Custom chair model we can download from here:
Extract chair model to some folder and move ‘Char_leather.jpg’ and ‘12283_Chair_v1_L3.obj’ files into ‘Materials’ folder.
Now we are going to create chair prefab. Create new empty ‘Game Object’ called ‘Char’ and move newly imported ‘12283_Chair_v1_L3’ material into it. Apply to the ‘12283_Chair_v1_L3’ object the following Transform values:
- Position: x = 0, y = 0, z = -0.54
- Rotation: x = -90, y = 0, z = 0
- Scale: x = 0.05, y = 0.05, z = 0.05
On parent ‘Chair’ object put the following transform values:
- Scale: x= 0.15, y = 0.15, z = 0.15
In order to create prefab from scaled chair object, we need to move ‘Chair’ object into ‘Prefabs’ folder. Now we have successfully created prefab.
Delete ‘Chair’ GameObject from scene since it will be automatically instantiated when ARCore will detect appropriate plane for positioning it. The next step is to apply leather material to chair.
Right-click on ‘Materials’ folder add new material named ‘Leather’. In material inspector, click on ‘Albeido’ property and select ‘Chair_leather.jpg’ in order to apply this image to leather material.
In order to do so, we need to open prefab for editing, by double-clicking on ‘Chair’ prefab.
In ‘Chair’ object, we can see different parts of chair (like ‘Chair_back’) and to all parts we need to apply leather material, by specifying it in ‘Element 0’ property of ‘Mesh Renderer’ object.
Now return to our ‘ObjectManipulation’ scene and select ‘Pawn Generator’ game object and in ‘Pawn Prefab’ select our newly created chair prefab:
and save scene.
Voilà! Start the app and play with placing the chair.
I wish you a lot of AR projects in the future! :)
Source code of sample application created in this article:
[1]: “Augmented reality.” Merriam-Webster.com Dictionary, Merriam-Webster, https://www.merriam-webster.com/dictionary/augmented%20reality. Accessed 21 Aug. 2020.
[2]: “Virtual reality.” Merriam-Webster.com Dictionary, Merriam-Webster, https://www.merriam-webster.com/dictionary/virtual%20reality. Accessed 21 Aug. 2020.
[3]: Jan Tißler; “Augmented Reality in Marketing: 8 Current Examples”; dmexco, 21 Aug. 2020., https://dmexco.com/stories/augmented-reality-in-marketing-8-current-examples-2/; photograph.
