ar

Designing 3D models for AR apps (ARKit)

Chris is... mainly a Product Designer at Novoda, but sometimes people see him opening pull requests on various projects, so nobody is even sure anymore.

At Novoda we’ve been playing around with Apple’s ARKit features, and we had tons of fun building demos with it, even though a few colleagues were wondering why we were walking around holding our phones up. Now we want to share our findings with you.

Getting started with 3D modeling

To begin creating your first 3D model you will need a 3D modeling app. There’s a plethora of options out there, some of the most popular ones being Blender, 3DS Max, and Cinema 4D (C4D). For the purpose of this post, we’ll be creating our 3D models in C4D, but you can use whichever software you prefer, as long as you’re able to export your models in Collada 1.4 format (.dae extension).

The first important thing that we want to do when we open C4D is go to the Project Settings in the bottom right panel, and change the scale to meters, instead of the default centimeters. This is because ARKit’s unit of length is meters, and unless we use the same units, things will appear disproportionate in the real world compared to the size we create them in C4D.

Now that we got that out of the way, we can start designing the objects that we’re going to add into our world. Prior to this project I had no knowledge of modeling 3D objects at all. I spent a few days watching tutorial videos on YouTube to get familiar with C4D itself, what goes into creating an object (such as texturing and lighting), as well as the terms that are often used in 3D modeling.

Getting into the 'how' of creating 3D models would be a bit of an overkill, but most importantly, out-of-scope for this post. If you've already got the skills and the time to create 3D models, go ahead and use your own!

For the sake of this tutorial we’ll use a couple of simple objects; this banana, which we’ll use in the AR app, and this low-poly tree to illustrate a few important steps in our workflow later.

TurboSquid is a good place to find paid and free 3D objects. Google also recently launched Poly, a library of 3D objects which you can download for free.

Preparing for export

At this point in the process there’s a few things to keep in mind—if we were to export this object and plug into our AR app, we would see an all-white projection of it without any kind of texture, and that’s no good. Textures need to be ‘baked’ into the model in order to be visible in the AR app. We’ll do that in a second.

Let’s set the anchor point of the object on its bottom; i.e. where it is supposed to touch the surface. If we don’t do this, the object might appear like it’s hovering over the surface as we move the device around. That’s because the object isn’t properly anchored to the surface. The low-poly tree will help illustrate this point better.

After positioning the anchor point correctly, let’s make sure to set the object’s coordinates to 0, 0, 0 on the X, Y, Z axis accordingly—namely, the origin point.

Another thing to keep in mind is to avoid using any sort of lighting in C4D. The best time to start thinking about lighting your scene is during development time in Xcode. Adding a light source to the scene in Xcode will allow us to have more control over its properties through ARKit’s APIs, as well as the ability to add lighting to a scene that hosts multiple objects. Just like in real life, objects do not carry a light source with them wherever they go, but are lit by external light sources. Doing this will make your project more granular, and thus easier to maintain.

Using a light source will also allow us to cast shadows onto a surface, making objects look like they belong in the real world, rather than looking like stickers on your device’s screen. This will be taken care of in the next post where we continue designing for AR.

We are almost done preparing our model for the AR app. Now it’s time to ‘bake’ the texture so the AR app can pick it up. Hold on, what does it mean to ‘bake a texture’? Baking essentially generates an image file that contains the texture of every polygon of an object, called a UVW Map. UVW maps are three dimensional (hence the three U, V, and W coordinate identifiers), which allows them to wrap onto complex geometries.

In the case of our banana, this is an unnecessary step as the author already provides us with a texture, but this is something that in most cases you will have to do for your own 3D objects.

Back to the low-poly tree again! To bake a texture, we will select all of our layers and group them into a single unified object, then select Bake Object in the Objects menu. Check Single Texture and Replace Objects, PNG format, and your desired export location. A size of 1024x1024px seemed to maintain good details on the model when viewed through the AR app.

Now the model consists only of the texture we just baked, making all other materials redundant. Don’t worry if it looks blurry; that’s C4D downscaling the texture for faster inline rendering.

Before we export, it’s a good idea to clean up the file from any unused layers and materials. To remove any unused materials, right-click on one, then select Remove Unused Materials.

It’s now time to export our model! Generally, ARKit supports many files types, the most popular being .dae, and .obj along with it’s .mtl file. Generally, .dae is preferred due to its ability to support animations and the fact that they don't need supportive files (like the .mtl file). If you go the File menu and then Export, you’ll notice C4D supports both these options, but you might also notice that there are two .dae type exports—COLLADA 1.4 and 1.5. The latter wasn’t working for us, so we exported all our models in COLLADA 1.4.

Apple recently introduced the .usdz format, which is a format based on Pixar's USD format and packages the model, textures, and animations in one single file. Apple has provided a tool in Xcode to convert the above mentioned file formats into .usdz, but for the scope of this post we will focus on using our usual formats.

When exporting to .dae enable the following options in the export window:

The .dae file has a reference to the UVW Map created earlier, or in this case the texture given with the 3D model. If you change the name of the texture file, you should also update the .dae file, too. You can easily do so by opening the file with any text editor. The texture is usually referenced in the first few lines of the code, but if you can’t find it, look for something ending in .png (or whichever file format you previously exported the UVW map to).

Animating

Animating 3D objects has proven to be easier than we thought—the .dae format is able to store animations done in C4D, and there’s no extra steps involved to make them play. Easy as that!

Animating in C4D is similar to After Effects, so if you’re familiar with this software you won’t find it very difficult to adapt. Admittedly, C4D feels very old and clunky, and this process can turn out to be very slow and frustrating at times.

To export the animation, don’t forget to check the final “Export animation” box in the Collada 1.4 export window. ARKit will pick up the animation automatically and will play it in a loop, just like a gif.

We will talk about implementing this animation in the AR in the next post.

Conclusion

That’s about all you need to know to get started designing for AR! We went through using a 3D modeling app to create our object, texturing, and exporting in the right formats. In the next design post, we will talk about lighting the model appropriately, adding shadows, and supporting animations.

In the next post of the series, Berta Devant walks you through how to create a basic demo AR app which will allow you to use 3D models in an augmented reality environment.

Got any comments or questions? Hit me up on Twitter @BashaChris

Enjoyed this article? There's more...

We send out a small, valuable newsletter with the best stories, app design & development resources every month.

No spam, no giving your data away, unsubscribe anytime.

About Novoda

We plan, design, and develop the world’s most desirable software products. Our team’s expertise helps brands like Sony, Motorola, Tesco, Channel4, BBC, and News Corp build fully customized Android devices or simply make their mobile experiences the best on the market. Since 2008, our full in-house teams work from London, Liverpool, Berlin, Barcelona, and NYC.

Let’s get in contact