Code Your First Augmented Reality App With ARKit

Until recently, Augmented Reality was one of those “futuristic” ideas that were portrayed in science-fiction utopias. But the time has come when building an AR app has become a reality, and you can have one in your pocket. 

In this tutorial, you’ll learn how to bring Mars, the nearest planet to Earth, into your own room.

Getting Started

Xcode Version

Before we begin, make sure you have the latest version of Xcode installed on your Mac. This is very important because ARKit will only be available on Xcode 9 or newer. You can check your version by opening Xcode and going to Xcode > About Xcode in the upper toolbar. 

If your version of Xcode is older than Xcode 9, you can go to the Mac App Store and update it for free. If you don’t already have Xcode, you can also download and install it for free.

Sample Project

New Project

After you have made sure you have the right version of Xcode, you’ll need to make a new Xcode project. 

Go ahead and open Xcode and click Create a new Xcode project.

You may be used to making a Single View Application, but for this tutorial, you will need to choose an Augmented Reality App and then click Next.

Gaming Frameworks

You can name your project anything you like, but I will be naming mine ARPlanets. You will also notice that there is an option at the bottom where you can select from SceneKit, SpriteKit, and Metal. 

These are all Apple’s gaming frameworks, and for the purpose of the tutorial, we will be using SceneKit because we’ll be using 3D objects. 

Go ahead and select SceneKit if it isn’t already selected. Your screen should look something like this:

Preparing to Test

Connecting an iPhone

Since the Xcode Simulator doesn’t have a camera, you’ll need to plug in your iPhone. Unfortunately, if you don’t have an iPhone, you’ll need to borrow one to be able to follow along with this tutorial (and for any other camera-related apps). If you already have an iPhone connected to Xcode, you can skip ahead to the next step.

A nifty new feature in Xcode 9 is that you can wirelessly debug your app on a device, so let’s take the time to set that up now:

In the top menu bar, choose Window > Devices and Simulators. In the window that appears, make sure that Devices is selected at the top.

Now, plug in your device using a lightning cable. This should make your device appear in the left pane of the Devices and Simulators window. Simply click your device, and check the Connect via Network box.

You will now be able to wirelessly debug on this iPhone for all future apps.

Complete Setup

Now your setup is complete. You should have a working ARKit app, and you can test it on the iPhone that you just connected. In the upper left of Xcode, next to the Run and Stop buttons, select your device from the simulator dropdown.

I’ve selected Vardhan’s iPhone, but you need to select your specific device. 

Now you’re done creating your starter project, and you should see a virtual spaceship appear in your world once you click Run. Here’s what it should look like:

Diving Deeper

Okay, we’re finally ready to delve deeper and actually write some code. You already have a working ARKit app, so let’s build on that and make something cool. 

Exploring the Sample Project

Nodes and Textures

If you look at the folder called art.scnassets, you will notice that it contains two things already: the spaceship node and its texture. In this example, Apple has created a blank spaceship object and basically used an image overlay to form its colors and shapes.

Similarly, we will be creating our own sphere and overlaying an image of the surface of Mars to create an accurate representation of Mars.

Exploring the Sample Code

The ARKit template in Xcode comes with a bunch of pre-written code to make the spaceship appear, so let’s take some time to explore what everything means and why it works.

At the top of the file, you’ll see the following:

import UIKit
import SceneKit
import ARKit

At the top, UIKit is being imported, and we need it because the main view will be a UIViewController. Remember when you selected SceneKit in the project setup? It’s being imported right along with ARKit down below. These are all of the libraries that this file uses.

Below this, you will see a class declaration and the following line of code:

@IBOutlet var sceneView: ARSCNView!

We don’t need to go too much in depth here, but this is an Augmented Reality SceneKit view which is linked via an @IBOutlet to the storyboard. This is the main view for everything we’ll be placing in this tutorial.

Going down a bit further, the viewDidLoad() method should look like this:

override func viewDidLoad() {
    super.viewDidLoad()
  
    // 1
    sceneView.delegate = self
    
    // 2
    sceneView.showsStatistics = true
    
    // 3
    let scene = SCNScene(named: "art.scnassets/ship.scn")!
    
    // 4
    sceneView.scene = scene
}

Here’s what this code does:

1. Remember the sceneView that was linked to the storyboard? We’re assigning its delegate to our ViewController because it conforms to the ARSCNViewDelegate protocol.
2. The next line of code is optional, and it needs to be disabled (set to false) when you actually publish on the App Store. This shows you data such as the FPS and other performance data.
3. Previously, we saw the ship.scn file (the 3D rendering) in the folder called art.scnassets. In this line, an SCNScene, which is a hierarchy of nodes (in this case, the spaceship and its camera) is being created.
4. Lastly, the scene is added to the sceneView, which is connected to the storyboard with an @IBOutlet.

We didn’t cover each and every line in the ViewController.swift file, but what we did cover is important for you to know in order to follow along with the tutorial and build your own ARKit apps in the future.

Creating Planet Mars

Removing the Spaceship

Since we’ll be making a planet instead of a spaceship in our ARKit app, you’ll need to remove it.

First, remove the following two files from the art.scnassets folder: ship.scn and texture.png. We won’t be needing these anymore. 

Next, go back to your ViewController.swift file and locate the following line of code:

// Create a new scene
let scene = SCNScene(named: "art.scnassets/ship.scn")!

Since we no longer have the ship.scn file, this line of code will cause our app to crash, especially because the exclamation mark at the end of this line is forcing it. Since we won’t be using a .scn file for our ship, there’s no need initialize the SCNScene with a string.

Simply replace this line of code with the following:

// Create a new scene
let scene = SCNScene()

If you now run your app, you will see reality, but it won’t be augmented. In other words, the spaceship will be gone.

Function Declaration

Right below viewDidLoad(), create a function declaration as follows:

// Creates planet Mars
function createMars() {
    // Do stuff
}

Doesn’t it seem a bit pointless to create something and not return it? In the function, we will need to return an SCNNode. While we’re at it, let’s also take in a parameter for the position of the planet. 

After you’ve made these modifications, your method should appear like this:

// Creates planet Mars
function createMars(at position: SCNVector3) -> SCNNode {
    // Do stuff
}

Coding the Sphere

Since Mars is spherical, let’s create a sphere to be the basic shape of Mars. You may choose to do this directly in the viewDidLoad() method, but we’ll be using the function we declared above.

Inside your function, insert the following code:

// 1
let sphere = SCNSphere(radius: 0.4)

// 2
let node = SCNNode(geometry: sphere)

// 3
node.position = position

// 4
return node

Here’s what this code does:

1. This line creates a sphere of type SCNSphere with a radius of 0.4. 
2. Here, we simply turn the sphere into an SCNNode which can be returned to the function call site.
3. When we take in the position as an argument to the createMars() function, we are using the parameter here to set the position of the SCNNode which we created on the previous line.
4. This simply returns the SCNNode to the function.

Adding the Sphere

So far, we have created a sphere, but to make it appear at all, we need to add it to our current scene. To do this, add these three lines of code to your viewDidLoad() method:

// 1
let position = SCNVector3(0, 0, -3)

// 2
let mars = createMars(at: position)

// 3
scene.rootNode.addChildNode(mars)

This is what the code does:

1. This line creates a position of type SCNVector3 (which is a three-dimensional representation of a point in space) to be passed into the createMars() function which we created earlier.
2. Here, we’re calling createMars() and passing in the position from the previous variable. Next, we are assigning the node which this function returns to a variable called mars.
3. After doing that, we’re adding mars to the scene that was provided in the sample project from Apple.

Wow! We’ve made quite a bit of progress already. If you run your app now, you should be able to see that there is a white sphere somewhere in your world. If you try to look at it from other angles, it will just look like a circle, but that’s because we don’t have any textures or shadows yet. This is how it should look:

Adding the Texture

Now that we have a sphere in place, we need to add a texture so that it looks like the actual planet, Mars. I just searched for a photo of Mars’s surface, and I will be using it, but you can use any photo you’d like (if you want to mix things up, you can even use textures of other planets).

To use the image you just got, you’ll need to place it in two folders: art.xcassets and art.scnassets. Another thing to note: if you want to be able to copy and paste this code into your project, you will need to name your image mars_texture.png, and it needs to be a PNG file.

Add the following code before the return line in the function createMars():

let material = SCNMaterial()
material.diffuse.contents = #imageLiteral(resourceName: "mars_texture.png")
sphere.firstMaterial = material

First, we create an SCNMaterial that SceneKit can use later on to wrap around the sphere, and we assign it to a constant named material. Then we particulate the selected image and reassign it to the contents of the default SCNMaterial. In other words, the material constant now contains this image to be used as an SCNMaterial. Finally, we wrap the sphere with the SCNMaterial which we made previously.

You are now done, and if you run your app, you’ll be able to see Mars in your room! You can even walk around it and see it from different angles. Here’s how it should look:

Conclusion

Now, you can see just how easy it is to implement Augmented Reality in your app. You can make your imagination go wild with it and even make full games. If you have more technical three-dimensional rendering skills, you can also integrate this with your skills.

I hope this tutorial was informative and you enjoyed it!