How to create an Augmented Reality App

hi in this video I'm gonna teach you how to create your own augmented reality app so this is where you can use your phone or tablet device to look at the world around you and when a certain object is recognized you can overlay an image or a video onto the surface of that object within the app so for example if you had a plain card like this isn't the Queen of Spades when you view it in the augmented reality app you might overlay a different playing card element instead or for example you might have a photograph in a frame here but when viewed through a lot vented reality app what you actually have is a moving a video instead now one of the difficulties of me trying to demonstrate an augmented reality app like this is that it's hard for me to demonstrate the difference between what's happening in real life and what's being overlaid in the app on the camera screen because you're already watching this on a screen anyway so I'm gonna try and show you that first sequence again but this time I'm going to show you it on my mobile phone screen which is running the app there so if I show you the card here so the card I'm holding is the Queen of Spades and hopefully you can see that in the main image there but on the mobile phone screen in real time what you can see is it's being chained into the King of Diamonds instead and I can rotate this card I can flip it up and down and I can move it around and it will stay in the tracked in that screen there so just in case you're at any doubts as to actually what you were seeing in that first sequence there that was all just showing the AR screen so I think that's enough of the demonstration let me get on and show you how you can create this yourself so the main piece of software we're going to be using is something called unity which is a game development engine which is used to making lots of different games so you can download it online from a unity 3d comm if you just click the get a unity button there's a couple of different choices here as to different license levels but assuming you're using as an individual and your income is under I think a hundred thousand dollars a year you can download the personal version which is for London here and when you've installed that downloader and you load it you'll get kind of a wizard like this so the download assistant got to next and you just have to agree to the Terms of Service first of all and then you'll get the choice of which target platforms you'd like to develop for unity sports lots of different platforms I'm going to be using the Android build support but you'd also compile for Apple products at Windows and Mac and Linux and lots of other things but the main thing you want to include is this one here that's of euphoria augmented reality support in addition to whatever platform you want if you four is built into unity but you do have to select to install it okay so when you first load unity this will be the screen you'll get which will prompt you to create some settings for a new project so we're simply going to call this demo a our demo I'm going to leave all the other settings the same and then just create the project and then when you find the workplace your new project it will look like this initially now there's quite a lot going on here and I'm not going to be able to explain all of the functions all the different windows in uut so I'm just going to concentrate on describing the steps that you need to take to actually create this project if you want to know more about generally how to use unity there's lots of good online documentation that you can find anyway so the first thing we're going to do is to create a new AR camera so you go to the game object menu view foria and then AR camera so this is going to be the sort of the view point through which we see all of the assets in the game and you'll get a prompt it says import view phoria if you for a requires some assets to be imported would you like to do that now yes well import days and that will set up all of the prerequisites needed to run the IRF in our project okay so here you can see down the bottom in this project window we've got some new folders being created and these are the the sort of the view forea assets that are needed now that we've got an AR camera in our project we don't need the main camera that was there by default so the first thing I do is I could just get rid of that so right click on that camera and click delete okay so we've got Mae our camera and the next thing we need to do is something called at an image target which is going to be the image that is going to be recognized in the real world and have some a our content superimposed on it so again we'll go to the game object menu enter view forea and this time to image and this has created the default image target which is this kind of astronaut card here which is one of the samples that comes with yuphoria and you can see over here in the inspector pane that says it's come from the predefined database called view for emails images well what we're going to want to do is to add our own target instead so click on the add target button and that'll take you to the view for a webpage now you don't actually need to use the web online while you're using the application but to set up the image targets it's kind of done via an online service so that's why it's gone to the view filter page here so I'm going to log in first of all if it's you haven't used it before you'll have to create a developer account but it's free to do say so there's there's no particular worries so I'm going to go to the develop menu and the first thing you'll need to do is to get a key for your application get development key if you're just in development and testing your application you can just get a development key if you move into production you might need to get a production license instead but to start with at least on these a free development key here which will be good for a thousand recognitions each month I think it is so so we'll just call it a our demo again exactly as we did before check the conditions and click confirm and then you will be issued your new license key or it can be quite a long kind of hexadecimal not even hex key actually sort of random alphanumeric key like here I need to copy that back into unity so if you select that whole thing there and copy it and then come back into your unity application and click on your AR camera and then open view for a configuration and right at the top here it says app license key if you paste in that long alpha value there so now let's go back to the pure online again and the next thing we're going to do is go to the target manager here so targets are added into databases so you're going to have to want one database for each of the projects you have and the database can contain several different targets so if you click on add database and create a new database for this project again I mean I'm going to just call them AR demo and we're gonna store it on the device and here we have our new empty database we're going to add a target into so there's different sorts of targets you can create depending on the sort of object that it's going to be placed on so you can have sort of abstract 3d objects cylinders like if you want to do it on a sort of a bottle of cake or wine bottle or somewhere that keyboard I'm just going to put a single image on here say I'm going to select here we have so I've got this is the video file I'm going to play this is the image file I'm going to replace onto my images but let me insert the thumbnail from the video screen thought that I want to place this is just a PNG file open that the width of the image is useful when you're tracking multiple targets it's going to give additional metadata to the program to know roughly how large to expect the relative sizes of different image targets to be which is going to help in lacking in unity one unit is normally one meter say this photograph is about 15 centimeters wide in real life so the width is going to be 0.15 and I'll just call it Kennedy just so I can distinguish that target from any others I might have in this database so that's my first image of target and if you click on that you'll see it's given a rating as to how good target the application that's gonna be and what it's done and this is why you use the online service if you go into that and click show features you'll see it's identified certain distinguishing features a lot of the facial features have actually been marked out here and also where there's high contrast like at the edge of the hairline into the background and so if you have a nice high contrast picture like this that's going to make a good image target to use and this it's got four stars which is which is pretty good as an image target okay go back to the database and we'll repeat that process again for the other target which is going to be the playing card so we'll do ad target again it's going to be a single image just browse to that and it's going to be the Queen of Spades we'll use this time and the width of this I think a playing card is about 6 centimeters wide so we're getting point 0 6 and add that to the database as well okay and that's got even better that's got 5-star rating so we've got 2 good image targets in our database next I'm going to do is to click to download that database into unity editor download it when you get the option here we're going to open it with unity editor and here we go and we get the import unity package so just click import there so now what we find is when we go back to the image target whereas before we were limited to using the inbuilt database of this view 400 miles images will now have our new a our demo library as well which we've just created online and downloaded and you'll see I've got the choice of the Queen of Spades or my Kennedy image so let's create the Kennedy one first of all so here's my image target and the next thing we need to do is to say okay well when this image is recognized by the AR camera what information or graphic do we want to be superimposed on the top for this one it's going to be a video image so I'll right-click on the image target go to 3d object and place a quad in a quad is like a simple 3d surface defined just by four points in the corners you can see normally they're sort of vertical quads rather than horizontal so they we're going to just rotate that around the x axis by 90 degrees that will make it line up with the photo and all say we it's a square at the moment it's it's one unit in size in every dimension so we're just going to scale the y axis down a little bit to make it match the underlying photo so I think point seven five that should be about right okay so we've got a blank quad and that record is what's going to display our video image now so still with the quad selected in the hierarchy I'm gonna go to add component and if you just type in video in this box here you'll get a list of available components and one of them is called video player so we'll go for that one and now of course we need the actual video clip that we're going to attach to that quad say the best way to insert assets into unity itself is to simply drag them into the project assets window which is over here so I have my my Windows folder that's just got my assets in it here and this is an mp4 video that I want to attack here without so I'm gonna just drag that into that window there and in fact while I'm here I'll also drag in the King of Diamonds which I'm going to use the image replacement on my playing card later so just to get that imported alright if you click on that here and then click the play button in the inspector you'll see the video playing now here so we know that that's all for today okay and we're now going to assign that to the video player component that we put on the cord so we'll click cord and scroll down a little bit to where the video player was that we just added and drag that clip into the video clip slot there okay we can keep all the other settings the same for now and that is our first image target setup so we just need to do a little bit of a little bit more configuration you'll see we've got a message at the bottom you must load and activate the database containing the target in view for your configuration so we imported a tag an image target from our new database now we just need to activate that in the unity program as well so click on the our camera and go to open view for a configuration and we want to load the AR demo database and also activate it so click these two buttons here um we don't need to load the sample database that came with yuphoria anymore because we're not using any of those assets so we can actually deactivate those and that will save a little bit of CPU time because it won't be checking against those image targets in the image so that I'll actually make a little bit more efficient and that should be all that is required to actually preview the program so if you now come up to the top and click the play button and you'll see the output of your webcam image which is over there if you now hold up your image target you'll see that it's been recognized and the video player component is playing that video over the chord that's been placed on the image target okay so now let's do add another image target for the playing card as well so it's going to be a similar process we're going to go back to game object again view forea and then image so that's exactly the same as we added our video and I'm just going to take hold of this handle here and drag this across to the side slightly so we couldn't see it slightly clearer again by default it's loaded up with this astronaut built-in image but we're going to change that so we're going to go to database a our demo and select the Queen of Spades which is the default there and then exactly as before we're going to now add the additional content that we want to be displayed when that image target is recognized so we'll right click on the image target and again we'll just make it a simple quad you can make more complex 3d models and things appear on top of an image target if you want but for now we'll just replace it with the court and rotate it by 90 degrees and this time we're just going to shrink the X scale down a little bit just to make it line up with the edges of the card we're just going to be about there now for this one rather than inserting the video player component what we're going to do is actually color or add a texture onto the material of that core itself so what we're going to do is in the assets window down the bottom here if you right-click create material and we'll call this new material King of Diamonds and then we're going to drag the text to the image of the King of Diamonds into the albedo slot of that material and then we're going to drag the material so you can see it's now displaying the material preview here which shows our King of Diamonds texture mapped onto a sphere we're now going to drag that texture onto the chord there if i zoom in a little bit here so you'll see now you can see the Queen of Spades which is the image target and the King of Diamonds which is going to be the chord that is displayed when they made two targets recognized kind of superimposed on each other now the only other thing we need to do we just need to go back to the v4 configuration again so click on the AR camera once more and then open configuration because by default before a lonely track one image target at once so to increase that we're just going to increase this value here to two and this value here to two as well and now we can test our two into targets together so if you click the play button once more and just wait for my webcam to fire up here we go so now we have our video image target there which is playing and if I also at the same time hold up my playing card target you'll see that I can get them being tracked simultaneously at the same time so that shows you the application working in the unity editor the next thing is to really look at how you'd then go about deploying that onto a device itself then the process for this is going to be slightly different depending on whether you're using an iPad or an iPhone or an Android device or something else so I can only sort of really show you the process which are used at the beginning which is on to an Android phone but it's largely similar to whatever device you end up using so the first thing we're going to do is to actually save the scene that we've created so far so I'll just do file save scene hours and then we'll just call it hey our demo I'll say that now once you've saved the scene we're going to go to file build settings and we'll add the open scene so the scene we just saved we're going to add it to the list of scenes that we're going to include in this build a build can actually contain several scenes we can think of as sort of the levels of a game but for this particular application we were only going to have one now in this panel here you'll see a list of all the supported platforms that you can build for depending on which platforms you selected when you first install the unity say I'm going to build it for Android so I'm going to click on Android here and then I'm going to click on the switch platform button and what that's going to do is that's going to go through all the assets that we've imported and used so far and that's going to recompile them as necessary so that they'll work on an android platform and when that's completed you'll notice the top of the title bar here now says that it's running on Android rather than PC and we're just going to change a couple of the settings for that Android device as well so click on player settings and that will load this panel in the inspector here which are settings specific to the build target which goes in at a moment so there's a couple of things you're going to need to change and a couple of things you might want to change so the first thing I'm going to do is expand this central at the bottom that says X are settings and we're going to enable View foreo augmented-reality in the next setting up we're going to go into the other settings section and where it says package name we need to assign a unique name that's going to identify this on the Android system and this needs to be in the format comm and then a company name or an individual name and then a dot and then the name of this particular program so that's the standard format used for identification and Android systems we're also going to change this setting here so it says Apr compatibility level we're going to change that from dotnet to whatnot subset to dotnet to point not and it just need to make sure that these boxes here Android TV compatibility and Android game are unchecked because it won't work if you're trying to deploy it with Android TV settings in your Android build so leave those off and finally you might want to change the name up here because this will be how the application appears in your Android menu on your device and you can drag an icon in here if you want to be don't actually to have to you that's kind of an aesthetic thing and when you've done all that and you're ready to go you can simply click the build button here in the build settings and this will prompt you for a name to call the AAP ki AAP ke package so as ever we're just gonna go for a our demo not very imaginative and click Save now you may have to install the Android SDK on your computer and their instructions on the unity website about how to do that this may take a couple of minutes to actually do the complex and you'll see here this is the apk file that that build process is just created it's quite large because it's got that video embedded in it and what you can now do is simply drag this onto your Android device as normal and open it and that will install the application onto your tablet or your mobile phone and then you can simply run it from there so there you have it that's how you can create your own augmented reality app running on a mobile phone or a tablet now I should be said that the software that I've shown you unity in v4 is actually capable of much much more than I've been able to show you in this tutorial and so if you're interested in doing more in that kind of area of virtual software kind of puzzles then please do check out more of what they're capable of most of the videos I've been doing up to now have been focused more on the electronics hardware side of things using Arduinos and electronic components so hopefully you found this interesting they're looking more at the software side of things as always if you've got any questions or if you'd like me to do more topics like this in the future then please let me know in the comments below and thanks very much for watching

Channel: Playful Technology

Views: 1,119,269

Rating: 4.9492202 out of 5

Keywords: Unity3d, Unity, Vuforia, Augmented Reality, Software, Tutorial, iOS, Android

Id: MtiUx_szKbI

Length: 24min 19sec (1459 seconds)

Published: Sat Feb 10 2018