The Rise of Augmented Reality Apps
Tags: rd, ar, atkit
Published: 2018-02-05 10:25:41

---
title: "The Rise of Augmented Reality Apps"
published: true
tags: R&D, AR, ATKit
canonical_url: https://perfectial.com/blog/a-practical-guide-to-business-applications-of-arkit/
---

It all started in 2017 when Apple introduced its latest augmented reality framework – ARKit. The main objective was obviously to simplify the creation of AR applications which sought to enable users to interact with the real world with 2D/3D objects rendered on the screen of iOS devices (available with Apple A9 or newer processors). The applications of ARKit are truly endless – from simply having fun to actually aiding educational process and solving everyday problems for millions of people worldwide. But, let’s not rush into it. We’ll go slow with some basic stuff.

## Business Application for ARKit #1: Objects on Planes

Since the release of ARKit, many great apps were published, but, probably the one that made the most buzz was the [IKEA Place](https://itunes.apple.com/us/app/ikea-place/id1279244498?mt=8). Well, we’d like to show you how it was made.

Let’s go with the basics – making a 3D model for ARKit. Before we proceed with the app, we need an actual 3D model we can use. Thankfully, it can easily be rendered with Blender or any other 3D modeling software of your choice. Just make sure it supports the .DAE extension.

_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. In order to perform this action, select the **_Editor_** menu and click **_Convert to SceneKit scene file format (.scn)_**. ![Perfectial R&D Augmented Reality Render](https://perfectial.com/wp-content/uploads/2018/01/Perfectial-R-and-D-blog-render.png)

The next step is to determine horizontal planes where 3D objects can be put. Determine a delegate for your **ARSCNView** : the view where the augmented reality will be rendered. Then implement delegate methods **didAdd** , **didUpdate** and **didRemove**.

Below is an example of the method **didAdd** :

func renderer(\_ renderer: SCNSceneRenderer, didAdd node: SCNNode, for anchor: ARAnchor) {

&nbsp; &nbsp; guard let planeAnchor = anchor as? ARPlaneAnchor else { return }

&nbsp; &nbsp; node.addChildNode(horizontalSurface(planeAnchor: planeAnchor))

}

Make sure that a plane anchor has been added, not another anchor. This is why we use the guard statement. Now, let’s see the method **horizontalSurface** used in the code above:

func horizontalSurface(planeAnchor: ARPlaneAnchor) -\> SCNNode {

&nbsp; &nbsp; let horizontalSurface = SCNNode(geometry: SCNPlane(

&nbsp; &nbsp; &nbsp; &nbsp; width: CGFloat(planeAnchor.extent.x),

&nbsp; &nbsp; &nbsp; &nbsp; height: CGFloat(planeAnchor.extent.z)))

&nbsp; &nbsp; horizontalSurface.geometry?.firstMaterial?.diffuse.contents =

&nbsp; &nbsp; &nbsp; &nbsp; UIColor.blue.withAlphaComponent(0.4)

&nbsp; &nbsp; horizontalSurface.geometry?.firstMaterial?.isDoubleSided = true

&nbsp; &nbsp; horizontalSurface.position = SCNVector3(

&nbsp; &nbsp; &nbsp; &nbsp; planeAnchor.center.x,

&nbsp; &nbsp; &nbsp; &nbsp; planeAnchor.center.y,

&nbsp; &nbsp; &nbsp; &nbsp; planeAnchor.center.z)

&nbsp; &nbsp; horizontalSurface.eulerAngles = SCNVector3(90.0.degreesToRadians, 0, 0)

return horizontalSurface

}

The blue “diffuse” makes it possible to see the planes in real life. If the color isn’t defined, they will be transparent, thus you won’t be able to see them.

When a user taps on the AR view, it is expected for a new object to appear. In our case, it’s a 3D model of a mug. To implement it, we need to add a gesture recognizer to **ARSCNView** and handle user’s touches. This is how the method that handles taps can be implemented:

@objc func handleTap(sender: UITapGestureRecognizer) {

&nbsp; &nbsp; if let tappedSceneView = sender.view as? ARSCNView {

&nbsp; &nbsp; &nbsp; &nbsp; let tapLocationInView = sender.location(in: tappedSceneView)

&nbsp; &nbsp; &nbsp; &nbsp; let planeHitTest = tappedSceneView.hitTest(tapLocationInView,

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; types: .existingPlaneUsingExtent)

&nbsp; &nbsp; &nbsp; &nbsp; if !planeHitTest.isEmpty {

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; addFurniture(hitTest: planeHitTest)

&nbsp; &nbsp; &nbsp; &nbsp; }

&nbsp; &nbsp; }

}

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

if let furnitureNode = SCNScene(named:

&nbsp; &nbsp; “art.scnassets/\(currentFurniture).scn”)?.rootNode {

&nbsp; &nbsp; let position = hitTest.first!.worldTransform.columns.3

&nbsp; &nbsp; furnitureNode.position = SCNVector3(position.x, position.y, position.z)

&nbsp; &nbsp; sceneView.scene.rootNode.addChildNode(furnitureNode)

}

Now with every tap on the screen a user can place an object on the horizontal surface. Cool? You bet. But wait till you see what else we have for you up our sleeves.

![Perfectial R&D Blog - Cup Placed on Surface](https://perfectial.com/wp-content/uploads/2018/01/Perfectial-RnD-Cup-Rendered.png)

## Business Application for ARKit #2: 3D Paint – Get Creative with Your Surroundings

Having objects placed on horizontal surfaces is not the only thing we can do with &nbsp;ARKit. We can also hang them in mid air. But, I’d like to go a little further with this one. Let’s create a 3D version of Paint.

For starters we have to hang a small node like a dot in the air whenever we touch a screen. The best way to achieve this 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()

this.sceneView.scene.rootNode.addChildNode(dotNode)

![Perfectial Augmented Reality Draw Flower in 3D](https://perfectial.com/wp-content/uploads/2018/01/ar2.gif)

But, how to figure the current position of the camera? Voila:

if let pointOfView = sceneView.pointOfView {

&nbsp; &nbsp; let orientation = SCNVector3(

&nbsp; &nbsp;&nbsp; &nbsp; -pointOfView.transform.m31,

&nbsp; &nbsp;&nbsp; &nbsp; -pointOfView.transform.m32,

&nbsp; &nbsp;&nbsp; &nbsp; -pointOfView.transform.m33)

&nbsp; &nbsp; let location = SCNVector3(

&nbsp; &nbsp;&nbsp; &nbsp; pointOfView.transform.m41,

&nbsp; &nbsp;&nbsp; &nbsp; pointOfView.transform.m42,

&nbsp; &nbsp;&nbsp; &nbsp; pointOfView.transform.m43)

&nbsp; &nbsp; return orientation + location

}

![Perfectial Augmented Reality App](https://perfectial.com/wp-content/uploads/2018/01/ar3.gif)

And the best part – we can actually create real-life 3D doodles. Artists should love this. Now, let’s move on to the next one.


The post [The Rise of Augmented Reality Apps. A Practical Guide to Business Applications of ARKit](https://perfectial.com/blog/a-practical-guide-to-business-applications-of-arkit/) appeared first on [Software Development Company Perfectial](https://perfectial.com).