How to use GIFs with ARKit (Tutorial)

I noticed that there was a distinct lack of tutorials for implementing GIFs with Apple’s ARKit platform. I think it’s because people are more interested in the 3D side of AR rather than the 2D side, but I believe 2D still has some interesting use cases. I also haven’t written in a while, let alone any sort of tutorial, so I figured now would be a good time to cross all of those off the checklist.

What’s the key to implementing GIFs in ARKit? Unfortunately, it’s not as simple as applying a GIF file as a material on a node because the animation won’t play. Luckily, someone’s created an extension for UIImage that you can simply add to your project in order to play GIFs.

Let’s start by creating a new project in Xcode. Some people prefer starting from a Single View App, but here we’ll create an Augmented Reality App. Make sure Content Technology is set to SceneKit.

If you start from the Augmented Reality template, info.plist will automatically have Privacy — Camera Usage Description filled out. This is important because all new ARKit projects require the user’s permission to use the phone’s camera. Now we need that UIImage extension. iOS Dev Centers created an awesome such an extension that plays well with ARKit over here https://github.com/kiritmodi2702/GIF-Swift/blob/master/GIF-Swift/iOSDevCenters%2BGIF.swift. I’ve created a gist of it; simply create a new Swift file (call it anything you wish) in your project and paste the code in there.

Next, find your GIF of choice and drag and drop it into your project (make sure it’s in the root folder and not the Assets.xcassets folder. When prompted, make sure that “Copy items as needed” is checked.

Now we’re set to do some coding. In viewDidLoad(), replace the default scene that all ARKit templates start with (the one called “art.scnassets/ship.scn”) with:

let scene = SCNScene()

Next, create a function called addGif() that takes in a string for the name of the GIF you added to your project and will return a SCNNode.

func addGIF(name: String) -> SCNNode {
  let gifNode = SCNNode()
 
  return gifNode
}

Because the function is expecting to return a SCNNode, we created a node called gifNode which we return at the end of the function. Now we’ll apply our GIF to it with the help of the UIImage extension we imported earlier.

func addGIF(name: String) -> SCNNode {
  let gifNode = SCNNode()
  let gifPlane = SCNPlane(width: 1, height: 1)  
  let gifImage = UIImage.gifImageWithName(name)
  let gifImageView = UIImageView(image: gifImage)    
  gifPlane.firstMaterial?.diffuse.contents = gifImageView
  gifNode.geometry = gifPlane
  gifNode.position = SCNVector3(0, 0, -1)
  
  return gifNode
}

What’s happening here? Firstly, we’re creating a SCNPlane with a width and a height of 1 meter (ARKit uses meters). Next, we’re creating a UIImage with the name of our GIF, which is then supplied to gifImageView. We then apply gifImageView as a material to gifPlane. In turn, we assign gifNode’s geometry to be that of gifPlane. Lastly, we position it -1 on the Z axis, i.e. 1 meter away from where we first open our app. ARKit axes is beyond the scope of this tutorial — I recommend reading this for a better idea of how it works (https://www.raywenderlich.com/378-augmented-reality-and-arkit-tutorial).

We need to do one more thing before we can see our GIF in action. We need to call it in our viewDidLoad() method.

override func viewDidLoad() {
  super.viewDidLoad()
  . . .
  sceneView.scene = scene
  sceneView.scene.rootNode.addChildNode(addGIF(name: "giraffe"))
}

Compile your code and run your app. Awesome! You’ve just created your first ARKit app with GIFs (hopefully!). Feel free to check out the finished code here.

Medium source (link)