How to Show Text in AR with Swift

With AR becoming a more prominent technology within our lives, it is essential to know how to use it, especially if you are a developer. However, many people believe that AR is something that is considered to be challenging to use or create. This tutorial is here to remedy that false belief of difficulty.

This tutorial will go step by step in how to create your very own AR scene! By the end of this tutorial, you will be able to see custom text show up as AR on your phone’s screen!

To start with this tutorial, you need to open up Xcode and create a new project. Remember that when creating the new project, in the template chooser you must select Augmented Reality App.

The reason we chose to create an augmented reality app versus a single view app is that an augmented reality app automatically creates the storyboard and also gives us some starter code. Now, all we need to do is change up some of the code to create our final AR project!

When you open up the ViewController.swift file in your new Xcode project, you should see this code in your viewDidLoad function. Furthermore, you should have an outlet for an ARSCNView! and a total of three import statements, importing UIKit, SceneKit, and ARKit.

For us to create our text AR, we need to replace the last three lines in the viewDidLoad function with our code.

First, you need to delete the last three lines of the function.

//Get rid of these lines
sceneView.showsStatistics = true
let scene = SCNScene(named: "art.scnassets/ship.scn")!
sceneView.scene = scene

After deleting those three lines, we can start adding our code to achieve our desired result. First, let’s create the text and give it some color. To do this, we need to add this code

let text = SCNText(string: "My First AR Application!", extrusionDepth: 2)
let material = SCNMaterial()                     material.diffuse.contents = UIColor.magenta             text.materials = [material]

The first section of this code will merely create a SCNText object.

The second section of this code creates a new material that gets added to the text object. This material is almost like a “wrap” that goes around the text, and we have told the computer that the wrap needs to be magenta. The final line tells the computer to add the new wrap to our text object.

Next, we will create a new node. To do this we need to add this code:

let node = SCNNode()                                     node.position = SCNVector3(x:0, y:0.02, z:-0.1)             node.scale = SCNVector3(x:0.01, y:0.01, z:0.01)          node.geometry = text

Here we are creating a new node, telling the computer where to put this node, and how to scale it. Then we are setting the node’s geometry (shape of the node) equal to the text.

Finally, we add the node to our scene and add shadows to our node

sceneView.scene.rootNode.addChildNode(node)
sceneView.autoenablesDefaultLighting = true

The first line of code is adding a new child node to the sceneView. The node we are adding is the node we created with the text object beforehand. Then we tell the sceneView, and we want default lighting. Which means we want shadows.

Your code should like this:

Now we just need to compile and run it on an iPhone.

Notes

This program will only run on an iPhone or iPad that supports AR. Phones that support AR are iPhone 6s, iPhone 7, iPhone 8, iPhone X, iPhone SE, iPad Pro 1st & 2nd gen.