Building Your First Augmented Reality App Pt. 2

Share if the site was helpful

Building Your First Augmented Reality App Pt. 2

Welcome to part two of this Augmented Reality tutorial.  Now that we’re done with the boring set-up process, we’re ready to dive into Unity and see a final product!

As a quick review, in part 1 you created a Vuforia account and a license key.  Then on Vuforia’s website you created a database to hold your image target (the dollar bill) and downloaded that along with our 3D elephant.  Finally you downloaded/opened Unity (our game editor) and changed the build settings to Android.  Ok, now let’s continue from there:

Setting our Package Name:

Remember how last time we opened “Player Settings” and then the tab that said “XR Settings”?  Well there are a few more small things we’ll have to do in this section.  Instead of “XR Settings” open up the “Other Settings” tab.  Every app that is published on the Google Play Store needs a unique ID so that it doesn’t get mixed up with other apps.  So while you may see two apps with the same name, under the hood their ID’s are different.  This ID is known as the app’s package name.

In our “Other Settings” tab we’ll write what we want our package name to be.  This can be whatever you want, but I’ll use “com.rootjunky.vuforiaelephant”.  Now my app has an ID and Unity will be able to run it on any mobile phone.  Also go ahead and uncheck the box “Android TV Compatibility”, since this app won’t work on Android TVs.

Now to import all of our materials from the first post.  In your Unity project you should see a section for the Project hierarchy.  This shows all the files/resources in the project, and we’ll be storing everything inside the folder named Assets.  We already have our Vuforia files in here, and to get everything else into this folder you can click and drag the following into the Assets folder:

  1. The Vuforia database you downloaded
  2. The 3D elephant model

Creating the Scene:

Once all of these assets are together we can begin messing with our scene.  Go to “file” then “Save Scene”, and save this scene as main (we can think of scenes as different parts of our game, but we only need one for this project).    Now inside of our scene’s hierarchy right click on the Main Camera and delete it.  Then click “Create” -> “Vuforia” -> “AR Camera”.  This will add Vuforia’s custom camera to our scene that takes care of all image targeting (i.e. recognizing dollar bills).

But now that we have the AR camera, we still need to tell it to look for a dollar bill, and to place an elephant on top of that dollar bill once we find it.  To do this select “Create” -> “Vuforia” -> “Camera Image” -> “Camera Image Target”.  If you click on an object in the scene the right-side tab will show details about it, and selecting the Image Target will display a detail section titles “Image Target Behavior”.  In here set Type to “Predefined”, Database to “DollarElephant”, and Image Target to “dollarTarget” (see the following image).

Setting these values connects our database to the image target, so now our camera knows to look for a dollar bill.  But in order to use Vuforia we also need to add our license key.  Make sure you have this still copied to your clipboard, and then selected the AR Camera in the scene.  One of the details you’ll see appear for it is labeled “Vuforia Behaviour”,  In here click the Open Vuforia configuration button and then paste in your App License Key.  Then in the Databases dropdown check the boxes that say “Load DollarElephant Data” and “Activate”.

Displaying The Elephant:

Now for the final step: attaching our elephant.  Find the elephant model inside of your Assets folder (most likely named “source” right now).  Click and drag this little guy onto your ImageTarget in the Hierarchy tab.  This will make the elephant become a “child” of the ImageTarget.

Chances are things look funky though on your screen, and this is because the elephant model is HUGE.  Inside of its Inspector tab we can change its position, rotation, and scale, so lets drop its x, y, and z values for scale down to 0.1.  Then set the position to 0 for the x and z axis, and 0.5 for the y axis (this just raises the elephant a bit so he’s on top of the dollar).

And that’s it!  We’ve attached our Vuforia files to the scene and bound a 3D model to Vuforia’s image target.  With just a few steps we’re now ready to see our augmented reality creation come to life. Connect your phone to your computer (make sure it’s USB Debuggable) and then go to File -> Build Settings again.  Select “Build and Run”, and your game will download onto the connected device.

When the app is up and running point it at any dollar bill, and you’ll see a virtual elephant appear on top.  What’s even cooler is that if you pick up the dollar and move it around the elephant will stay on top.

Congratulations on sticking through this whole process.  It’s very possible you got stuck along the way, and if that’s the case just comment below and I’ll try to help you out.  And if you’re interested in learning more about Android development then you can always check out Phonlab’s course HERE.

Building Your First Augmented Reality App

Share if the site was helpful

We’ve talked before about how influential augmented reality is going to be in the future.  What we didn’t mention is how easy it can be to take part in shaping that future.  Over the course of the next two posts we’ll show how to incorporate AR into an app, and when it’s all said and done we’ll be able to look at a virtual elephant in the real world.

It’s not too complicated as far as subject material goes, but there a couple steps involved so we’ll split this into two pieces: gathering our resources and then putting them into action.

Before we do any work though, let’s take a second to discuss the bigger picture of what we’ll be doing here.  If you’ve ever experimented with game development, then you’ve probably heard of Unity.  If not, then some things in this tutorial may seem a little confusing at first (but far from impossible!).  Unity is a development environment where developers can make 2D and 3D games, and we’ll be using it here to host our augmented reality app.  Click here to download Unity, and when you do make sure that you include the Android/iOS and Vuforia plugins.

We all know about Android and iOS, but odds are Vuforia is a new name.  Vuforia is a popular AR platform that allows us to use image targeting in our apps.  Essentially all we have to do is pick a 3D model and an image.  Vuforia will then root our 3D model to any images it sees in the real world.

For example, in this app we’ll be using a 3D model of an elephant made with Blender, and the image will be a $1 bill.  With this combination, any time our app’s camera finds a dollar bill in the real world, it will place the 3D model on top of it.  The result is the title image of this post.

Ok, that’s enough background.  Let’s jump into the actual set up.  Use the above link to download Unity if you don’t already have it, and then go to developer.Vuforia.com and create an account.  After you’ve made an account click on the develop tab and then click to create a new license key.  You can name this anything you want, but as you can see in this image I chose “VuforiaElephant” as my name.

After creating the license key you’ll be able to click on it and see a string of random characters representing it.  Copy and paste this value; we’ll be using it later in this tutorial. 

We create this license key so that our app in Unity will be able to connect to our Vuforia account.  Now for the second step we’ll need to do create a database inside of Vuforia to hold our dollar bill image.  Change your selection from License Manager to Target Manager and then add a new database.  I’ve named mine “DollarElephant”.  Inside of this database we’ll click “Add Target” to add a new target.  Pull any image of a dollar bill from Google images and add it here.  Then set it’s width value to 5 and give it a name (dollarTarget is just fine).

When you’re done with this click to download the database, and that’s everything we’ll need to do in Vuforia.  Before moving into Unity let’s also get the 3D model of an elephant we want to use.  Click here to download the elephant made by sagarkalbande (and feel free to try this out with a different model).  Save this file onto your computer and now let’s move into Unity.

If you’re feeling overwhelmed right now, don’t worry we’re not going to do much else in this first part.  For now let’s open Unity and create a new project named “VuforiaElephant”.  Go to “File”, then “Build Settings” and select Android as your Platform.  After making this change the little Unity cube should appear next to Android.

Finally inside of the Build Settings window click on “Player Settings” and a bar of options will appear on the right side of your screen showing setting options.  Open the tab that says “XR Settings” and check the box that adds Vuforia Augmented Reality to our project.  Go ahead and import the settings that Unity says it needs to add, and now we’re ready to start the fun stuff.

If you’ve made it this far down the blog, then good work sticking through the dry steps.  We created a Vuforia account, made a license key, and selected a dollar bill as our image target.  Then we downloaded our elephant 3D model and created a new project in Unity.

So now we just have to make the connection inside of our Unity app between the dollar and the elephant.  Stay tuned for the second part of this tutorial in the next few days and we’ll finish out the project so that everyone can have their own virtual elephant! Does app development have you completely lost? Check out Phonlab Android app development classes HERE

Augemented Reality is at the ARCore of Android’s future

Share if the site was helpful

ARCore is out!

In the summer of 2016 PokemonGo opened up pandora’s box for augmented reality (AR).  The app was an instant hit around the world.  While it’s user base has certainly declined since then, nearly two years later it still has a constant demand.  Unfortunately, Pokemon are not the topic of this article (I could write some pretty good ones!). Instead we’ll focus on another stride in AR that took place earlier this week; Google’s release of ARCore.

On February 23rd Google officially released v1.0 of ARCore available on over 100 million Android devices.  Individual developers can now design and publish their AR-based apps on the Play Store, and this only means that AR is going to become even more prevalent in our everyday lives. Speaking of Developer, if you are interested in becoming a developer you should check out my new Android developer course on Phonlabteachable.com

Compatible Phones:

While the list of phones is limited at the moment, you can experience this new wave of AR if you have one of the following phones:

  • Pixel/XL
  • Pixel 2/XL
  • Samsung Galaxy S8/S8 Plus
  • Note 8
  • Galaxy S7/S7 Edge
  • LG V30/30+
  • Asus Zenfone AR
  • OnePlus 5 /5T

ARCore is certainly not the first AR software to get into the hands of developers (Apple’s ARKit and Unity’s Vuforia), but it still marks a significant step towards AR becoming the norm on every device.  Google has said they are partnering with many manufacturers this year to enable AR in upcoming devices.  The bottom line: AR is here to stay.

AR’s Implications

As a developer myself AR is a beautiful thing because it empowers us to create more immersive experiences that can connect with other people.  You’ll often hear gamer’s say that gaming is an art form that encompasses many others.  Video games are an interactive visual and audio experience that can invoke feelings just like any other art if the story is told correctly.  AR only creates more opportunities for this to happen, so it’s not surprising that most of the successful AR apps right now are video games.

But of course AR has much more use than just as a gaming feature.  Industry giants like Amazon have already began releasing their personal touches.  Amazon has utilized ARKit for a few months on iOS, and ARCore is now available on Android phones so that users can visualize what products will look like in their homes before ever purchasing.  Google also partnered with Snap to create a virtual tour of Barcelona’s famous Camp Nou soccer stadium.  I think it’s safe to say every tech giant in the world is thinking about either how they can incorporate AR, or what impact it’s going to have on their future.  Even outside of tech a lot of other industries are gearing up for change as well.

With so many new reality technologies emerging, its an exciting time to be either a developer or a user.  And with all this buzz about AR, let’s not forget that the end of the spectrum exists with products like the Vive containing fully immersive VR worlds.  These differ from AR in that 100% of your surroundings are computer generated, not just a portion.  There’s certainly a spectrum of how immersive AR can be.  If we put reality on one end and VR on the other, AR is everything that falls in between.

What do you think the future holds for the immersive computing spectrum?  Let us know in the comments below.