Video transcript :
Unity and Vuforia
Assalamualaikum. My name is Widhi Muttaqien.
This is part eight of the video tutorial series. In case you stumble upon this video directly be sure the check out the previous videos before moving on. The tutorial series is about developing augmented reality product from A – to – Z using Blender, unity and vuforia. These tutorials are all based on my previous experience developing my own augmented reality product which is this flashcards Arabic letters and numbers augmented reality. Basically a flashcards to help children learning Arabic alphabet using augmented reality. I leave links below in the description if you like to learn more or purchase the flashcards from amazon.
Surprisingly this last video perhaps the easiest video that you need to follow. As I mention before making AR app is actually very easy. The hardest part is making the 3D content which we cover previously in the 7 parts of video tutorials.
At the core, AR is basically image tracking technology; therefore we need an image for it to track. For this tutorial I’ll be using this image for the image target. You can use any image you want just make sure that they have enough complexity and have a good contrast. In my experience with AR project, images with low complexity and low contrast will track by the AR engine poorly. Also important to take note is that the Vuforia engine will actually convert your image into greyscale image inside their target image database. In other words the AR engine is actually color blind. So don’t create image that may look contrast in color but looks low-contrast when converted to greyscale.
Go to Vuforia website which is Vuforia.com and then go to developer page by clicking this link up here that says “dev-portal”. Now you must understand that their website’s layout changes overtime so if you follow this video tutorials like 2-3 years from since 2016 when I record the video you might see some differences. But I hope the general workflow is still the same. Basically you need to download 3 things from the Vuforia website: First the vuforia plugin for unity. Second is the license key for your app. And third is database which contain your image targets. For the last part which is the database you need to upload your image file first to be converted to an image target database. In one project we can have multiple image targets all contained inside one single database.
Okay so after you are in the developer portal page in here, register a new account with the button around here if you don’t have one yet. Or just click login if you already have an account. As you can see I’m already logged in so I have my user name up there. After you’re logged in. First go to download section and download the unity SDK. Save it to your project folder. I already done this so I wont do it again. Ok. One check list is done.
Next is the app license key. Go to “develop” section. Go to “license manager” page and click “add license key”. The license key is a special key for every app you develop. Choose “development” in here as we just doing this for testing only and not for actual commercial project. Lets name this app “Carny AR” or any name you want to use. Leave the rest of the settings to its default. Click the next button. Click here and then click the confirm button. Okay now the app already registered and we can get the license key by clicking in this “Carny AR” text in here. Then copy all of this text and paste it on a text editor such as notepad and save it on your project folder. We’re going to use this license key later. Okay so second checklist is done.
Next go to “target manager”. Add database. Name your database to any name you want. I’ll name it “carny_db”. Choose device in here then click create. Okay now we have a database to contain our image target data. Click on it. Choose add target. Then upload the image target we have before by clicking the browse button. Ok this width value will be the width of our image target inside unity. I’ll use 10 unit as we have carny 3d model as tall as around 9 unit in Blender. Leave the name to the original file name and then click the add button. Vuforia server will process our image and produce a downloadable image target database. After it is finished notice this 5 stars means that our uploaded image target is in perfect condition for AR image targeting. Lower star ratings mean that your image is not good enough to be tracked by the AR engine. Perhaps less contrast or less complex. Okay you can download the database by clicking “download database”, choose unity format, and hit download. Save the file to your project folder. Third checklist is done and now we’re moving on to Unity.
Open Unity. Create a new project if you haven’t done so. Then import the Vuforia plugin. To do this simply go to assets menu > import package > custom package. Choose the file of the Vuforia plugin and hit open. Press import. Now the Vuforia library is alive inside our project.
Vuforia has their own dynamic camera which tracks and move dynamically in 3D space according to the movement of user’s device when tracking the image target. So because you don’t need the default unity camera, lets just delete it. Also we don’t need this direct light as our material will be all unlit. Lets add Vuforia camera prefab into the scene. Browse to Vuforia > prefabs and choose “AR Camera”, click and drag this to the hierarchy panel or to the scene. Make sure the position is at the center of the world by making x and z to 0. Now notice in the camera object there is an input field for the app license key. You need to copy the license text from the text file you saved before and paste it into the input field in here.
Next we need to import the database into our project. Just do the same method as before. Okay. After the database goes in to the project. Go back to camera and turn on this “load carny_DB data” and then check this activate button.
Now notice inside the vuforia prefab folder you’ll find a prefab for image target. Add that image target into the scene. Place it at the center. Then down here select the database we’ve created and downloaded before. Then choose the image inside that database. Currently we only have 1 image inside the database so Unity select it automatically. But if you have more than one image targets, you need to select it from this combo list.
Importing 3D content from Blender
Importing 3D content from Blender to unity is ridiculously easy. So how can we import them? Well you don’t. Just copy the “.blend” file and the texture file which is a “.png” image format we have before to the unity asset folder. It can be the sub folder of the asset folder. And that’s it you’re done. When you go back to Unity. Unity will automatically handle the rest of the conversion. Behind the scene unity actually convert the blender file into an FBX format. When you see this prefab icon in your project panel it means that it is already converted to FBX and ready to be used in Unity.
Okay now there are 2 things you usually need to do after importing 3d models to unity. First, setup the material and texture. Second, setup the animation. Lets see how we can do this.
First we need to setup the material. By default Unity will convert material from Blender to standard material. In Unity 5, the standard material is a PBR material, which is a great material for creating photorealistic look. But for our case we only need an unlit material. Unlit material is a flat colored material as it ignores any lights and shadows and only show the true color of the texture. We choose this unlit material because not all mobile devices are equipped with highend graphic processor. Using unlit will make the rendering much more faster as the GPU will bypass shading calculation. So go to the material and on the inspector panel change the shading to unlit-texture. Now this texture slot is for placing the texture image. So drag the image, which is “carny_texture.png” from the project panel to this slot. So now when we select the carny’s prefab and look at the inspector panel we’ll have something like this.
For the animation. Make sure the carny prefab is selected, then go to the “inspector” panel. In the animation section you can assign as many animation clip based on the animation you create in Blender. In this short tutorial I’ll need skip explaining the basic stuff of animation in Unity as it will take too much time. The only thing we’re going to do is choose the default take in here. Make it loopable. And then remove the second animation which is this armature action. Check the animation by clicking this play button. And we’re good to go. Don’t forget to click on the apply button down here.
After all of this setup done. The next thing we need to do is to place Carny on top the image target in hierarchy panel. By doing this carny will automatically become the child of the image target prefab. The downside of this technique is that the width of the image target which in our case is 10, is multiplied to the carny’s model. So basically we need to scale it down one per tenth scaling. To do that select the prefab again. Go to model and change the scale factor to 0.1. Then hit apply again.
Next create an animation controller. Just name it carny. Open the animator window and then drag the animation clip that was generated automatically before which is the “default take” animation clip. Then go to the carny instance which sits on top of the image target and assign the “carny” animation controller to the animator component.
Publish the project and you have a working augmented reality app.
Alhamdulillah it is finally finished. Our video tutorial series on augmented reality from a-to-z using blender, vuforia and unity. I hope these video series helpful to you guys. Thank you for watching and don’t forget to subscribe. Wassalamualaikum