Design+Code logo

Quick links

Suggested search

To follow this tutorial, you will need Xcode 10.

Augmented Reality

Augmented Reality defines the user experience that integrate virtual elements, whether in 2D or 3D, into the real world environment through the device's camera. It allows the users to interact digital objects or characters with their own surrounding to create a unique experience.

What is ARKit?

ARKit is the framework from Apple that handles the processing to built Augmented Reality apps and games for iOS devices. It is a high-level API supplying numerous and powerful features making a magical world come to life.

Augmented Reality Apps

AR apps are taking the world by storm, already reaching a multi-billion dollar market. You can find AR apps for all kinds of purposes, ranging from utilities, shopping, educational, social media to gaming, all with an extra splash of fun.

Below are the most known augmented reality apps, just to show you what it can do.

Pokemon Go

Pokemon Go: This game app was raging back in 2016! Pokemon characters appear in real world when you walk around. If you hunt one down, you can catch it by throwing a pokeball at it, then raise them to be stronger. Friends can gather at a place together to play so it's great for socializing and it is fun. On top of that, local businesses can market their shop to attract players. Clever!

Ikea Place

Ikea Place: Ikea's app allows the user to shop for 3D virtual furniture and place them within your space. Preview it first-hand how it fits in your room before buying it, quite an advantage I must say. It can save one time and trouble.

So here in the newly renovated basement, it looks quite empty. This space needs a couch! So let’s search for one. I like sectionals so I’m gonna select that category. I think the grey one would look nice here. Let’s try it. Now we are detecting the floor. Once it’s done, the couch just pops out on my screen. All I have to do now is to position it properly in my room and see if it fits well.

Snapchat

Snapchat: This social media app is known for its entertaining camera filters. Either adding animal parts to your face or swapping faces with another person, you can’t help but laugh at that. Then you snap a picture or short video and share it to your friends. Although Snapchat has been a step ahead with augmented reality using another technology to place digital features onto the real face, it now blends with new ARKit tool to enhance face tracking thanks to the TrueDepth camera of the iPhone X. Who needs makeup anymore with Snapchat?

Layers of ARKit

ARKit can be divided into 3 layers. Those layers works together simultaneously. 3Layers

Tracking

Tracking is the key function of ARKit. It allows us to track a device’s position, location and orientation in the real world and live.

Scene understanding

Understanding the scene means that ARKit analyzes the environment presented by the camera’s view, then adjust the scene or provide information on it. This is what enables the detection of all the surfaces in the physical world such as the floor or a flat surface. Then, it will allow us to place a virtual object on it. Also, the light estimation can be integrated to lit a virtual object simulating a light source in the physical world.

Rendering

ARKit uses technologies to handle the processing of the 3D models and present them in your scene such as:

  • Metal
  • SceneKit
  • Third party tools like Unity or Unreal Engine

Pre-requisite

To experience augmented reality, ARKit requires minimally A-9 processor hardware and iOS 11 software, and additionally a real camera. For this reason, you cannot simulate your project with Xcode Simulator. You would have to make use of one of the following Apple devices:

  • iPhone SE, iPhone 6s and later
  • iPad 2017 and later
  • All iPad Pro models

Although you can simulate to your device wirelessly, I would recommend connecting it to your computer for faster processing. Therefore, you would need a charging cable and an adaptor, if you have newer versions of MacBooks.

ARKit Template

Let’s open Xcode, a small window will pop up with three different options, choose Create a new Xcode project. Xcode gives us different templates to start our project. Make sure you select iOS as the platform, then choose the Augmented Reality App template and hit Next. On the following window in the field Product Name, let’s name our project DesignCodeARKit. As the Team, I’m selecting my developer team. If not, use your personal team. However, you will only be able to run a maximum of 3 projects at a time. The Organization Name is the name of your company and the Organization Identifier is your domain name but in reverse. If you’re not part of any company, write something that is unique such as your name. Use Swift as the Language and SceneKit as the Content technology. Finally hit Next. Then, choose the folder where you would like to save your project. As for me, it’s on my Desktop. Click on Create. Congratulations! You created your first AR app!

Interface

This is the first screen after you just created a new project. The first panel from the left is the Project Navigator, in which all the files of your project are shown. In the middle, it is the Project Editor where you can manage the project. At the complete right, it is the Inspectors, where you can change the settings of the project.

Interface

Preview of Template

Let’s run the app on your phone to see what the template is about! To do so, you need to first connect your device to your computer, change the Active scheme to your device on the top-left of the screen. Then, click on the Play button. The first time you run the app, it’s gonna ask you if it can access your camera. You would need to allow to view on screen what the camera sees and continue with the ARKit project

Conclusion

We’ve just been initiated to AR. We learned what is ARKit and how versatile it is. You can build really cool apps with this framework. I hope you are excited to go on with this course to learn how to create one yourself.

READ NEXT

SceneKit Scene Editor

Templates and source code

Download source files

Download the videos and assets to refer and learn offline without interuption.

check

Design template

check

Source code for all sections

check

Video files, ePub and subtitles

ePub

Assets

Videos

Subtitles