iOS 11 introduces ARKit, a new framework that allows you to easily create Augmented Reality experiences for iPhone and iPad. By blending digital objects and information with the environment around you, ARKit takes apps beyond the screen, freeing them to interact with the real world in entirely new ways.
In a pretty amazing demo, Apple highlighted the marker-less spatial awareness that ARKit has in a tabletop gaming title featuring an airship attack on an enemy outpost. ARKit has support for Unity, Unreal Engine, and SceneKit and will be coming to iPad and iPhone.
The ARkit from Apple uses SLAM tracking and sensor fusion in order to place 3D objects on the ground and other surfaces. To follow along you will need to download some software. You will need Xcode 9 beta, IOS 11 beta (on iPhone/iPad), the ARKit Unity package and the newest patch version of Unity 5.6.1p1.
In this tutorial again there is no single line of coding so to implement same on your mobile it’s not necessary to have coding knowledge 🙂
In this augmented reality tutorial we will use the Unity 3D and the Apple ARkit to create an augmented reality app for your iPhone or iPad. This app will allow us to place a virtual Church in the real world, move it around, and make it bigger or smaller. This tutorial is designed for beginners so even if you don’t have any previous knowledge of programming or Unity 3D you should still be able to follow along!
Prerequisite (Tools Needed):
First, you will need a Mac computer (MAC OS) Apple has been really strict about this. Second, you will need an Apple developer’s account to download the necessary tools to get started. Second, you will need an Apple developer’s account to download the necessary tools to get started.
- Unity Engine (IMP: Unity’s AR Kit requires the patch version of Unity 5.6.1p1 or later. )
- Xcode 9 beta
- Apple A9/A10 Processor device with iOS 11 Beta installed
- Unity ARKit Plugin Download Here
Step by Step Implementation
1. Install all the software you will need (Prerequisite):
- Log into the Apple developers website and click on the “Downloads” button. If your developer account is active, you will see a collection of beta software options.
2. Setup a Simple Unity Project:
Once everything is installed and ready to go, it is time to create an empty project in Unity. Let’s start by creating a new Unity3D project by the name of “Tutorial5”. (Disable Unity Analytics for now)
3. Import the ARKit Plugin into newly created Unity Project:
- Import the ARToolkit Unity Plugin which we just downloaded in prerequires section.
- This can be done by importing custom UnityPackage, here I stored both inside Vuforia_SDK folder in my machine.
- To import a new custom package:
- Choose Assets > Import Package > Custom Package… to bring up File Explorer (Windows) or Finder (Mac).
- Select the package you want from Explorer or Finder, and the Import Unity Package dialog box displays, with all the items in the package pre-checked, ready to install. (See Fig 4: New install Import Unity Package dialog box.)
- Select Import and Unity puts the contents of the package into the Assets folder, which you can access from your Project View.
- Once it’s finished, a window will appear with all the files in the package. Click on the “Import” button.
4. Open Unity-Scene “UnityARShadows” inside Unity Project
- In the Project window, double-click the “UnityARShadows” file.
5. Import 3D model (Church) from Unity Assets Store:
Now the interesting part begins!!! let’s download 3D model for our augmented reality. For this tutorial, we choose one Amazing Church from Unity Asset Store (free).
- You can open the Asset Store window by selecting ‘Window > Asset Store’ from the main menu. On your first visit, you will be prompted to create a free user account which you will use to access the Store subsequently.
- Navigate to: ‘Window > Asse Store’ OR Select ‘Asset Sore Tab’
- In Asset Store window search for the keyword “Church 3D” and download the same, as shown in the screenshot below.
6. ARKit’s ‘UnityARShadows’ Scene Setup In Unity:
We are almost done with all basic requirements. Let’s setup UnityARShadows scene in unity and ready to fire! Check your Hierarchy window in Unity.
- Delete all unwanted Game Objects:
7. Add 3D model (Church) Inside and basic Script Unity Scene
- Add ‘Church’ Prefab for that select ‘Church’ from ‘Church 3D > Prefabs ‘ and drag to our Scene.
- Make ‘Church’ child of ‘HitCudeParent’ in hierarchy as shown in screenshot below, step 1
- Setup Church Prefab: For Church maintain the Position, Rotation & Scale properties as following in Inspector window : step 2
- Position: X=0, Y=0, Z=0
- Rotation: X=0, Y=0, Z=0
- Scale: X=1, Y=1, Z=1
- Attach script ‘UnityARGeneratePlane.cs’ to ‘Church’ as shown in step 3 screenshot below
- Add ‘HitCubeParent’ as a Plane Prefab inside ‘Inspector Window’ as shown step 4 in screenshot below.
8. Final Camera & Scene Position, Scale & Rotation Setup, and Adjustment
- Setup ‘CameraParent’ Prefab: For Church maintain the Position, Rotation & Scale properties as following in Inspector window
- Position: X=-5, Y=2, Z=-3
- Rotation: X=0, Y=90, Z=0
- Scale: X=1, Y=1, Z=1
- Now your Camera pointing out exactly towards the church. Do some Light change if required.
- Now your scene will look similar to shown screenshot below.
- Hit the Run to confirm that everything is working fine.
9. Final Deployment Setup & Build Process
We are almost done. Let’s save the scene: File >> Save Scene and move towards deployment step.
- The last step is to build the project for iOS iPhone/iPad Platform. We need to go to “File >> Build Settings”. We need to add the current scene by selecting “Add Open Scene”. Then, we need to select a platform (iOS) and then select “Switch Platform“. Here, we will have Build Project options:
- Build Project: This will allow us to export the current Unity project to X-Code to deploy on the iOS device.
- Unity provides a number of settings when building for iOS devices – select from the menu (File > Build Settings… > Player Settings…) to see/modify the current settings.
- With the Player Settings up in the Inspector, change the ‘Build Identifier’ find the Camera Usage Description and type ‘camera use’ into it. Then back in the Build Settings window, click the “Build” button, as per the screenshot below.
- Now Unity wants to know where to put your Xcode project. In the Save As box, type “AR_DEMO” and click the “Save” button .
10. Compile & Run through X-Code
- When the build process completes, a Finder window will appear. Open“AR_DEMO” folder and double click on “Unity-iPhone.xcodeproj”
- We are almost done.You should now be seeing a screen similar to the one in the screenshot below.
- Assign Team to the Project: In the section labeled ‘Signing’, click on the ‘Team‘ drop-down and select your ‘Developer account’.
- With that out of the way, look at the upper-left corner of the window. With your iPhone or iPad connected to your computer, hit the “Play” button. It can take a little bit to compile the first time.
11. Show Time 🙂
Once it is done, you will be able to look augmented Church.
If you get stuck at any point or want to view the source code, you can find it on Github. Let me know if you have any questions in the comments section below!
You did a great Job !!! It’s a Guinness Time now! 🙂