Introduction to ARKit
Add to favorites
Adding a virtual object into the real world using your device’s camera
Play video
![icon](http://images.ctfassets.net/ooa29xqb8tix/4bWEQMRsA6PzjiHljsxryp/55d78d84da072e9c22caddbccd67396b/swift-logo.png?w=400&q=50)
Build an ARKit 2 App
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.
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.
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.
Templates and source code
Download source files
Download the videos and assets to refer and learn offline without interuption.
Design template
Source code for all sections
Video files, ePub and subtitles
ePub
Assets
Videos
Subtitles
1
Introduction to ARKit
Adding a virtual object into the real world using your device’s camera
10:27
2
SceneKit Scene Editor
Building a 3D stage for your AR experience
23:01
3
Importing 3D Models
Integrating your own designs into real life
18:57
4
Configuration for ARKit
Behind the scene of your AR project
12:43
5
Plane Detection
Searching for real world surfaces
25:57
6
Focus Square
Choosing your preferred spot in placing your virtual objects
29:38
7
Adding Models to the Scene
Displaying 3D contents in your environment
31:36
8
Image Detection
How to create an illusion by scanning an image
21:25
9
Animation and Lighting
Making an illusion realistic
13:20
10
Buttons and Interactions
Trigger an action with a button
16:04
11
Multiple Screens
Create grid based layout
30:09
Meet the instructor
We all try to be consistent with our way of teaching step-by-step, providing source files and prioritizing design in our courses.
Dara To
Full-stack Developer
I'm a former financial analyst turned coder. Vegetarian, health-centered, dog owner.
5 courses - 25 hours
![course logo](http://images.ctfassets.net/ooa29xqb8tix/4bWEQMRsA6PzjiHljsxryp/55d78d84da072e9c22caddbccd67396b/swift-logo.png?w=400&q=50?fm=jpg&q=50)
UI and Animations in SwiftUI
Level up your UI and animation skills by implementing various applications from custom designs in SwiftUI
4 hrs
![course logo](http://images.ctfassets.net/ooa29xqb8tix/4bWEQMRsA6PzjiHljsxryp/55d78d84da072e9c22caddbccd67396b/swift-logo.png?w=400&q=50?fm=jpg&q=50)
Build an Expense Tracker App in SwiftUI
Design and code a SwiftUI 3 app in Xcode 13 with data modeling, data networking, Combine, MVVM and libraries for custom icons and charts.
3 hrs
![course logo](http://images.ctfassets.net/ooa29xqb8tix/628IYmTv4uib8slYz9iuok/3de9010de04ae92a23c94f9885746db2/swift-logo.png?w=400&q=50?fm=jpg&q=50)
Build Quick Apps with SwiftUI
Apply your Swift and SwiftUI knowledge by building real, quick and various applications from scratch
11 hrs
![course logo](http://images.ctfassets.net/ooa29xqb8tix/1bYdUtniEAUH3jdqQd3Qc1/7cf21d20882bfe59f01d7bc74e81010d/react-logo.png?w=400&q=50?fm=jpg&q=50)
Advanced React Hooks Handbook
An extensive series of tutorials covering advanced topics related to React hooks, with a main focus on backend and logic to take your React skills to the next level
3 hrs
![course logo](http://images.ctfassets.net/ooa29xqb8tix/4bWEQMRsA6PzjiHljsxryp/55d78d84da072e9c22caddbccd67396b/swift-logo.png?w=400&q=50?fm=jpg&q=50)
Build an ARKit 2 App
Introduction to ARKit and learn how to make your own playground. You will be able to add models or even your own designs into the app and play with them
4 hrs