Augmented Reality Tutorial – Create an AR iOS app with ARKit

In this tutorial, I’m going to show you how to build an Augmented Reality iOS app from scratch, step-by-step and without any prior experience in developing AR apps. By the end of this tutorial, you will have a fully working AR app that runs on your iOS device.

Requirements

  • A Mac
  • An iOS device that supports AR ( iPhone 6s & above, iPad pro )
  • Basic knowledge of at least one programming language

What we are going to build

This is what the final app will look like. A 3D model of the Earth spinning in your living room! Cool isn’t it?

Softwares & frameworks that we are going to use

  • Unity Engine – It’s a game engine which is used to manipulate 2D & 3D graphics.
  • ARKit – It’s a framework which enables Augmented reality capabilities. It has to be imported inside unity to create AR apps.
  • Xcode – It is Apple’s official IDE which is used to develop apps. But we are just going to use it to run the AR app on our device that we create using Unity.
  • C# (Language) – This is the language which is used to code apps in Unity.

So let’s download these 3 tools and set them up!

This really short video will guide you to download these 3 tools & set them up correctly. After you have done that we can get started with the development.

If you have followed all the steps shown in the above video, you are ready to get started with the AR app development. Excited?

First, let me give you a short overview of Unity. If you open Unity, you can see 5 windows – Scene, Game, Hierarchy, Project & Inspector. These are the 5 main windows that we will be using most of the time in unity. These are highlighted in red in the screenshot below.

  • Scene – This is where we add all the items that we want to see in the AR view. Some of these items are Directional Light (for lighting up our scene), Camera (which represents our device camera), 3D models (for example the earth model) that we want to see in our AR view. 
  • Game – Shows the view that the main camera sees when the app is playing. You can test out your app in this window by clicking the Play button in the top, center of the screen.
  • Hierarchy – It lists all the elements that are there in the “scene” window. If we want to add an element to the scene, we add them in the hierarchy which then shows up in the scene. [This will be clear shortly using an example]
  • Project – This has all the files that are going to be used in the app such as 3D models, code scripts, 2D images etc.  
  • Inspector – This is where we can customize all the properties of the items in the “scene/ hierarchy” window. For example, if you click on the directional light in the Hierarchy window, you can see the various properties of the directional light in the inspector window such as color, mode, intensity etc.

 

Now let’s add a 3D model of the Earth in the Hierarchy/ Scene. To do that we are first going to create a sphere model & then wrap a 360 image of the Earth around that sphere model.

To add a sphere, click on “Create” > 3D Object > Sphere. If you cannot find “Create”, it’s just below where it’s written Hierarchy. This will add a sphere model in the Hierarchy/ Scene. If you click on the sphere in the Hierarchy you will see all the properties of this sphere in the inspector window on the right.

The first property is “Transform” which has the position, rotation & scale. All these 3 properties (position, rotation, scale) have values in x, y, z axis. If you change these values to some random numbers it will change the sphere’s position, rotation, scale depending on what value you change. For now, we are just going to change the position values to 0, 0, 1.5 for x, y, z respectively. See the 2 screenshots below for before and after changing the position values.

Did you notice what happened here? When we changed the position value from (0, 0, 0) to (0, 0, 1.5) the sphere moved 1.5 meters in the z-axis and is now in front of the camera and now it can be seen in the Game window. Basically what we see in the Game window is what is seen by our phone’s camera. So it was very important to bring the sphere in front of the camera. Now that the sphere is in the correct position, let’s add a 360 image of the Earth on it.

Download the 360 image of the Earth from here: Download 360 Earth

Inside unity, click on the “Assets” folder in the project window and drag the 360 image that you just downloaded, into the Assets folder. We cannot directly apply an image to a 3D model (sphere in this case). We first have to create a material, assign that image to that material & then apply that material to the sphere. To do that right click on the Assets folder  >  Create  >  Material. Name that material anything you want, I will name it earth360. While that material is selected, go to the inspector window & click on the dropdown menu on the top which says “standard”. Choose Legacy shaders > Diffuse. Now drag the 360 image on the box which says “texture”. See the image below if it’s not clear. 

Now just drag this material on the “sphere” game object in the Hierarchy window. The Earth is ready! Looks cool right? 

Now let’s add some spin to the Earth. To do that we have to write some code. Don’t worry, it’s just one line of code. So let’s attach a script to the sphere object as we have to spin the sphere. Click on the sphere object in the hierarchy window and go to the inspector window. At the bottom of the inspector window, you can see a button that says “Add Component”,  click on that. Type the name you want to give to the script, I will name it “SpinScript” and then press “return” key 2 times & the script is created & attached to the sphere object. Now double click on the script you just created & wait for a few seconds for it to open in the code editor (visual studio)

There are 2 functions inside the script – Start() and Update(). The Start() function is executed when the app just starts. The Update() function is executed throughout the lifetime of the app and the frequency of its execution is 60 times per second. We are going to write our code in the Update() function. You will know the reason soon. Inside the Update() function type this: 

transform.Rotate(Vector3.up, 0.5f);

 

So now the script looks something like this:

This line of code means – Rotate the object (sphere) along the vertical axis by 0.5 units. Rotate is the name of the function, axis & angle of rotation are the parameters of this function. So for the axis, we gave it a value of Vector3.up which means vertical axis. For the angle of rotation, we gave it a value of 0.5 units which means the sphere is rotated by 0.5 units. Rotating the sphere by 0.5 units is very less rotation. We want to keep rotating the sphere by 0.5 so that a spin motion is observed. That’s why we wrote this line of code in the Update() function so that it’s executed again and again. You can also increase the rotation value, this will increase the speed of rotation.

That’s all for the code part. Now, let’s save the script by going to File > Save.