One more time with AR

Pavel Laptev
Inborn Experience (UX in AR/VR)
9 min readMar 4, 2018

Hello, mates! Today’s agenda are— AR, Unity, Vuforia and Sketchfab.

I wrote an article about prototyping AR/VR on the web and decided to close all blind spots for myself in this topic and try Unity 3D. What approaches does it have for Augmented Reality? How easy it is, compared to A-Frame? The reason I selected Unity 3D + Vufiria to achieve AR is that Unity 3D is the most popular tool to make 3d games today, also, developers integrated Vuforia Engine as a default component in the new version.

Oh, what is Vuforia? Vuforia is an Augmented Reality platform supporting mobile, desktop, HMD (Head Mounted Display)

I’m not offering you something new in order to achieve AR with Unity. I just followed to already made tutorials from different people and I want to show you the differences between WebAR and Unity AR, which I will write in the end of the article. Most part of the article will be in speedy screencasts just to avoid explaining every step.

But first, we need a model… yes, this article is not so strict.

Modelling

I’m not looking for easy ways to get things done, so I decided to create my own 3D model instead of just downloading some already made assets. Also, I wanted to publish something on Sketchfab because I can’t publish assets which is not mine :-)

Everything from modeling, texturing and animation I will make in Cinema 4D. This is why I love this tool — it has everything you need for the whole pipeline and also it works on Mac and very simple in terms of usual GUI compare to other 3D tools.

When I discovered Unity 3D and AR I watched an original TV series from British THAMES «The Wind in the Willows».

I really loved this show in my childhood. And I decided that my 3D model will be my tribute to the show.

Historical reference. In Russia during the 90s we had two British shows «The Wind in the Willows» and «The Benny Hill Show». I don’t know about «The Wind in the Willows» but everybody knew about Benny Hill in Russia.

I chose Mr. Toad character and started from references search.

After I collected reference images, next step I followed is to open Cinema 4D and start the modeling.

It took me about two nights. But this is not all in modelling part, it’s only a first part, we also need to build a background but before that we need to create a “mood”… by Toad pose.

Rig for the model

To do that, we will rig the model. I decided to make a rig for the model because it gives you flexibility afterwards and opportunities for animation. 3D rigging is the process of creating a skeleton for a 3D model; certainly cinema 4D is a very convenient toll for that.

As you can see, I tried to use templates like already prepared human rig in C4D but it didn’t work to me, and I thought that it will be faster to create my own Rig which wasn’t so hard to do.

Background modelling

Now we can proceed to build our scene. I rendered Mr.Toad and made a quick sketch in Photoshop. Also for further modelling of the Toad Hall I used reference of different mansions which I googled.

Texturing

In the previous video in the end I baked textures of all objects:

  1. Mr.Toad
  2. Toad Hall
  3. Ground
  4. Trees

Baked textures is a preparatory stage for the next big step — texturing. In the beginning, I thought that it would be nice to make high detailed model and textures in PBR technique, but sober glance after two days of work made me convinced me that it will take more time than I expected.

So that’s why I decided to make the model in low-poly and textures in hand-painted technique.

Also, in the beginning I made a mistake and tried to paint textures in Photoshop but it turned out to be 3D Paint mode in Cinema 4D is much better because you can also adjust pressure and a shape for a brush and you can see all your brush strokes in real time.

And the final textures.

Animation

So, almost done. The last step before we will export the model is animation. Animation is the funniest and fastest part here, provided that everything was settled with a model and Rig.

Augmented Reality in Unity 3D

Finally, we can test what Unity can afford to us in terms of AR. To achieve AR in Unity we will need the latest Unity version.

The latest Unity version already include Vuforia component (in previous versions Vuforia should be installed separately). Vuforia at the moment is the most popular approach for AR as mentioned above.

Import to Unity

The First step is to export our model to Unity. The most popular format which supports animation is FBX.

The second step is importing the model — simple drag’n’drop of your project folder — include all textures. Next we need to connect an animation to the model in Unity, create new materials and add textures to them. And sett up lightning for the model.

Vuforia AR

First of all, we need to register an account on Vuforia developer portal in order to generate a development license key in License Manager.

We will need this key later. Vuforia works with different types of AR markers. So, the next step is to create this marker in Target Manager. Click on “Add Database”.

And add a marker to the database.

After the deletion of a main camera on the scene, then add AR Camera from Vuforia menu. In AR Camera, add your license key which must have been generated before.

Also, add ImageTarget — it will be our AR marker.

Download the Database and drag’n’drop it into your Unity project. After that switch on the database in AR camera and image component.

This is it. Now you can hit the Play button. If I didn’t mention details, it’s just to simplify the flow and show stepping stones. You can watch the screencast below for more details and a full flow.

Build AR app on the phone

Now you see how easy you could achieve AR with Unity and Vufiria. So, AR on your desktop is a good thing, but what about something more practical. I’m talking about Phone app, iOS in this case.

Make sure that you have latest system update and latest Xcode. If you want a detailed explanation about steps in my video above, I suggest you to watch this tutorial:

Model on Sketchfab

And a bonus track in the article is a little part about my favorite 3D online publisher SketchFab. I made a model, textures and animation. And Sketchfab is a great service to share your model with others :-) I hope you will enjoy it

Another great thing in SketchFab is that you can include SketchFab player with your model everywhere, even on Medium he-he. It’s not a commercial SketchFab, just love these guys :-)

Conclusion

Okay. What’s the point? You told us about compressing A-Frame AR and Unity AR in the beginning… well we’re waiting…

How long and complicated is to create AR in Unity? Easy, just look at the chart below.

But of course you should think about aims and what do you want to achieve.

There are dependencies. The more complex your project is, the more likely that Unity will be your choice. This is because Unity can offer you much more components and opportunities than A-Frame at the moment and you can achieve complex things like controls or animation stages and interaction much easier. Unity has already passed in this way, A-Frame only in the beginning and you will spend more time for certain task unlike in Unity.

Unity has GUI, but no A-Frame. Which sometimes if you need to make fast sketch of a scene, it could be a problem. In other words, code is much precise but not so convenient at times, especially if you are a beginner. Unity resembles on usual 3D tools.

A-Frame has slower performance compare to Vuforia and Unity.
Unity has a lot of addition components, plugins and asset store; I think A-Frame will have it in the future.

Vuforia has very precise AR-marker detect, much smoother, almost magic :-)

Unity 3D + Vuforia adventeges over A-Frame

✅ Any complexity of the project

✅ Wide choice and support of different 3d formats

✅ Fast performance

✅ Asset store, components and add-ons

✅ Much precise AR-marker detection

It looks like I betrayed WebVR, but no. I think that webVR and A-Frame in particular has advantages that Unity and Vuforia don’t have now. What is it?

A-Frame adventeges over Unity 3D

✅ Prototyping in browser

✅ Installing new components by on line of <script> tag

✅ Simple language and markup

✅ No need to think about dependencies and different devices.

To make the right decision, just ask yourself the following questions:
What do I want to achieve? What are my purposes?
Look at SketchFab, the guys made a great 3D tool on the web and nothing has ever stopped them.

That’s all folks :-) Good luck and have a great day ;-)

--

--