Building an AR App for iOS Using ARKit – Guide for Beginners Tutorial

Augmented Reality (AR) has become a groundbreaking technology, blending digital objects with the real world. If you’re looking to create immersive experiences for iOS, ARKit, Apple’s AR development framework, is a great tool to start with. In this beginner’s tutorial, you’ll learn step-by-step how to build a simple AR app using ARKit.

---

Step 1: What is ARKit?

Before we begin, let’s quickly understand what ARKit is:

• ARKit is a framework provided by Apple that allows developers to create augmented reality experiences for iOS devices. It uses the device’s sensors (like the camera and motion sensors) to detect the environment, track movement, and place 3D objects in the real world.

---

Step 2: Setting Up Your Development Environment

To get started, you need to have the right tools in place. ARKit development requires Xcode and a physical iOS device (ARKit does not work in the simulator).

2.1 Install Xcode

Xcode is Apple’s integrated development environment (IDE) used for iOS development.

• Download Xcode: Go to the Mac App Store and download the latest version of Xcode. You will need macOS to use Xcode.

2.2 Set Up an iOS Device

To test ARKit, you will need an iOS device (iPhone or iPad) that supports ARKit (any device running iOS 11 or later, and an A9 chip or higher).

• Connect your iPhone/iPad to your Mac. Make sure your device is updated to the latest iOS version.

---

Step 3: Creating a New ARKit Project in Xcode

Once you have Xcode installed, you’re ready to create your ARKit project.

3.1 Open Xcode and Create a New Project

• Open Xcode, and from the welcome screen, click “Create a new Xcode project.”
• Under the iOS tab, select Augmented Reality App and click Next.

3.2 Configure Your Project

• Product Name: Enter the name of your app (e.g., “MyFirstARApp”).
• Team: Choose your Apple developer team or set up a free account for testing.
• Language: Choose Swift.
• Content Technology: Choose SceneKit (for 3D objects), but ARKit also supports SpriteKit and Metal.
• Click Next, choose a location for the project, and create the project.

---

Step 4: Understanding ARKit Basics

In your new project, you’ll see some pre-generated code. Let’s break down the key components:

• ARSCNView: This is the view where AR content is displayed. It combines ARKit tracking with SceneKit rendering to display 3D content in the real world.
• ARSession: This is the engine behind ARKit, which manages the device’s motion tracking and scene processing.
• SCNNode: These are the building blocks for objects in SceneKit. A node is where you add 3D geometry or visual elements.

---

Step 5: Building Your First AR App

Let’s add some 3D content to the real world by following these steps.

5.1 Import ARKit and SceneKit Frameworks

Xcode already sets up a basic ARKit project for you, but make sure you import the required frameworks at the top of your ViewController.swift file.

swif
import ARKit
import SceneKit

5.2 Create an ARSession

An ARSession manages the device’s motion tracking. In the viewDidLoad() function, the session configuration is already started:

swift
override func viewDidLoad() {
 super.viewDidLoad()

 // Create a session configuration
 let configuration = ARWorldTrackingConfiguration()

 // Run the view's session
 sceneView.session.run(configuration)
}

5.3 Adding a 3D Object to the Scene

To add a 3D object, we will use SCNNode (a SceneKit node). You can either load a pre-existing 3D model or create a simple shape. Here’s how to add a basic 3D box:

1. In your viewDidLoad() function, create a 3D box:

swift
let box = SCNBox(width: 0.1, height: 0.1, length: 0.1, chamferRadius: 0)
let boxNode = SCNNode(geometry: box)
boxNode.position = SCNVector3(0, 0, -0.5) // Place 0.5 meters in front of the camera
sceneView.scene.rootNode.addChildNode(boxNode)

2. This code creates a simple cube and places it 0.5 meters in front of the camera.

5.4 Handling Taps to Place 3D Objects

Let’s improve the app by allowing the user to tap on the screen to place a 3D object at a detected surface.

1. In your viewDidLoad() function, add a tap gesture recognizer:

swift
let tapGesture = UITapGestureRecognizer(target: self, action: #selector(handleTap(_:)))
sceneView.addGestureRecognizer(tapGesture)

2. Create the handleTap function, which will place the object when the screen is tapped:

swift
@objc func handleTap(_ gestureRecognize: UIGestureRecognizer) {
 let tapLocation = gestureRecognize.location(in: sceneView)
 let hitTestResults = sceneView.hitTest(tapLocation, types: .existingPlaneUsingExtent)
 
 if let result = hitTestResults.first {
 let box = SCNBox(width: 0.1, height: 0.1, length: 0.1, chamferRadius: 0)
 let boxNode = SCNNode(geometry: box)
 boxNode.position = SCNVector3(result.worldTransform.columns.3.x,
 result.worldTransform.columns.3.y,
 result.worldTransform.columns.3.z)
 sceneView.scene.rootNode.addChildNode(boxNode)
 }
}

This function performs a hit test to detect if the user tapped on a recognized plane and places a 3D box at that position.

---

Step 6: Testing Your AR App

After adding the 3D object logic, it’s time to test your app on a real iOS device.

6.1 Connect Your iOS Device

• Connect your iPhone or iPad to your Mac.
• Select your device from the top of Xcode’s target device list.

6.2 Run the App

• Press Cmd + R or click the Run button in Xcode to build and run the app on your device.
• Point your device at a flat surface, and tap to place 3D boxes in the real world!

---

Step 7: Adding Realism to Your AR Objects

You can enhance your AR experience by adding shadows, lighting, or using more complex 3D models.

7.1 Adding Lighting

You can add lighting to make your 3D object appear more realistic. Add this code in your viewDidLoad() function to set up a light:

swift
let light = SCNLight()
light.type = .omni
let lightNode = SCNNode()
lightNode.light = light
lightNode.position = SCNVector3(0, 10, 10)
sceneView.scene.rootNode.addChildNode(lightNode)

---

Step 8: Deploying Your AR App

Once you’re satisfied with your AR app, you can deploy it for public use.

8.1 App Store Deployment

To publish your app to the App Store:

• Create an Apple Developer account.
• Set up App Store Connect and follow the guidelines to submit your app for review.