Swiftorial Logo
Home
Swift Lessons
Matchups
CodeSnaps
Tutorials
Career
Resources

ARKit and SceneKit Tutorial

Introduction

Augmented Reality (AR) is an exciting technology that overlays digital content onto the real world. ARKit is Apple's framework for creating AR experiences on iOS devices, while SceneKit is a 3D graphics framework that helps in creating 3D scenes and animations. This tutorial will guide you through the process of setting up and using ARKit and SceneKit to create an AR experience from start to finish.

Setting Up Your Xcode Project

To get started with ARKit and SceneKit, you'll need to create a new Xcode project.

  1. Open Xcode and create a new project.
  2. Select "Augmented Reality App" from the template options.
  3. Choose "Swift" as the language and "SceneKit" as the content technology.
  4. Click "Next", name your project, and save it to your desired location.

Understanding the Project Structure

Once you've created your project, you'll notice that Xcode has set up a basic AR application for you. The key files to note are:

  • ViewController.swift: This file contains the main logic for your AR experience.
  • Main.storyboard: The storyboard file where you can design your interface.
  • Info.plist: The property list file where you can configure app settings and permissions.

Configuring ARKit

To start using ARKit, you'll need to set up an AR session and configure it in your ViewController.swift.

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
        
        // Create a new scene
        let scene = SCNScene()
        
        // Set the scene to the view
        sceneView.scene = scene
    }

    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()
    }

    // MARK: - ARSCNViewDelegate

    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
    }
}
                

Adding 3D Objects to Your Scene

To make your AR experience more engaging, you can add 3D objects to your scene using SceneKit. In this example, we'll add a simple 3D box.

override func viewDidLoad() {
    super.viewDidLoad()
    
    // Set the view's delegate
    sceneView.delegate = self
    
    // Show statistics such as fps and timing information
    sceneView.showsStatistics = true
    
    // Create a new scene
    let scene = SCNScene()
    
    // Create a box
    let box = SCNBox(width: 0.1, height: 0.1, length: 0.1, chamferRadius: 0.01)
    
    // Create a node with the box geometry
    let boxNode = SCNNode(geometry: box)
    
    // Position the node in the scene
    boxNode.position = SCNVector3(0, 0, -0.5)
    
    // Add the node to the scene
    scene.rootNode.addChildNode(boxNode)
    
    // Set the scene to the view
    sceneView.scene = scene
}
                

Handling User Interaction

To make your AR experience interactive, you can handle user touches and gestures. In this example, we'll add a tap gesture recognizer to detect taps on the screen.

override func viewDidLoad() {
    super.viewDidLoad()
    
    // Set the view's delegate
    sceneView.delegate = self
    
    // Show statistics such as fps and timing information
    sceneView.showsStatistics = true
    
    // Create a new scene
    let scene = SCNScene()
    
    // Create a box
    let box = SCNBox(width: 0.1, height: 0.1, length: 0.1, chamferRadius: 0.01)
    
    // Create a node with the box geometry
    let boxNode = SCNNode(geometry: box)
    
    // Position the node in the scene
    boxNode.position = SCNVector3(0, 0, -0.5)
    
    // Add the node to the scene
    scene.rootNode.addChildNode(boxNode)
    
    // Set the scene to the view
    sceneView.scene = scene
    
    // Add a tap gesture recognizer
    let tapGestureRecognizer = UITapGestureRecognizer(target: self, action: #selector(handleTap(_:)))
    sceneView.addGestureRecognizer(tapGestureRecognizer)
}

@objc func handleTap(_ gestureRecognize: UIGestureRecognizer) {
    // Check what nodes are tapped
    let p = gestureRecognize.location(in: sceneView)
    let hitResults = sceneView.hitTest(p, options: [:])
    
    // Check that we clicked on at least one object
    if hitResults.count > 0 {
        // Retrieved the first clicked object
        let result = hitResults[0]
        
        // Get its material
        let material = result.node.geometry!.firstMaterial!
        
        // Highlight it
        SCNTransaction.begin()
        SCNTransaction.animationDuration = 0.5
        
        // On completion - unhighlight
        SCNTransaction.completionBlock = {
            SCNTransaction.begin()
            SCNTransaction.animationDuration = 0.5
            
            material.emission.contents = UIColor.black
            
            SCNTransaction.commit()
        }
        
        material.emission.contents = UIColor.red
        
        SCNTransaction.commit()
    }
}
                

Conclusion

Congratulations! You've now created a basic AR application using ARKit and SceneKit. You learned how to set up your Xcode project, configure ARKit, add 3D objects to your scene, and handle user interactions. This is just the beginning—there's so much more you can do with ARKit and SceneKit to create immersive AR experiences.