Building a Simple ARKit Demo with SceneKit in Swift

Introduction

In this article, I will explain the ARKit basics with some examples.

ARKit

ARKit integrates the iOS device camera and motion features to produce augmented reality experiences in your app or game. Augmented reality (AR) describes user experiences that add 2D or 3D elements to the live view from a device's camera, in a way that makes those elements appear to inhabit the real world. ARKit combines device motion tracking, camera scene capture, advanced scene processing, and display conveniences to simplify the task of building an AR experience. you can use these technologies to create many kinds of AR experiences, using the back camera or front camera of an iOS device.

Prerequisites

This article recommends that you should have a basic understanding of iOS development, and the basics of the ARKit framework.

To test out your ARKit app, you will need one of Apple's ARKit compatible devices, which are devices having Apple A9 processors or higher. Let's dive right in following points below:

Creating a New Project for ARKit apps
Setting Up ARKit SceneKit View
Connecting ARSCNView with View Controller
Connecting IBOutlet
Allowing Camera Usage
Adding 3D Object to ARSCNView

Creating a New Project

In the Xcode menu, select File > New > Project ... Choose Single View App and press next. Xcode has the ARKit template but actually, you can just use the Single View App template to build an AR app.

You can name your project name, whatever you want. I named my project world tracking demo, and press next create a new project.

Setting Up ARKit SceneKit View

Now open up main.storyboard. Look inside the object library for the ARKit SceneKit view. Drag the ARKit SceneKit view onto your view controller.

Connecting IBOutlet

On the Main.storyboard file, go up to the toolbar and open up the Assistant Editor. Add an import statement at the top of the HomeViewController.swift file to import ARKit.

Then, hold control and drag from the ARKit SceneKit View to the HomeViewContoller.swift file. When prompted, name the IBOutlet sceneView.

Configuration of ARSCNView Session

Now it's time to configure the ARKit SceneKit View. Insert the following code into the HomeViewConroller class.

override func viewDidLoad() {
super.viewDidLoad()
let config = ARWorldTrackingConfiguration()
config.planeDetection = .horizontal
sceneView.debugOptions = [ARSCNDebugOptions.showFeaturePoints,ARSCNDebugOptions.showWorldOrigin]
sceneView.delegate = self
sceneView.session.run(config)
}

In the above viewDidLoad() method, we initialized an AR configuration called ARWorldTrackingConfiguration. This is a configuration for running world tracking. What is world tracking? According to Apple's documentation:

"World tracking provides 6 degrees of freedom tracking of the device. By finding feature points in the scene, world tracking enables performing hit-tests against the frame. Tracking can no longer be resumed once the session is paused." - Apple's Documentation

Allowing camera permission

Before we run our app, we need to get user permission that we will utilize their device's camera for augmented reality. So open up Info.plist. Right-click the blank area and choose Add row. Set the key to privacy, camera usage description. Set the value permission message.

Now you should be able to see your camera's view.

We have configured our sceneView's session to run the world tracking configuration.

Adding 3D Object to ARSCNView

We are going to add a 3D box on the sceneView, the code is shown below:

func addBox(){
let box = SCNBox(width: 0.1, height: 0.1, length: 0.1, chamferRadius: 0)
let material = SCNMaterial()
material.diffuse.contents = UIColor.white
material.diffuse.contents = #imageLiteral(resourceName: "C#Cornerlogo")
box.materials = [material]
let boxNode = SCNNode()
boxNode.geometry = box
boxNode.position = SCNVector3(0, 0, -0.2)
let scene = SCNScene()
scene.rootNode.addChildNode(boxNode)
sceneView.scene = scene
}

Now add box that's called from the viewdidLoad() method.

override func viewDidLoad() {
super.viewDidLoad()
let config = ARWorldTrackingConfiguration()
sceneView.session.run(config)
addBox()

Build and run the app, and you will able to see a floating 3D box.

Thanks, Cheers!! Happy Coding!!

2 Comments

Join the conversation! Your thoughts help the community grow.

Gaurav Kumar6y ago
Nice article.. Pravesh Dubey but could you please explain how light detection works, could this box be seen in dark as well.
- Pravesh Dubey6y ago
  Yes, Gaurav Kumar, Whatever color you set on the 3D box and you set an image as well.