iOS ARKit Tutorial – Augmented Reality iOS App

In this tutorial, we’ll be developing our first Augmented Reality iOS Application using ARKit and SceneKit.

Introduction to ARKit

• ARKit library was introduced by Apple in WWDC 2017.
• It allows developers to build Augmented Reality Applications.
• Augmented Reality Applications allows us to view virtual objects in the real environment through the camera.
• Augmented Reality is like a mixture of Virtual Reality and the Real World.
• We can place either 2D or 3D objects in the ARKit scene. For 2D objects, SpriteKit iOS library is used. For 3D objects, SceneKit is used.

The basic Augmented Reality iOS app that we’ll be building next will use SceneKit.

3D Models are of the format DAE and SCN.

We can create a customize 3D models using the free Blender Software.

Let’s get started with the development now.

Getting Started with iOS ARKit

Launch your XCode and create a new project. Make sure that you’ve selected the template as Augmented Reality App for this tutorial.

On the next screen, ensure that you’ve selected SceneKit.

Now XCode creates your first ARKit project.

iOS ARKit Tutorial Project Structure

There’s a ship.scn 3D sample model created.

The 3D model is some distance away from the origin. This can be altered from the attributes panel on the right side.

On MainStoryboard has the SceneView already linked to the ViewController.

The ViewController.swift has a boilerplate code in place to set the scn file and begin the AR tracking.

Let’s run this sample Augmented Reality App on a device.

On clicking run, you might get the following dialog in your XCode.

After trusting the app from the settings following is the output of the application:

WOW! The ship 3D model is displayed on the screen.

But where is the origin? How can we change the size and position of the ship? How are the stats at the bottom being displayed? How do we add another 3D object on the Scene?

We’ll be discussing each of these in the next section where we’ll play around with the Swift code as well.

The default code for the ViewController.swift is given below:

The ARSCNView class is the view used for displaying 3D objects in the AR SceneView. The ViewController class conforms to the protocol ARSCNViewDelegate.

sceneView.showsStatistics = true is used to show the stats i.e. fps etc at the bottom of the screen.

sceneView.session returns an ARSession. On this, we run our AR tracking by setting the configuration in the run method.

Modifying the scale and position of the Model

We can modify the scale and position of the Model (ship in this case) in the following way:

The Position of the model is the position of the SCNNode relative to the camera.

Positive x is to the right. Negative x is to the left.

Positive y is up. Negative y is down.

Positive z is backward. Negative z is forward.

Changing scale to make the model appear shorter

In the above example, we’ve set the scn model to the origin.

Adding an SCNBox

Let’s add an SCNBox in our ViewController.swift below:

Copy
import UIKit
import SceneKit
import ARKit

class ViewController: UIViewController, ARSCNViewDelegate {

@IBOutlet var sceneView: ARSCNView!
override func viewDidLoad() {
        super.viewDidLoad()
        
        // Set the view's delegate
        sceneView.delegate = self
        
        // Show statistics such as fps and timing information
        sceneView.showsStatistics = true
        sceneView.debugOptions = ARSCNDebugOptions.showWorldOrigin
        
        // Create a new scene
        let scene = SCNScene(named: "art.scnassets/ship.scn")!
        
        // Set the scene to the view
        sceneView.scene = scene
        addBox()
    }
    
    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        
        // Create a session configuration
        let configuration = ARWorldTrackingConfiguration()

        // Run the view's session
        sceneView.session.run(configuration)
    }
    
    override func viewWillDisappear(_ animated: Bool) {
        super.viewWillDisappear(animated)
        
        // Pause the view's session
        sceneView.session.pause()
    }
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Release any cached data, images, etc that aren't in use.
    }

    // MARK: - ARSCNViewDelegate
    
/*
    // Override to create and configure nodes for anchors added to the view's session.
    func renderer(_ renderer: SCNSceneRenderer, nodeFor anchor: ARAnchor) -> SCNNode? {
        let node = SCNNode()
     
        return node
    }
*/
    
    func session(_ session: ARSession, didFailWithError error: Error) {
        // Present an error message to the user
        
    }
    
    func sessionWasInterrupted(_ session: ARSession) {
        // Inform the user that the session has been interrupted, for example, by presenting an overlay
        
    }
    
    func sessionInterruptionEnded(_ session: ARSession) {
        // Reset tracking and/or remove existing anchors if consistent tracking is required
        
    }
    
    func addBox() {
        let box = SCNBox(width: 0.05, height: 0.05, length: 0.05, chamferRadius: 0)
        
        let boxNode = SCNNode()
        boxNode.geometry = box
        boxNode.position = SCNVector3(0, 0, -0.2)
        sceneView.scene.rootNode.addChildNode(boxNode)
    }
}

sceneView.debugOptions = ARSCNDebugOptions.showWorldOrigin is used to show the origin and the coordinate lines in the camera scene.

In the addBox() function we add a SCNNode of the shape box to our Scene in the ARSCNView.

The output when the above application is run is given below:

So our SCNBox is set in front of the origin and is colored white.

Changing the background color of the SCNBox

SCNNode above is like a SCNBox and has six sides. Lets set a different color on each side.

Change the addBox() method to the following:

Copy
func addBox() {
        let box = SCNBox(width: 0.05, height: 0.05, length: 0.05, chamferRadius: 0)
        
        let boxNode = SCNNode()
        boxNode.geometry = box
        boxNode.position = SCNVector3(0, 0, -0.2)
        
        let colors = [UIColor.green, // front
            UIColor.red, // right
            UIColor.blue, // back
            UIColor.yellow, // left
            UIColor.purple, // top
            UIColor.gray] // bottom
        
        let sideMaterials = colors.map { color -> SCNMaterial in
            let material = SCNMaterial()
            material.diffuse.contents = color
            material.locksAmbientWithDiffuse = true
            return material
        }
        boxNode.geometry?.materials = sideMaterials
        sceneView.scene.rootNode.addChildNode(boxNode)
    }

We use the materials property on the box and set a different UI Color from the array on each side by mapping them to the respecitve SCNMaterial.

The output of the application in action is given below. All the sides have a different color.

This brings an end to this ARKit Tutorial. You can download the project from the link below:

Reference: ARKit Docs

About Anupam Chugh

He loves learning new stuff in Android and iOS. Shoot him queries.