 Hello Today we will be doing a quick easy workshop on how to make an augmented reality app For your computer's webcam using image tracking. So all that this is is you know, if you have a picture and You want to have your camera recognize it and maybe display a 3d object over it This is the tutorial for you So we're going to be using a software called v4. Yeah, and on top of that we're going to be using Unity for this so this tutorial does assume that you already have Unity installed it does not assume that you have anything with v4. Yeah So to get started make sure you have unity installed. I recommend using the unity hub to install yours your versions of unity and I also would recommend when you're installing to have some kind of IDE or Text editor such as visual studio or visual studio code so now that we have Assuming we have unity Let's now get view for you. So v4. Yeah is our Engine to allow us to kind of handle this image tracking in AR So all we're going to do is go to the website developer dot view for you calm You can see it up top. We see if I can make things pretty for you There we go. Uh-huh. So now when I click things, you'll see a little yellow highlight. I'll be nice. Okay Yeah, so v4.com you want to go there and At developer developer dot view for you calm. You'll end up on this page Current events may not be the same at the moment that you show up at this page but You should have this bar at the top So the first thing you need to do is make an account. I'm currently logged in but if you are not logged in you will see up here, it'll say login and Register so you're going to want to click register and you're going to want to make an account It's very simple. You just make an account It may ask for what company you're with if you see that just type in Virginia Tech If that is the if you're a student of Virginia Tech Otherwise type in whatever you want. Frankly. I don't think it matters So once you've made your account, it's going to ask you for an email verification You're gonna have to click that and get that all set up But once you have your account You will be able to access this tab So I'm going to click now on develop So once you've made an account, you should see you should be able to click on develop and get to this license manager and this target manager You probably will not see anything down here. This is my license that I have right now for you to get a license all you have to do is click get basic and I don't think it's going to let me. Oh It's going to let me. Okay. Well, I shouldn't go through with this because I already have a basic But what you can do with all you have to do is just make sure you make sure you type a name here To name the plan all that means is it's just the name that you're giving to it so that you can manage all your different plans Call it whatever you want It does not really matter and then check this box and it will let you confirm Once you have done that but I have already made the license my license. I named my license all right, so we have our license on view for you.com and And the next thing we want to do is we're going to actually jump over to downloads So in here, you'll see SDK is selected and that's what we want to get We want to get the Vuforia engine Sometimes it'll keep hitting you with these pop-ups down here. We want to get the Vuforia engine SDK and so make sure it's set to 10.5 or whatever the latest version is at the time and All you got to do is so SDK blah, blah, blah, blah This first one unity add Vuforia engine to a unity project or upgrade the latest version. Just click on that say you agree and you will download a unity package that you will be using to make this happen so First step done. Okay. Now. Here's the next step. We want to In order for Vuforia to know how to track What images to track they actually have to build these databases and as far as I can tell a database from Vuforia is kind of like a set of images that The algorithm has run on to train so that it can recognize these images and at any orientation When we're picking an image that we want to be tracking We want to make sure that it is completely What is the term There's no way that it could be the same when reflected across Any line that we draw across it? So for instance, I'm going to show you a set of images right now that we can use Oh, they have to be completely asymmetric from every single angle is what I'm trying to say and We want to have a lot of edges an edge being a Area that an area between a light and dark area in the image So I'll give you some examples right now right now. I want you to go to I'm gonna make a new tab I want you to go to bit ly slash Vuforia Workshop Go there. It'll take you to a drive folder that I've shared and in there We have all three of these images You're gonna want to just download each of these images. It'll zip them if you download them all together. So I'm just gonna download each one at a time Come on Oh, it appears I already have them downloaded on this computer But yes, you want to download each of these and then once you have them all downloaded You're going to want to go back over to the v4 sdk Jump over back to the develop tab so again developer v4.com we're going to the develop tab and Right now we've we've created a license, but we also need to create our image targets. So we're gonna go to target manager and We're going to create a new database here. You can see I've already made some When we're selecting a target as I said before I'm gonna show this to you now with examples when we're Selecting a target. We want to make sure that it qualifies as both being asymmetric along pretty much any axis that you could look at it and That it has a lot of edges. So a great example is this one here called stones scaled That's in the set that I'm sharing with you. You notice, right? There's a lot of highlights next to a lot of darks These literally the edges between the bright and the darkness. That's what I'm talking about when I'm referring to an edge and There's a ton of them here and there's no way no matter which way you cut it There's no way that if I cut it like along this diagonal this side is different than this side There's there's no way it could be misconstrued as a mirrored image in any way if you looked at this image as a computer You could always tell the exact orientation of it. So It's not that hard to make an image like this Just take a picture of some scene with some a lot of light and dark in it and most likely It's going to be asymmetric. So Yeah, and it'll yeah, this is all you have to do I'm giving you some samples, but if you wanted to choose your own that is what you want to use In some classes that may be using this workshop You maybe asked to find your own So in that case again look for the edges and look for asymmetry so We have downloaded these I Have all of them downloaded. I'm going to make a new database to put each of the images into So to do that, I'm just going to click add database Gonna give it a name. I'm gonna call it my Workshop Images call it whatever you want. It doesn't matter I do believe they don't let you have spaces though So and make sure device is checked and then click create Cool, so I have my workshop images and you'll notice under targets. It says there's zero So all we have to do is click on my workshop images It will bring us to this page and You'll see we don't have any targets down here. So all we have to do is add them. I'm gonna go to add target I'm going to choose a file. So in this case the ones that we have let's choose stone scaled Okay, the ones that we downloaded and I'm going to add Let's see we have to give it a width So for width all this means and you can understand if you just read the text here but what it's effectively saying is that In scene units which in unity is in meters You want to give the size of the image when I show you the view from the camera later. You'll see I'm going to be holding up a piece of paper with this image on it and This piece of paper. I believe it's probably like 0.3 meters ish However, I Don't like the usability of that when I'm in unity I Kind of would like to have larger objects. It just makes my life easier And so having it so that my sheet is one is considered one a unity meter wide Makes it easier for me to determine the scale of my objects think of it this way if I Put a one here, which is what I'm going to do I'm telling it that my sheet of paper when it sees that image on the sheet of paper I'm telling it that that sheet of paper is one meter wide But what this means is When I'm in unity and I'm making an object And let's say I made the object You know three Unity units wide I'm effectively saying this is three pieces of paper wide which to me makes more sense Yeah, these are just specifics if you're working on a specific project or something Maybe where you want a life-sized something to appear when you look at an image You're going to want to keep track of this so If you do want a life-sized Object, I would definitely recommend typing in You know point three or whatever the conversion is of here 11 inches Yeah, so about point three point two seven nine so point two eight if you type that in you will Be giving the closest accurate Approximation For like an eight and a half by eleven sheet of paper But anyways, I'm gonna put one because it's gonna make our lives easier in unity since I can just think of every object I put as you know Being compared to the size of a piece of paper rather than being compared to a meter If all of that seemed like too much Just put one and it'll be fine Leave the name as is I'm just gonna add it Okay, and I am now gonna also add the rest of them. So add target choose file tarmac With one Yeah, it's all depending on the size that you want to use so and finally I will add the chips Okay, and I'll give it a one Add Okay, so now everything has been uploaded it says it's processing But if I was to refresh it would say it was done processing you'll see these have a really high rating So when you upload an image it will rate it on how good of a image targeted is These are the examples that view for you provides. So obviously they're gonna be five stars But again, the rating is determined off of asymmetry and edges So remember that Okay, so now what we want to do is download the database that contains these three images in an analyzed form So that's basically what's gonna happen when I click this button, which you can now click right now We want to choose unity do not have it set to Android Studio or any of this stuff unless you're building a mobile app and You'll see it's compiling the database so what's happening is it's analyzing these images and Kind of turning them into a data set so that it's just trained to recognize these images and you'll see we've downloaded the package of the database right here Okay, so now It's time to get these into unity so First things first let's make a new unity project. I'm gonna click new project in my unity hub. I'm gonna name it I don't know euphoria workshop video Okay, we will create the project and now it's gonna spin up everything's gonna take its time trying to get it all sorted out That's just kind of how this works Here we go and This is gonna be a little just a bit of waiting In the meantime, I Can cover I guess there's one thing we're gonna have to ready. So while we're waiting we might as well go over to our license manager and When you did the get basic earlier this should have shown up It may it'll have whatever name you gave it, but you should have a tag here It's like unity is still doing its thing You're gonna want to click on it and it will show your license key. I'm not gonna keep that on screen for too long But yeah, it will show your license key You will you might just want to click it right now Because when clicking it you see when you click it says caught copied a clipboard So yeah, and oh here's unity if you see it ask for an update You can just click the X. It's not really that critical as long as you're running unity 2020 You should be set and frankly, it'll probably work with 2019 as well. So anyway Just to get it back as blah blah It's a major for better visual studio integration. Ah tempting Not today. All right our next step is we want to import These we want to import view for you and we want to import the database that we've made so Very simple. How are we gonna do it? I'm just gonna go back to Chrome and I'm gonna drag and drop. I'm gonna take this one. Add beforeity view for you package. Actually, I believe I Don't even have to drag and drop. I think you just click it and it will appear In unity. Yeah, that's all I have to do just click on it If it's in your downloads folder, just double click on it. It will pop up. It'll say import and You'll make sure everything's checked It'll always be checked and then press import and then it'll pop this up and ask you to update You want to update? So we just wait a moment. Well, it does its thing Yeah, I'm running this off of a hard drive rather than an SSD. So you may fare better with your time wits Yeah Actually, did I move this to an SSD? I think I did Yeah All right, here we go. So now you'd notice under packages. There is view for your engine AR You'll notice if you go to window package manager But there is you for your engine AR ignore the rest of these these might not be there for you but the for your engine AR better be there and And what we want to do next is we want to import the database that we made So once again, we'll go back I'm gonna click on the database that we got mines called my workshop images and It'll pop up in unity Just click import and it's there. It's in Cool. You should see this streaming assets folder up here Okay, so we have them all in unity. We now need to get unity set up for view for you And it is as simple as this Click on the main camera and press the delete key in windows On Mac. I've heard you have to right-click Yeah And then click delete from the right click. So we've removed the camera. You'll notice when we go to game There's no camera left Because there's no camera to render the scene from we're going to add a special camera right now So I'm going to right-click over here in hierarchy Yeah, if you wanted you could also just go to game object before your engine AR camera In fact, I'll just do that game object before your engine AR camera. Oh I need to accept the software license agreement. So all we have to do is click accept Okay, there's a one other thing we'll have to do soon but anyways, we have our AR camera and We should also add our Image target That's what I was saying in unity we're going to end up having kind of like a picture of the picture that we're tracking and When the camera sees that picture it moves the virtual picture to be in the same place as it So all I'm going to do is I'm going to right-click here Once again, we could go to game object to do this but this time I'm right-clicking just to show you both ways We got a view for your engine I'm going to click image target and there you go. We have an image target here Okay, so there's one thing we have to do before we can even get before you're working and that is to Give it our license So I had us copy our license earlier. Let's use it. I'm going to go to window euphoria configuration and Right here where it says app license key. We're going to just paste it Now one important thing here is It says add license. Don't click that when you click that it adds another license We don't need more than one license So don't click add license. You're going to see the same thing happen all over the place add database Don't touch it For some reason the people who wrote v4a have bad wordings This shouldn't say add license. This should say add new license and this should say add new database We already have a database here Okay, one final thing you may want to do is if you want to have more than one tracked image at a time for a class project or something You will want to change max simultaneous tracked images to fit the number you want I can drag on this or I can just type it in I'm gonna type three in this case And yeah, that's all you need to do I would recommend that you scroll down and just take a peek make sure it says webcam here And make sure it says something that looks like integrated webcam or 1080p Something that is a camera that you're using. I have a lot of different webcams. So this is the one I'm intending to use All right, so now that we've set that up the next thing we want to do is Uh Probably you know just save I just pressed to control s on mac. It's apple s Just in case anything crashes all right Next it's time to Take a look at our image target. So you'll see I can select it down here, but we can't really see it We're pretty zoomed out. So I'm going to scroll with my scroll wheel and zoom on in And you'll see actually there's nothing to see here Um We need to make it so we can see this image right now. It doesn't have an image locked to it Uh, so all we're gonna do is click on image target You see what it says target image target behavior script And we're going to choose type change it from from image to from database Change database to our database name that we've imported And change the image target itself To whichever one we want. I'm going to use stones scaled and you'll see that it appears here now Okay, we're really close. We've almost finished All that's left is to Attach something to this object. So as I said One when we hit play when we hit this play button, it's going to track the Image in the camera view and it's going to move this virtual image to match the camera image What that means is that if we make an object a child of this image Using unity's hierarchy system It will move that child With the image So I'm going to I'm going to add a cube. I think that would be nice Let's just 3d object cube If you wanted you could import your own 3d models over here as an object and use that instead This cube is pretty big So I would like it to be a bit smaller. Maybe Point uh point 2 I'm just changing that in its scale properties And um, also I would prefer that it's at 000 That way it's centered exactly in this Sheet but we should probably put it a little bit above the sheet So I'm just going to kind of grab this handle and drag it until it's clearly above You know about 1.26 ish above. Yeah, I would recommend putting it above Otherwise you might have some weird artifacts happening. So I've just moved the y value up on the cube Okay So, uh, now that we have our cube attached to the sheet Might as well give it a demo. Oh wait But there's one thing we're missing Right now these are separate. I'm going to take the cube and drag it on to image target And you see now it's indented what this means it is a child Of image target and whenever Uh, whenever image target moves The cube will move exactly the same. That's how the parent child structure works in unity One other random thing to note never ever change the scale Numbers here for your image targets that will break everything. It just won't work Okay, so now that we have, um This all set up. Let's do a demo. Let's do a quick demo. Um, I'm gonna go to game view I'm gonna switch it to maximize on play so you all can see clearly And there may be a mic in my face. Let me grab my Sheet to show you Okay Let's Click play And you should see you should see a camera Is there something bugging out right now? You should see a camera. Oh But you don't see a camera because I am using obs to stream this Uh one moment Let me disable My use of camera. There shouldn't be a camera activated right now Uh Production to do okay I'm sorry for the for the delay just need to change a setting real quick To make sure this deactivates when not showing Okay, let's go back to this one And our camera's off fantastic. All right. So now We should be good This is an important thing if you have zoom open or something this will not work So this was evidence. Uh, I had obs open to record this and it was using my webcam. So Let's press play now that I have uh turned off obs using my webcam And you should see Me Awesome. So here we go when I move this sheet up. You see there is A cube on it Voila Cool. We can move it closer. We can move it further. There's a microphone in the way at this angle Uh, yeah, and you can always change the way the cube is lit. I can see right now that it's Uh, kind of looking very washed out and white Um, we can totally change that just by modifying how the lighting is working But anyway, you can see that it tracks Cool. So now what if you want to make it do things? All right, like we can have this cube just track on this, uh On this image, but what if we want to do more? What if we want to uh, for instance, make it spin? All right. Well, let's just make a quick script All I'm gonna do is go to assets and right click create C sharp script And I'm going to name this um Let's make it spin. Let's make It spin Let's make one for spinning. So I'm going to call this cube spin Okay Now I'm going to double click on it and it should open up in visual studio It could open up in something else for you if you do not have visual studio installed Your best bet might be to open it up in notepad Um, or text edit on a mac and you're just going to want to type in the exact things I type all right So, uh, this is unity scripting. I'm not going to go too in depth here, but Um, what I'm going to do is I'm going to write some simple code to make our cube rotate So I want to rotate the transform of the cube. The transform is what defines How the cube what how it's positioned in space. So I'm going to type lowercase transform Dot rotate And rotate asks you to transform it by a vector. So we need to make a vector. So I'm going to say new vector three And now we need to uh Construct the vector. Um, we want to rotate. I want to rotate mine side to side kind of like spinning around in a circle Like if I'm spinning around in a spinning chair so Uh, that would mean spinning around the y axis, which is the second axis here So first one is the x axis. So I'm going to put zero second axis is y So I'm going to put, uh, let's go like 50 how about 60 And uh, this requires a float. So I go point zero f to make sure the number is a float um, and I'm going to type zero f to define the final part and add a semi colon but There's an issue with this code If you've used unity before maybe you've spotted it right now. We are rotating Based on the frames of Unity's uh rendering. So the update function is called once per frame So right now we rotate this much every single frame. That's not what we want to do, right? If this is the case, then we're going to spin super fast on a really fast computer and super slow on a slow computer That wouldn't make sense. So good code. You want to make sure that it works the same on every computer. We're going to type times time Dot delta time And what this means delta time is the amount of time that has passed Since the last time you called time to delta time um Or I think it's the amount of time that's passed between each frames technically, but It comes out to the same Since this gets called a free frame so By multiplying this we ensure that no matter what system we're on it's always going to spin the same speed So we've made our spinning script. That's it. It's one line Boom, right save it. Make sure you save it and then hop back into unity It's going to reload your script assemblies And now we need to make the cube spin. So I'm just going to drag cube spin onto the cube And you should see that didn't work. Did I miss I may have missed I'm going to drag cube spin onto the cube over here boom And you see keeps been showed up here You could also just drag it into the inspector over here and normally you can even drag it and drop it straight onto An object. Let me ensure that I didn't drop it onto anything else Oh, I did I accidentally dropped it on the camera. Let's get rid of that Cool. All right Back to the cube we go. You see we've got cube spin on it and when I press run What do we got? we've got a Spinning cube. Oh, look at it spin. That's pretty fun Cool. All right now Uh, two things Two things are left First, what if we want to do something more interesting? What if you want to have it look like your object is hovering? Uh, this was requested from a friend. I think I'll add this as a script. So let's uh Let's add that. Let's make hover a script and take note. I haven't done this before so this is probably gonna look Rather bad So let's go make any script I'm gonna go to create C sharp script I'm gonna call this one hover Behavior. No, I don't want to use the word behavior. Just call it hover Okay, so for hover Um, I guess I just kind of want to have it bob up and down So let's open up our script by double clicking on it and um so Uh, quickly we threw together a little script here This is technically only two lines or actually three lines of code We have up here, you write vector original position original position equals transformed at local position Transform about local position equals and this is one line of code technically But I put an enter at different spots to make Uh, it more legible Um, yeah, take this time right now to freeze the screen and make it look however you want Note, I press to enter after this and after this These are automatically tabbed in to look, uh, just more legible. That's all that's going on. So yeah Feel free to pause right now. This is hover And uh, I will cut back out to show you what it's like So you take a look This is the hover effect It's just that the cube kind of goes up and down. It's just following a sine wave But I think it looks kind of cool Yeah so There's two different kinds of things you could do to your cube or your object or whatever you want to have Show up here again. All I did was just make a very simple script to make it move around all right So onto the final item. So what we have to cover today um You probably want to know, uh, how to have more than one of these going at a time So for instance right now, we only have one image But you remember earlier when we went to window before a configuration and we changed this number to three We might as well have three different images to track off of so Uh, and we can even have three different images and three different cubes I'm just going to click right click image target. I'm going to duplicate And I'm going to duplicate it again You'll see under each of these they each have their own cube Let's kind of drag them out so you can see them now separately. I'm going to zoom out a little bit. Let's drag one over here Let's drag another one over there Okay, right now. These are all the exact same image trackers. So these would all kind of Jump onto the same image if we were to, uh Just click run right now These would all jump it would look like the same as we've already been looking at because there's three different cubes There because there's uh, because they're all the same And they're all tracking to jump to lock on to the exact position of our stone image But what if we want to have different images? So for instance right now, I'm going to Take the cube another cube. I'm going to take image target one. Let's change its Image to not be stone sealed. What if it's tarmac and what if uh image two we change its image target to be chips okay, and um You know Maybe we want to teleport our cubes for instance Uh So that we can know that one of them is supposed to show up on chips and one's not so I'm just going to go to assets real quick I'm going to make create material blue Uh create material What's a fun color Or in no, that would be uva Uh, what's a fun color? Red Okay, and uh, this is just a quick thing. I've made a material like that. I'm going to choose on my color wheel. I'm going to make Oh, sorry. I want to make blue blue I'm going to go to red. I'm going to click on this little button up here and make this red This is not necessarily an important aspect. That's why I'm kind of rushing through it Um, but I'm just going to drag blue onto this one. Let's drag red onto this one So now we know each Uh picture should pull up a different colored cube, right? Cool And maybe we wanted to track more than one picture at a time We could have all these pictures and they'd all have their own cubes So, uh, let's just press run and take a peek at what this looks like Okay, so first We got what you've been seeing the whole time. We've got our bouncy boy And now let me pull up on my phone And image. How about the wood chips? So if I pull up the wood chips on my phone, I believe I should be able to get it to trigger There you go. What do you know? It's a red cube bouncing up and down at the same time as this white cube over here And if we wanted to change it Do we want a blue cube? Red cubes still stuck there, but now here's the blue cube Yeah, and you'll notice that what happens is when an image leaves the frame fast enough Uh, it leaves the virtual image behind Which is why we have three cubes floating in front of me right now because they didn't get dragged out of frame by They didn't get dragged out of frame because the tracker didn't didn't watch an image move out of frame So they're all just stuck here. So if you see this happening, it's normal. This is just how it works Okay You may consider making some code for when an object leaves detection To send it off screen somewhere else or to hide it So for instance, I can just point that out to you exactly where that is If we go to image target See on target lost You could write a script here That would cover that instance, so but yeah, that is the basics of Fiduciel and or image tracking and ar using your computer's webcam This should run even on a laptop. I ran it on my laptop that has no graphics card. It works just fine So, yeah That is it. Uh, thank you all so much. I've been alex krasner from Uh the virtual environment studio at the libraries of virginia tech and feel free to come by the virtual environment studio if you want to try out any vr headsets or VR games or if you would like to work on a vr or augmented reality um Project of any kind we've we've got you covered. So yeah, we're all up on the fourth floor of the library. So anyway Thank you for watching and have an awesome day peace