Augmented Reality Apps of ARKit (A Practical Guide)

View: 267    Dowload: 0   Comment: 0   Post by: admin   Category: iPhone OS   Fields: Other

A practical guide to business applications for augmented reality


This is a practical guide to business applications for augmented reality. The article focuses on three main aspects: how to place objects on planes, how to perform a 3D painting and how to implement objects in the surrounded area.

Background - What the ARKit is?

ARKit was presented by Apple in 2017. It’s an augmented reality framework aiming to simplify the creation of ARapplications. The ARKit enables users to blend 2D/3D digital objects and information with the real world by taking applications far beyond the screen and freeing them to interact with the environment around you in entirely new ways. With the latest updates which are available in iOS11.3, the app can see, identify and place virtual objects on the vertical surfaces. All these features made applications of ARKit truly endless for business in many industries, especially: gaming, commerce, architecture and education.

Use of ARKit 1: Objects on Planes

Probably one of the most known applications using the ARKit framework is the “IKEA Place” where users can choose and virtually 'place' IKEA products in the surrounded area. Well, we’d like to show you how it was developed.

Let’s start with the basics – making a 3D model for ARKit. First of all, we need an actual 3D model we can use. Thankfully, it can easily be rendered with Blender or any other 3D modeling software. Just make sure it supports the .DAE extension. (You may use a little hint: 2D graphics for AR is supported by SpriteKit, 3D – by SceneKit).

So we need the .SCN SceneKit file with 3D model. The .DAE file should be converted to the .SCN format in Xcode. To perform this action, select the Editor menu and click Convert to SceneKit scene file format (.scn).

The next step is to determine horizontal planes to put your 3D objects. You need to determine a delegate for your ARSCNView: the view where the augmented reality will be rendered. Then implement delegate methods didAdddidUpdate and didRemove. Below, you can see an example of the didAdd method:

func renderer(_ renderer: SCNSceneRenderer, didAdd node: SCNNode, for anchor: ARAnchor) {
    guard let planeAnchor = anchor as? ARPlaneAnchor else { return }
    node.addChildNode(horizontalSurface(planeAnchor: planeAnchor))

You need to be sure that a plane anchor has been added, not another anchor (use the guard statement). Now, let’s see the method horizontalSurface used in the code above:

func horizontalSurface(planeAnchor: ARPlaneAnchor) -> SCNNode {
    let horizontalSurface = SCNNode(geometry: SCNPlane(
        width: CGFloat(planeAnchor.extent.x),
        height: CGFloat(planeAnchor.extent.z)))
    horizontalSurface.geometry?.firstMaterial?.diffuse.contents =
    horizontalSurface.geometry?.firstMaterial?.isDoubleSided = true
    horizontalSurface.position = SCNVector3(
    horizontalSurface.eulerAngles = SCNVector3(90.0.degreesToRadians, 0, 0)
return horizontalSurface

Thanks to the blue “diffuse”, it is possible to see the planes in a real life (if the color isn’t defined, they will be transparent). When a user taps on the AR view, the new objects should appear. Now, for implementation, we need to handle user’s touches and add a gesture recognizer to ARSCNView . This is how the method that handles taps can be implemented:

@objc func handleTap(sender: UITapGestureRecognizer) {
    if let tappedSceneView = sender.view as? ARSCNView {
        let tapLocationInView = sender.location(in: tappedSceneView)
        let planeHitTest = tappedSceneView.hitTest(tapLocationInView,
            types: .existingPlaneUsingExtent)
        if !planeHitTest.isEmpty {
            addFurniture(hitTest: planeHitTest)

Inside the method addFurniture, the furniture will be added with the following code:

 if let furnitureNode = SCNScene(named:
    "art.scnassets/\(currentFurniture).scn")?.rootNode {
    let position = hitTest.first!.worldTransform.columns.3
    furnitureNode.position = SCNVector3(position.x, position.y, position.z)

Now with every tap on the screen, the user can place an object on the horizontal surface.

Use of ARKit 2: 3D Painting

There is one more creative thing to do with the ARKit – 3D painting. You can draw and place these objects in mid-air. And our first step is to create a 3D version of the Paint.

For beginners, we need to hang a small dot in the air whenever we touch the screen. The easiest and fastest way is to use willRenderScene (one of ARSCNViewDelegate methods):

let dotNode = SCNNode(geometry: SCNSphere(radius: this.dotRadius))
dotNode.position = currentPositionOfCamera
dotNode.geometry?.firstMaterial?.diffuse.contents = this.selectedColor()

And here is how to identify the current position of the camera:

if let pointOfView = sceneView.pointOfView {
    let orientation = SCNVector3(
    let location = SCNVector3(
    return orientation + location

We can even create a real-life 3D doodles. I guess, artists should love this feature!

Use of ARKit 3: Solar System in the Room

So, we already know how to place different objects on the planes and now it is time to learn how to move objects around. For this experiment, we are going to use a Solar system where eight planets are rotating around the sun and their axes with the Moon around the Earth.

First of all, we need to make objects (planets) to rotate around its axis:

earth.runAction(rotation(time: earthRotationAroundItselfTime))

And here’s what’s inside the rotation method:

func rotation(time: TimeInterval, degrees: CGFloat = 360.0) -> SCNAction {
    let onceRotation = SCNAction.rotateBy(
        x: 0,
        y: degreesToRadians(degrees),
        z: 0,
        duration: time)
return SCNAction.repeatForever(onceRotation)

For rotating object A around the object B, we need to add invisible object C with the same coordinates as B. This will make C rotating, but we need to do one more thing – to make the object A a child of C. See example below:

marsParent.position = sunPosition
mars.position = marsPosition

The ARKit applications are truly endless and go beyond games and fun.

Augmented Reality Apps of ARKit (A Practical Guide)

This is a practical guide to business applications for augmented reality. The article focuses on three main aspects: how to place objects on planes, how to perform a 3D painting and how to implement objects in the surrounded area.

Posted on 27-02-2018 


To comment you must be logged in members.

Files with category

File suggestion for you
File top downloads
Codetitle - library source code to share, download the file to the community
Copyright © 2018. All rights reserved. codetitle Develope by Vinagon .Ltd