Swiftorial Logo
Home
Swift Lessons
Matchups
CodeSnaps
Tutorials
Career
Resources

Plane Detection Tutorial

Introduction

Plane detection is a crucial aspect of augmented reality (AR) that allows virtual objects to interact with the real world by identifying flat surfaces such as floors, tables, and walls. In this tutorial, we will explore how to implement plane detection in an iOS app using ARKit.

Setting Up Your Project

First, we need to create a new Xcode project and set it up for ARKit:

Step 1: Open Xcode and create a new project.

Step 2: Choose the "Augmented Reality App" template.

Step 3: Set the project name, organization name, and other details.

Step 4: Ensure the project is configured to use Swift and ARKit.

Enabling Plane Detection

To enable plane detection in your AR app, you need to configure the AR session with plane detection options:

import UIKit
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()
        
        // Enable plane detection
        configuration.planeDetection = [.horizontal, .vertical]
        
        // 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()
    }
}

Handling Detected Planes

Once planes are detected, ARKit provides you with ARPlaneAnchor objects. You can visualize these planes by creating a plane node:

func renderer(_ renderer: SCNSceneRenderer, didAdd node: SCNNode, for anchor: ARAnchor) {
    guard let planeAnchor = anchor as? ARPlaneAnchor else { return }
    
    // Create a plane geometry with the anchor's dimensions
    let plane = SCNPlane(width: CGFloat(planeAnchor.extent.x), height: CGFloat(planeAnchor.extent.z))
    
    // Create a material for the plane
    let material = SCNMaterial()
    material.diffuse.contents = UIColor.blue.withAlphaComponent(0.5)
    plane.materials = [material]
    
    // Create a node with the plane geometry
    let planeNode = SCNNode(geometry: plane)
    
    // Set the position of the node
    planeNode.position = SCNVector3(planeAnchor.center.x, 0, planeAnchor.center.z)
    
    // Rotate the plane to horizontal
    planeNode.eulerAngles.x = -.pi / 2
    
    // Add the plane node to the scene
    node.addChildNode(planeNode)
}

Updating Plane Nodes

As ARKit refines its understanding of the plane's size and position, you should update the corresponding plane node:

func renderer(_ renderer: SCNSceneRenderer, didUpdate node: SCNNode, for anchor: ARAnchor) {
    guard let planeAnchor = anchor as? ARPlaneAnchor,
          let planeNode = node.childNodes.first,
          let plane = planeNode.geometry as? SCNPlane else { return }
    
    // Update the plane's dimensions
    plane.width = CGFloat(planeAnchor.extent.x)
    plane.height = CGFloat(planeAnchor.extent.z)
    
    // Update the position of the plane node
    planeNode.position = SCNVector3(planeAnchor.center.x, 0, planeAnchor.center.z)
}

Removing Plane Nodes

If a plane is no longer detected, you should also remove the corresponding node from the scene:

func renderer(_ renderer: SCNSceneRenderer, didRemove node: SCNNode, for anchor: ARAnchor) {
    // Remove the plane node
    node.childNodes.forEach { $0.removeFromParentNode() }
}

Conclusion

In this tutorial, we covered the basics of plane detection using ARKit in an iOS app. You learned how to set up your project, enable plane detection, and handle detected planes by adding, updating, and removing plane nodes. This knowledge will help you create more interactive and realistic AR experiences.