DEV Community

loading...

The Rise of Augmented Reality Apps

Galyna Chekan
Originally published at perfectial.com on ・4 min read

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. 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

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) {

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

    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 {

    let horizontalSurface = SCNNode(geometry: SCNPlane(

        width: CGFloat(planeAnchor.extent.x),

        height: CGFloat(planeAnchor.extent.z)))

    horizontalSurface.geometry?.firstMaterial?.diffuse.contents =

        UIColor.blue.withAlphaComponent(0.4)

    horizontalSurface.geometry?.firstMaterial?.isDoubleSided = true

    horizontalSurface.position = SCNVector3(

        planeAnchor.center.x,

        planeAnchor.center.y,

        planeAnchor.center.z)

    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) {

    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)

    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

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  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

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

if let pointOfView = sceneView.pointOfView {

    let orientation = SCNVector3(

       -pointOfView.transform.m31,

       -pointOfView.transform.m32,

       -pointOfView.transform.m33)

    let location = SCNVector3(

       pointOfView.transform.m41,

       pointOfView.transform.m42,

       pointOfView.transform.m43)

    return orientation + location

}

Perfectial Augmented Reality App

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 appeared first on Software Development Company Perfectial.

Discussion (1)

Collapse
teotcd profile image
JedDevs • Edited

👏👏Great post.
Certaibly peaked my interest in augmented reality development. Thank you.

I'd suggest you format your code as it smartens it up 👍.