Tutorial: Generating 3D Text With RealityKit in a SwiftUI App

How to add 3D text in your Augmented Reality App

In this tutorial, we will be adding 3D Generated text meshes to a RealityKit scene.

Basic Setup

We will start off with the “Augmented Reality App” template on Xcode:

I’m using SwiftUI as the Interface, Swift as the Language, and RealityKit as the Content Technology:

You should now have the basic Augmented Reality App template code.

Generating 3D Text Mesh with RealityKit

We will be adding a function to our project that will be what is generating our ModelEntity of 3D Text. I will walk through each of the variables below, but here is the function to start:

Lets walk through each of the elements in the .generateText function:

ModelEntity

This textGen() function is returning a ModelEntity element. A ModelEntity represents a model which is rendered and simulated by RealityKit. The ModelEntity is what we will be adding to our AnchorEntity to be added to our ARView scene. A ModelEntity includes multiple variables, including a MeshResource and an array of Materials.

MeshResource

A MeshResource is the 3D mesh that is what the user will visually see in the Augmented Reality scene. RealityKit contains functions to generate a handful of meshes directly inside of RealityKit, including:

• Box
• Plane
• Sphere
• Text

In this tutorial, we are specifically using the .generateText() function to generate a text mesh.

Materials

A Material is what describes what the surface of a 3D mesh will look like, such as it’s color, shininess / roughness, and metallic qualities. In our project, we are using the SimpleMaterial with a color of white, a roughness of 0, and no metallicness.

depthVar

DepthVar controls how thick / deep our text mesh will be.

fontVar

fontVar controls which font size / style will be used to render our text.

containerFrameVar

containerFrameVar is the invisible rectangle our text will need to fit in from a horizontal and vertical perspective. You’ll notice in our project that the x value is a negative of half the width. Without this, the left side of our text would start at the origin point, and would look off-center. By adding a negative x value of half the container’s width, our text will appear centered on screen when added to our scene.

alignmentVar

alignmentVar controls the alignment of our text if we have multiple lines of text in AR space.

lineBreakModeVar

lineBreakModeVar controls how our text will line-break if we have multiple lines of text in AR space.

All together, this function creates our 3D Text mesh. Now we just need to add it to the ARView scene.

Adding the Text to the ARView Scene

We will modify the makeUIView function in our ARViewContainer struct to the below:

func makeUIView(context: Context) -> ARView {
        
        let arView = ARView(frame: .zero)        
        let textAnchor = AnchorEntity()
        textAnchor.addChild(textGen(textString: "Testing"))
        arView.scene.addAnchor(textAnchor)
       
        return arView
    }

Let me break this down line by line:

let arView = ARView(frame: .zero)

This is the basic ARView setup for our app.

let textAnchor = AnchorEntity()

This is creating an AnchorEntity that we will child our Text mesh to.

textAnchor.addChild(textGen(textString: “Testing”))

This is calling our textGen() function to generate a 3D text ModelEntity that says “Testing”, and adds that ModelEntity as a child to the textAnchor AnchorEntity.

arView.scene.addAnchor(textAnchor)

This is adding our textAnchor (which the 3D text ModelEntity is a child of) to the array of anchors in our ARView.Scene

Your ARViewContainer code should look something like this:

If you run your code on an iOS device, you should see the “Testing” text appear in 3D space in front of your camera!

I hope this is a helpful resource to get you started on generating 3D text in your projects!

The full repository for this project can be found here:

GitHub - coledennis/RealityKit_Text_Generation_Tutorial