Importing 3D Models for ARKit

Published in

BPXL Craft

8 min readDec 13, 2017

ARKit is the hot new technology in iOS 11 that lets you view and interact with virtual objects in real space.

It’s not hard to get an ARKit project up and running, but getting your 3D art into it can present some challenges. Fortunately, once your art is imported, you can make a number of adjustments in Xcode’s SceneKit Editor — SceneKit being the 3D graphics framework that ARKit employs.

We’re going to look at preparing your art for ARKit, getting it into the SceneKit Editor, and making final adjustments. You will need an ARKit-capable iOS device to proceed. You won’t get anything useful out of running an ARKit app on the Xcode simulator.

Create an ARKit Project

In Xcode 9, create a new project. Select iOS > Augmented Reality App.

Xcode will set everything up for you, including an art.scnassets folder containing an example SceneKit file: ship.scn.

Anything you add to ship.scn will show up on in augmented reality when you run the app on your device.

Click on ship.scn to view the SceneKit Editor.

Understanding the SceneKit Editor

If you’ve used 3D modeling apps, the SceneKit Editor will seem somewhat familiar. The first thing you should do is unhide the Scene graph. This lists all the objects, or “nodes,” contained in the scene. The graph lets you do the following:

Clicking on a node in the scene graph selects that node.
Double-clicking on a node zooms in the camera to that node.
Clicking on a selected node again will allow you to rename that node.

On the right, you’ll see various inspector panels. We’re mostly interested in the Node, Material, and Scene tabs.

Node is where you name and transform (position, scale, and rotate) nodes. You can also set visibility and shadowing.
Material is where you adjust and organize a node’s textures.
Scene lets you set certain global features, like fog and environment mapping.

In the lower right is the Library pane. The third tab here is the Object library, which offers a variety of useful items like lights and shape primitives.

Navigating the Viewport

You can navigate the 3D viewport as follows:

Click and drag in an empty part of the viewport to rotate your view.
Scroll to pan the viewport.
Hold the option key and scroll to zoom in and out.

Delete the Default Model and Add Your Own

In the art.scnassets’ ship.scn file, open the Scene graph and select the parent ship node. Hit the delete key to remove it.

Download this archive and locate two files: rocket.dae and checkerboard-tile. Drag them into the art.scnassets folder within Xcode.

Select rocket.dae in Xcode and locate the parent rocket node. Select it and copy it (command-C). Switch to ship.scn and paste the node in there (command-V).

You can now delete rocket.dae from Xcode.

Xcode can handle a few different 3D file types, but the COLLADA (or .dae) is what you’ll see most recommended. It can contain model data, lights, materials, and even animation.
If given the choice, select COLLADA version 1.4 instead of 1.5.

Understanding the Scene Floor Plane

The infinite grid running through the viewport sure looks like a floor plane, doesn’t it? In fact, this is going to turn out to be something more like “eye level.” That’s because ARKit will default the camera position — and your device’s virtual position — to coordinates 0, 0, 0. Thus, any nodes you place above this origin will appear to hover above you in augmented reality.

A real AR app would periodically recalculate the ground plane and anchor objects to it instead of to the camera origin. For now, it’s enough that we’re able to preview our work somewhere in real space. Just position your model slightly below and in front of the scene center — at about 0, –0.5, –1.

Sizing Your Model

Augmented reality is big — as you’ll find out when you drop your first model into ARKit and discover it’s too large to fit in the room.

To get your models down to a reasonable size, you want to aim for a SceneKit bounding box of about 1 by 1 by 1 units; think of these as something like meters. In your 3D app you can work at whatever size you like, but just be sure to export at a scale small enough to work. In Cinema 4D, you can scale the whole project at once using Edit > Project Scale.

Wait, “Export animation”? (Yes, it works, at least with simple animations.)

You’ll need to experiment to find the method that gets you closest to that 1, 1, 1 target.

Lighting Your Model

You can import lights along with your model, but it’s easy to add them in Xcode too. In the Object library, locate the Omni light and drag it into the viewport. Position it wherever you’d like using the axis arrows or just by dragging.

Dragging on one of the three axis arrows constrains movement along that axis, dragging on the quarter circle between two axes constrains movement along both axes, and dragging on the quarter circle’s rim will rotate the object.

Texturing

SceneKit will try to translate your model’s materials into its own scheme, but you’re probably going to want to tweak it. Fortunately, SceneKit has you covered here too.

In the Materials inspector, you’ll see a list of materials attached to the current node as well as properties for each.

You can delete materials from the node using the delete (-) button at the bottom of the list, but note that materials that are not associated with any node are completely deleted from the material “library.”

You can use the add (+) button to associate an existing material or create an entirely new one.

Any changes you make to a material carry over to any node using that material. If you need to create a copy with its own properties, you can hit the Unshare button at the bottom of the inspector. You should also rename the material (in the Identity) field to keep yourself from getting confused.

Lighting Algorithms

The first property associated with a material is its Lighting model. Don’t confuse this with “lighting your model,” though it is related. The lighting model here means the algorithm that SceneKit will use to render your object. They are listed in order from least to most complex, with Physically-Based representing a special type that we’ll talk about in a moment. You can see examples of the different lighting models in Apple’s documentation.

Image Mapping

To see some of this in action, select the rocket’s Body node. In the Materials inspector, select the checkerboard material. Switch its lighting model to “Phong.” For the Diffuse property, select the checkerboard-tile.png image. (If it’s not listed, you may still need to drag the image into art.scnassets.) For the Specular property, pick white.

Image textures in SceneKit are mapped onto a node according to its UVW texture coordinates.

In Cinema 4D, you can generate UVW coordinates for your object’s texture at any time by right-clicking on the texture tags and selecting “Generate UVW Coordinates.” This means you can use whichever projection makes the most sense for your object (spherical, cylindrical, etc.), fine-tune it, and then convert to UVW projection for SceneKit just prior to export.

Physically-Based Materials

You’re going to find some features of SceneKit only preview well if your Mac is compatible with Apple’s Metal graphics framework. (You may be able to pick up Metal compatibility on an older Mac by upgrading your video card.) This is especially true when it comes to working with physically-based materials.

Even on older Macs, you can still use these materials. You just won’t see them accurately until you try things out on your iOS device.

Physically-based rendering, or PBR, helps to simplify the way artists think of real-world surfaces. It boils down all materials to three main categories: diffuse (or albedo), metalness (or reflectivity), and roughness (or microsurface). Using these three properties, you can represent everything from satin to rusty metal.

Select the Body node again, then select the redPaint material in the Materials inspector. Switch the lighting model to “Physically Based.” Leave the Diffuse property as a simple red color, but change Metalness to the “Metallic” option and leave its value at the maximum of 1.0. Change Roughness to Float value and set it at 0.15.

Cheating a bit — you won’t get this same preview until the next step.

You don’t get the full benefit of PBR unless there’s something for the material to reflect. Artists will often use HDR environment maps for this purpose (there are many freely available on the web). SceneKit lets you do that, but for our purposes we can just work with the built-in Procedural Sky.

Switch to the Scene inspector and choose Procedural Sky for Environment. Don’t adjust any settings.

Now, select the Rocket / Window / Rim node and make similar changes to its purplePaint material: Change the model to Physically Based, leave the Diffuse as is, set Metalness to 1.0 and Roughness to 0.15.

That’s a good-looking rocket! At any time, you can build to your ARKit-capable device and see how things look in the “real world.”

Double-Sided Materials

After doing so, you’ll probably notice pretty quickly that there’s an issue with our rocket’s thrusters. They’re invisible from the inside! This is a quirk of how computers render 3D models; they default to treating only one side as visible.

There’s an easy fix for this in SceneKit. In the Material inspector, select the material displaying this behavior (redPaint, in our case) and look for the “Double sided” checkbox. Toggle that on and build again.