In this tutorial, we’ll be developing our first Augmented Reality iOS Application using ARKit and SceneKit.
- XCode 9 or above
- iPhone 6s or above since ArKit requires A9 processor.
- iOS 11 or above.
Table of Contents
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.
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:
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:
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
how to using the iOS ARKit Tutorial?