The ABC’s of ARKit

An Introduction

Augmented Reality, Medium writers — Image credit: https://www.blippar.com/uploads/images/_flexL/2535/Augmented-reality-cars-Future-of-the-automotive-industry-Blippar-1.jpg

Background

A few years ago, at WWDC 2017, Apple announced ARKit for iOS 11. It’s a wonderful framework for building augmented reality apps. Since then we’ve seen a lot of great uses of technology from developers all around the globe. From gaming to creative, humorous to utility, there are a lot of use cases where augmented reality fits in. These applications were amazing and I quickly wound up pondering all the cool applications that were conceivable with this tech.

Here I’m going to describe how to develop a basic AR-enabled app by placing objects around the physical environment by simply tapping on the screen. This a very simple thing when compared with what can we achieve with ARKit, but this tutorial should give everyone that wants to play with AR a head start.

Sounds cool? Then let’s start! 😃

Technical requirements

· iOS 11.3 or higher (ARKit 1.5+)

· Xcode 9.3 or higher

· Swift 4 or higher

· Physical device (iPhone / iPad) with iOS 11.3 (or higher)

Project Setup

First, open Xcode and choose ‘Create a new Xcode project’ to get started with an empty project.

Then, select ‘Augmented Reality App’ to start with a basic AR setup. This already has some code, as well as some, pre-sets that we can take a look at and start playing around.

Then you can put a name to your project, mine’s going to be TouchAR

As you can see there’s something called ‘Content Technology’. If you click the dropdown you can see there are 3 items as SceneKit, SpriteKit, and Metal. SpriteKit is a framework designed for 2D animations on a simpler scale think lower-level 2D animations in more efficient apps that don’t require a lot of battery power to run, like Candy Crush or Angry Birds 🐦 SceneKit is the more high-performance option of the two, based on the Core Animation framework and it requires a good bit of math and geometry to use. Think 3D games that have multiple camera angles, like Fruit Ninja 🥝 Metal is an API that is close to GPU and is meant to replace OpenGL for console-level games 🎖 So, we are going to go ahead with SceneKit and create the project.

Project structure and Pre-sets

Here’s how your project structure looks like,

Let’s jump into the ViewController.swift file,

In the viewdidload method, you set the scene and you load it up

In the viewWillAppear method is where the interesting this happens 😆

What this does is when you build and run the app, it will take the position of your phone and build the landscape or the scene around it.

and here it saves your position as your current position and you’re able to look around as you’re walking.

Awesome,

Now if you check your art.acnassets folder you can see a plane. ✈️

This is the scene that we are building, Now let’s take a look at the Transforms on the right side,

Here, the X value is the horizontal position, Y is the vertical position and Z is the distance to the object from the user holding the device.

You can modify the look and feel of this item by visiting the Material section on the right panel,

Cool. Now if you want you can run this on your physical device so you can have a better idea about the positioning and these objects. Mine looks like this.

Alright, Let’s do some coding. 💻

First, we are going to create a method to grab our touch position, we are not only going to grab the position of the touch but detect the objects further away.

Inside this method write,

Here what we are doing is making sure a touch happens or else we are going to skip rest of the stuff.

Then we need to grab the position of the touch,

This is basically going to return an array of ARHitTestResults. So we are going to grab the last one of those results.

Then we are going to grab the transform of it and then we will transfer it to a scene vector 3.

Here we are going to grab x,y and z results from the scene matrix so we can create our object accordingly,

So here you will probably get an optional value, in order to change it I will do,

Marvelous, Let’s jump into a new method call createObj to create a 3d object when we touch. 🎈

First, we are going to create a shape, lets put 0.01 since we don’t need the object to be so big

Then we will create a node

Then we are going to position it

And then we are going to add it to our node

Awesome, Now let’s call this method at the end of the touch function by passing the touch position,

Perfect, We are almost done. Now let’s Build and Run the app in the physical device and see how it looks like. Touch

What do you think about the plane? 🛩 Feel like you need to get rid of it?

You know where to go right? Just select and hit delete and then we are good to go.

So, I hope you enjoyed playing around with ARKit, Keep in mind that this is just the very basic thing that we just did. So if you were able to develop anything new using the ARKit, feel free to share it with me. 😃

Where to go from here?

I would recommend this article from Michael Katz at https://www.raywenderlich.com

Also here you can find plenty of good resources about ARKit and Augmented Reality.

Hope you enjoy the article. Please leave your thoughts on comments below.

Thanks for reading 💛

References

ARKit - Apple Developer

http://www.lynda.com/iOS-tutorials/Learning-ARKit-Developers/697725-2.html

Introduction to Augmented Reality with ARKit - Michael Ridland

Tag: ARkit