Image Recognition and Tracking Using ARKit-2

Provide your reference images

To provide images reference, we need to add them to our project asset catalog in Xcode.

• Open asset catalog in project, click left corner (+) or you can use right click to add new AR Resource folder group and rename as per your requirement.
• Drag the images from finder to newly created folder
• For all individual images we need to set dimensions using inspector.

Configuration image tracking

We need to create ARImageTrackingConfiguration, this will allow to track our reference images in the user’s environment. After that, create an instance of ARReferenceImage containing the reference of images from the AR Resource folder as per mine I have named it “iOSDept”. The property maximumNumberOfTrackedImages will set the maximum number of tracked images in given frame, default value is one.

func configureARImageTracking() {
        // Create a session configuration
        let configuration = ARImageTrackingConfiguration()
        if let imageTrackingReference = ARReferenceImage.referenceImages(inGroupNamed: "iOSDept", bundle: Bundle.main) {
            configuration.trackingImages = imageTrackingReference
            configuration.maximumNumberOfTrackedImages = 1
        } else {
            print("Error: Failed to get image tracking referencing image from bundle")
        }
        // Run the view's session
        sceneView.session.run(configuration, options: [.resetTracking, .removeExistingAnchors])
    }

Image Detection

Now we are going to update the method renderer(_:didAdd:for:) because anchor in this method is type of ARImageAnchor.

Casting down ARAnchor to ARImageAnchor using if statement. The object imageAnchor contain the property of reference images which we have placed in an asset catalog under “iOSDept” folder. SCNPlane is set of action, animating fadeIn and fadeOut

func renderer(_ renderer: SCNSceneRenderer, didAdd node: SCNNode, for anchor: ARAnchor) {
        /// Casting down ARAnchor to `ARImageAnchor`.
        if let imageAnchor =  anchor as? ARImageAnchor {
            let imageSize = imageAnchor.referenceImage.physicalSize

            let plane = SCNPlane(width: CGFloat(imageSize.width), height: CGFloat(imageSize.height))
            plane.firstMaterial?.diffuse.contentsTransform = SCNMatrix4Translate(SCNMatrix4MakeScale(1, -1, 1), 0, 1, 0)

            let imageHightingAnimationNode = SCNNode(geometry: plane)
            imageHightingAnimationNode.eulerAngles.x = -.pi / 2
            imageHightingAnimationNode.opacity = 0.25
            node.addChildNode(imageHightingAnimationNode)
       } else {
            print("Error: Failed to get ARImageAnchor")
       }
}

Load and animate Spritekit scene

Here I’ve used SpriteKitScene named “About” and initializing the object of it. Make sure the property isPaused should be false for the animating containing node in it. To load SKScene in user environment, we need to create an object of SCNPlane which contains firstMaterial property and its sub properties. Thus pass the object aboutSpriteKitScene to aboutUsPlane.firstMaterial?.diffuse.contents to load the SpriteKitScene in real world.

Animating the SKNode are pretty simple just use SKAction and their methods.

// About
                let aboutSpriteKitScene = SKScene(fileNamed: "About")
                aboutSpriteKitScene?.isPaused = false
                
                let aboutUsPlane = SCNPlane(width: CGFloat(imageSize.width * 1.5), height: CGFloat(imageSize.height * 1.2))
                aboutUsPlane.firstMaterial?.diffuse.contents = aboutSpriteKitScene
                aboutUsPlane.firstMaterial?.diffuse.contentsTransform = SCNMatrix4Translate(SCNMatrix4MakeScale(1, -1, 1), 0, 1, 0)
                
                let aboutUsNode = SCNNode(geometry: aboutUsPlane)
                aboutUsNode.geometry?.firstMaterial?.isDoubleSided = true
                aboutUsNode.eulerAngles.x = -.pi / 2
                aboutUsNode.position = SCNVector3Zero
                node.addChildNode(aboutUsNode)
                
                let moveAction = SCNAction.move(by: SCNVector3(0.25, 0, 0), duration: 0.8)
                aboutUsNode.runAction(moveAction, completionHandler: {
                    let titleNode = aboutSpriteKitScene?.childNode(withName: "TitleNode")
                    titleNode?.run(SKAction.moveTo(y: 90, duration: 1.0))
                    
                    let name = aboutSpriteKitScene?.childNode(withName: "DescriptionNode")
                    name?.run(SKAction.moveTo(y: -30, duration: 1.0))
})

Load and animate 3D Model on reference image

Loading and animating 3D Model on reference image is simple. Place your 3D model arts.scnassets folder containing texture images. Create an object of SCNScene using the 3D model name and use the firstNode property to set angles, scale and their other respective properties as per requirement. Last add the object of firstNode to the did add node method.

// Logo Related
let logoScene = SCNScene(named: "art.scnassets/Yudiz_3D_Logo.dae")!
let logoNode = logoScene.rootNode.childNodes.first!
logoNode.scale = SCNVector3(0.022, 0.022, 0.022)
logoNode.eulerAngles.x = -.pi / 2
logoNode.position = SCNVector3Zero
logoNode.position.z = 0.05
let rotationAction = SCNAction.rotateBy(x: 0, y: 0, z: 0.5, duration: 1)
let inifiniteAction = SCNAction.repeatForever(rotationAction)
logoNode.runAction(inifiniteAction)
node.addChildNode(logoNode)

Conclusion : –

I hope you like this article and also learned some valuable things from it. Feel free to share with your social network. For the more reference, you can download this project on Github. Also, I welcome your contribution in this project.