7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.1 Organize the Assets

Before we are able to build this cool AR app, we need to get all of the pieces together. In this lesson, I will show you the images we are going to be working with. First, we will need our marker (or target) image which will be played by the center section of a birthday cake plate. Secondly, we will need a 3D object that we want to project onto that marker. For that, we will want a birthday cake. Because what goes better on a cake plate than some cake?

2.1 Organize the Assets

The next thing you do is to get all of our assets together to be able to create our augmented reality scene. And as you saw in the introduction video, we're creating a virtual happy birthday cake, if you will. So what I want to do is I want to get two things together. The first thing that I want to do is I want to create my marker. And in the world of augmented reality, a marker is really nothing more than an image that the augmented reality software or Vuforia, in this case, is able to easily identify within a scene. And then that will also give us access to do different things with that marker. I could create animations on that marker, I could put 3D images on that marker. I could do all sorts of different things, once I have that marker within the scene. And it's all done for you automatically based on a couple of things that you're gonna set up here. So as you saw in a previous lesson, we're going to create this virtual kind of happy birthday cake. So I need to create a marker that's gonna identify that cake plate. And since I recently had a birthday party in my house, I have a lot of leftover cake plates. Unfortunately not a lot of cake left so we're gonna make this virtual. So what I did was I took a picture of a birthday cake plate and I cropped it. So I cropped the center rectangular section out of it, so that I had this image here. Now you can use any sort of image you want, and if you want to follow along I'm going to include this asset with the source code. So you can use this to create a similar augmented reality scene, or you could use your own. There's just a couple guidelines that you're going to want to follow. First of all, the image has to be of relatively decent quality. It doesn't have to be high quality, but it has to be decent enough that it's easily recognizable for you, and for software to be able to identify. So around 2 meg and under is about as big as you can go. That's a limitation on the Vuforia software. And you want to make sure that it's decent enough quality, as you can see here, that I can read this and see this. But it doesn't have to be super high quality. It also has to be relatively colorful. That's going to improve the rating of the marker image. And you'll see what I mean by that in a little while. And you're gonna wanna have it be relatively high contrast with a little bit going on so that it's easily identifiable and relatively unique. Because if it's too generic, just like a picture of a table or something like that, it's not gonna be as easily recognizable and the Vuforia software won't be able to handle that quite as well. So if you wanna use this image please feel free to do so. And when you actually are using this or doing the or using the actual application that we're creating at the end of the course, you can just print this image out. Or, you can use a different image that you have something lying around the house or whatever have you, and you can use that instead. Whichever way you'd like to do it is absolutely fine. So we have this image, this is gonna be our marker. Then we're also gonna need the image that we want to place on top of the marker. So the marker within the augmented reality software in the Vuforia library is there so that we can get programmatic access to be able to do something with that marker. In this particular application I'm gonna show you how to place a 3D object virtually in an augmented reality plane on top of that marker. But you could do other things with it. You could do animations, you could do whatever you want. There's a lot of different things that you can do. I'm just sticking with the simplest as I'm going to place a 3D object on top of that marker and we also need to get that object. So you could search around the Internet. There's tons of websites out there that will provide 3D models, that either for free or paid. And to keep things simple I just wanted to find a simple birthday cake image. It didn't have to be fancy, didn't have to be super high quality, I just wanted something to be able to show you as a demonstration. So one place I like to go on when I'm looking for models is Turbo Squid. So I go over to turbosquid.com and I do a little search and I wanted to search for a cake. So I searched for cake and I wanted to be a little cheap in this case, so I didn't wanna have to pay. So I went to the price dropdown and I changed the min and max amount to 0, which gives you free. And if you search around here you're gonna find a cake here. And this is the one that we're gonna use in this particular case but feel free to use any of these that you want, if you wanna get a different one from a different site or use a different object or model it's completely up to you. It will all work in the same basic way. One thing to look for though is when you get these 3D models you wanna make sure you're getting an OBJ file. That's gonna be the format that's gonna be easy for us to work with when we're dealing with Unity and Vuforia. So whatever you download, whatever models you get just, make sure you get an OBJ file. So in this case I selected this one, you can download this one for free just have to have an account so you set up an account it's really easy you click download you get it. And here we have it right on my desktop all ready to go. So now the next thing we have to do is we have to go into the Vuforia library software and we need to create a database that contains the marker that we wanna deal with. In this case the happy birthday logo, as well as create a license key. So let's head over to the Vuforia website. So we're at the developer.vuphoria.com site again. I'm on the Develop tab, I'm also logged in. That's very important, make sure you do that. And then we're gonna be at the License Manager tab. So the first thing we need to do is create a license key. So I'm gonna add a license key. And make sure in this case you select development, this is what's gonna allow it to be free for you to do. And then come down to the bottom and we just simply need to give this a name. So I call this TutsARDemo, make sure you've selected Mobile and the License Key going to be Develop, which means there's going to be no charge. Go ahead and click Next and then you can come down here look at the information. You're going to confirm that you want to create this license key. And then click the Confirm bottom. So now I have a license key here. So I'm gonna go into TutsARDemo and one of the properties in here is gonna be the actual license key. So I'm gonna go ahead and select this entire thing and I'm going to copy it onto the clipboard. You can leave this up and come back to it later, we're not gonna get to that point in this lesson we're gonna get to it in an upcoming one. So you can either copy it for use now, or you can just leave this open and come back and get it in a little while. Either way, will work just fine. So the next thing we need to do is we need to go into our target manager. So Target is also another way to refer to a marker, so these are things that we are going to use to generate the markers that we're gonna use within our application. So I all ready have a database here called ARDemo for some work that I did previously, but in this case I want to add a new database. I want this to be a new database that's gonna have targets or markers for this particular application. So I'm gonna create a database called TutsARDemo, or feel free to call it whatever you would like, in this place we want to be a device database. So let's go ahead and create. And now here we are we can go into our TutsARDemo, and there is nothing in here as of yet. So we're going to change that right now. So the first thing that we want to do is add a target, and remember this is where I started to talk about things like where how that quality of marker and it's rating is going to ultimately be determined by the type of image you have. It's contrast the number of colors in some of those properties. This is where all that's going to come into play. So I'm going to go ahead and browse and I want to browse to my desktop and I'm going to go to my happy image here. And I'm gonna say Open. And then we need to specify a width and a name. So the name is prepopulated based on the filename and the width is kind of a relative value. Don't worry about it too much, it's not really that big of a deal. But it has to do with the width of your target in scene units, for this particular example just put in 10. It's really not that incredibly important for this case. When you start building a little bit more intricate applications or games then you might have to deal with this a little bit more but for now 10's gonna be just fine. So we gonna go ahead and click and Add. And so it's going to upload our image as a target. It's going to take a look at it and analyze it automatically on the Vuforia site, and it's going to give that image a rating. And as you can see here, as soon as it's done, we're now going to have a target listed on our TutsARDemo database. It's going to be of type single image and the rating here is five stars. Now this is incredibly important to pay attention to. Vuforia does a pretty decent job of analyzing the images that you upload. And if for some reason you upload something that is maybe lower contrast or not as bright and colorful and easily identifiable you, will get a much lower rating anywhere down to zero stars. Now I've done this before where you can get away with four stars, but I would highly recommend never going below that. I would, if for some reason you use an image that gets you a four stars, maybe because the image isn't very clear, then I would do a another better job of trying to get that image a higher quality so you can get up to five stars. Just because it's going to give you a much better opportunity or a chance to be able to use that productively within your application. So it just so happens that this is going to give us five stars and that's exactly what we're looking for. Now we want to take this database, and you can add as many of these targets as you want you can deal with different images within the same application, within the same database. That's absolutely fine add as many hears you want. I'm going to stick with one, but the process is the same if you want to do multiple. It's not going to hurt either way. So I want to download this database so that I can use it within my Unity project and be able to use this as a marker or a target within my application. So in order do that I'm going to select the happy image, and once again you can select as many as you want in here. You can put ten images in here and only select three to use in this particular application, however you want to do it is absolutely fine. And then we're going to download database, so we'll click Download Database. And when you do the download you have two options here. You can select a native STK platform that you're gonna use for either Android Studio or Xcode or what have you, or you can use the Unity editor and that's the one that we wanna use because we're obviously using Unity. Then we'll click the Download button. It will download our database to our local system. There we go and you can see here we now have the TutsARDemo Unity package ready to go. That's going to contain that asset. So now that we have all of these things downloaded and ready to go, we can now get back into the world of Unity and start to build out our scene.

Back to the top