Building a Basic AR Experience with ARKit and RealityKit in iOS

Augmented Reality (AR) is transforming the way we interact with the world by overlaying digital content onto our physical environment.

With the advent of ARKit and RealityKit, Apple has provided developers with powerful tools to create immersive AR experiences on iOS devices. Whether you’re a seasoned developer or a curious beginner, this guide will walk you through building a basic AR experience step-by-step, explaining every line of code to ensure you understand the process. By the end of this tutorial, you’ll have created a simple AR app that places a 3D object in the real world, laying the groundwork for more complex AR projects.

Getting Started

Before diving into the code, ensure you have the following prerequisites:

• A Mac running macOS Mojave or later.

• Xcode 11 or later installed.

• An iOS device with an A9 chip or later (iPhone 6s or newer).

• Basic knowledge of Swift programming.

Step 1: Setting Up the Xcode Project

Open Xcode and create a new project:

• Select “File” > “New” > “Project…”

• Choose “App” under the iOS section and click “Next”.

• Enter your project name (e.g., “BasicARExperience”) and make sure “Swift” is selected as the language. Ensure “Storyboard” is not selected; we will use SwiftUI.

• Click “Next” and save your project to the desired location.

2. Configure your project:

• Select your project in the Project Navigator.

• Go to the “Signing & Capabilities” tab.

• Ensure your development team is selected to enable automatic signing.

Step 2: Importing ARKit and RealityKit

To build an AR experience, we need to import the ARKit and RealityKit frameworks. Open ContentView.swift and modify the import statements:

import SwiftUI
import ARKit
import RealityKit

Step 3: Setting Up the ARView

Replace the default ContentView struct with the following code to set up an ARView:

struct ContentView: View {
    var body: some View {
        ARViewContainer().edgesIgnoringSafeArea(.all)
    }
}

struct ARViewContainer: UIViewRepresentable {
    func makeUIView(context: Context) -> ARView {
        let arView = ARView(frame: .zero)
        
        // Configure AR session
        let config = ARWorldTrackingConfiguration()
        config.planeDetection = [.horizontal]
        arView.session.run(config)
        
        return arView
    }
    
    func updateUIView(_ uiView: ARView, context: Context) {}
}

Step 4: Adding a 3D Object

We will add a 3D object to the AR scene using RealityKit. First, create a new Reality File:

• Right-click on the project navigator and select “New File”.

• Choose “Reality File” under the “Resource” section.

• Name it “Experience” and click “Create”.

Next, open Experience.rcproject and add a 3D model:

• Click on the “+” button to add a new anchor and select “AR Object”.

• Import a 3D model by dragging and dropping it into the scene or using the “+” button.

Step 5: Loading the 3D Object in AR

Update the ARViewContainer to load the 3D object from the Reality File:

struct ARViewContainer: UIViewRepresentable {
    func makeUIView(context: Context) -> ARView {
        let arView = ARView(frame: .zero)
        
        // Configure AR session
        let config = ARWorldTrackingConfiguration()
        config.planeDetection = [.horizontal]
        arView.session.run(config)
        
        // Load the "Box" scene from the Reality File
        let boxAnchor = try! Experience.loadBox()
        arView.scene.anchors.append(boxAnchor)
        
        return arView
    }
    
    func updateUIView(_ uiView: ARView, context: Context) {}
}

Step 6: Running Your AR App

Connect your iOS device to your Mac, select your device as the run destination, and press the “Run” button in Xcode. Your AR app should launch on your device, and you should see the 3D object placed in the real world.

Conclusion

Congratulations! You’ve successfully built a basic AR experience using ARKit and RealityKit. This simple example lays the foundation for creating more complex AR applications. Experiment with different 3D models, animations, and interactions to enhance your AR projects. The possibilities are endless, and with ARKit and RealityKit, you’re well-equipped to bring your augmented reality ideas to life. Happy coding!

If you found this blog helpful or have any questions, feel free to reach out to me on social media:

• YouTube: ElAmir’s YouTube Channel
• Facebook: ElAmir’s Facebook Page
• LinkedIn: Connect with ElAmir on LinkedIn
• Twitter: Follow ElAmir on Twitter
• Udemy: ElAmir’s Udemy Profile