Image Recognition and Tracking Using ARKit-2


Hello Everyone, Hope you doing well and Having a nice day. In this article, we are going to focus on Image Recognition and Tracking using ARKit 2. At WWDC 2018, Apple announced lots of features in ARKit 2 and much improved known 2D images detection in the user’s environment with using their positions to place an AR content.

Following video will give a brief idea about today’s article.


Before any implementation, We need to take care of below requirements

  • Xcode 10 (beta or above)
  • iOS 12 (beta or above)
  • iPhone 6S or above iDevice.

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.

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

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.

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.

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.


Kevin Shah iOS Developer

I am Kevin Shah, iOS Developer at Yudiz Solutions Pvt. Ltd. - a leading iPhone App development company. Continuously discover, evaluate and implement new technologies to maximize development efficiency.

Comments are closed.