How to develop augmented reality apps with Vuforia for Windows 10

How to develop augmented reality apps with Vuforia for Windows 10

Augmented Reality is a way to connect virtual objects with the real world, making it possible to naturally interact with them by use of mobile devices like phones, tablets or new mixed reality devices like HoloLens.

Vuforia is one of the most popular Augmented Reality platforms for developers, and Microsoft partnered with Vuforia to bring their application to the Universal Windows Platform (UWP).

Today, we will show you how to create a new Unity project and develop a real AR experience from scratch for devices running Windows 10.

You can download the source for this application here, but I encourage you to follow the steps and build this yourself.

As we’ve noted, augmented reality is the creation of a connection between the real world around you and a virtual world. One of the ways to make this connection is to use real objects like cards or magazines, and then connect them with virtual objects rendered on a digital interface.

What are we going to develop?
This article consists of two parts. In Part 1, we will get you up and running with Vuforia, an augmented reality SDK. This includes creating an account, configuring it and getting the SDK. In Part 2, we will develop an app that detects the front cover of a boating magazine, then render the boat on the front cover in 3D. You can then look around the boat and see it from all different angles.

Part 1: Getting started with Vuforia 6

The first thing we need is an account at https://developer.vuforia.com/.

This is needed so we can get the free license key as well as a place to upload our markers. A marker can be any image, and is used by Vuforia to connect a real world object with our virtual world. In this article, we will use one marker – an image of the font cover of a magazine.

You can download this front cover here:

1) Creating a license
After logging in click Develop, then Add License Key:

This will take you to a form where you can set the details of this license. They can be changed and removed later.

Fill it out like this, using your own application name:

2) Creating our markers
Now that we have a license, we can go ahead and create our markers. All of the markers can be added to a single database. Still in the Develop tab, click Target Manager and Add Database:

Fill out the form that pops up. It is needed to create a database for our markers. This database will be downloaded and added to your app locally – on the device itself – so select Device as the database type:

Once created, click the MagazineCovers entry in the database list to open it:

Now we are ready to add the targets. In the MagazineCover database view, Click Add Target:

A new form will show, where you will need to select the image you want to use, its width and a name. Select the magazine front cover I provided earlier, set the width to 8.5 and name it cover1. Click Add to upload it and generate a marker:

Once uploaded, you will see it in the database view:

Done! Next, we will create a new Unity project and add the Vuforia SDK to it.

3) Creating a new Unity Project

If you don’t have Unity yet, you can go ahead and download it here: http://unity3d.com/. A free personal license is available.

Start Unity, and from the project creation wizard, ensure 3D is selected and name the project “MagAR”:

Then click Create project.

4) Downloading the Vuforia SDK

When the project is created, we need to import the Vuforia SDK for Unity package. It can be downloaded from here (take the latest version): https://developer.vuforia.com/downloads/sdk

Once downloaded, you can simply double-click the packaged file to import it to your solution:

Once extracted, a popup like this will show. Click Import to add the Vuforia SDK to your project. Your solution should look something like this:

5) Adding our Marker Database to our project

Now that we have the Vuforia SDK installed, the last thing we need to do is to add the marker database we created earlier to our project.

Go back to the Vuforia Developer portal, and click the Download Database (All) button from your MagazineCover database:

Select the Editor as the development platform and click Download:

Once compiled and downloaded, you can just open the Unity package file to import it to your project:

You can see from the import dialogue that we got the cover marker, as well as the database itself. Click Import and you are all set to start developing!

Your solution should look something like this:

Part 2: Developing the app!

Now that we have the Vuforia SDK installed as well as the markers we need, the fun can begin.

Vuforia comes with a set of drag and drop assets. You can take a look at them in the Vuforia/Prefrabs folder as seen below:

Vuforia uses a special camera called ARCamera, highlighted above, to enable tracking of markers. Every Vuforia project will need this. This special camera has a lot of settings and configuration possibilities (which we’ll take a look at shortly), and will be able to detect real world objects using, in this case, the front cover of a magazine. Vuforia will then place a virtual anchor on the cover so we can get its virtual position and orientation for use in our virtual world.

Another thing we will need is the target itself. This is the prefab named ImageTarget, and it is also configurable. Let’s go ahead with the development.

1) Adding the ARCamera to our scene and configuring it

a) Add camera
From the Vuforia/Prefabs folder, drag and drop the ARCamera prefab into your scene to add it. You can delete the GameObject called Main Camera from the scene since we want to use the ARCamera as our view into the scene instead:

Next, click the ARCamera prefab to see its properties in the Inspector. This component is the heart of your application and requires some simple setup. The first thing it needs is your app’s License Key.

b) Getting license key
Go to the Vuforia Developer Portal, select your license and copy the entire Vuforia License key from that gray box in the middle of the screen:

c) Setting license key
Next, in the ARCamera inspector, paste the license key to the App License Key box:

d) Setting how many images to track
Another setting we want to verify is the Max Simultaneous Tracked Images setting – we want to have one cover magazine on the table at a given time, so make sure this is set to 1. This can be changed based on your needs:

e) Setting world orientation
Next we want to make sure that we orient the world around our camera, so set the World Center Mode to CAMERA to achieve this:

f) Loading our database
We also want to load and activate the Magazine Covers database, so tick the Load Magazine Covers, and activate it. 

g) Testing the ARCamera
At this point, we should be able to test our ARCamera – it won’t take any virtual actions but, if set up properly, we should be able to see the output from the web camera.

To test, click the play button on top of the scene view. You should be able to see what the camera sees and the Vuforia watermark:

2) Adding our first basic marker

Markers are added to your scene using the ImageTarget prefab. These can then be configured to your liking, as well as selecting what marker it will use for detection. In Unity, each item added to your scene is a GameObject – think of this as your base class. Each GameObjects in your scene can have multiple children and siblings.

The way an ImageTarget works is that it can have child GameObjects and, once the magazine cover is detected, these child GameObjects will become visible. If the card isn’t detected, the children will be hidden.

a) Adding an ImageTarget
Adding an ImageTarget is as simple as adding an ARCamera, just drag and drop the prefab to the scene hierarchy view:

b) Configuring the ImageTarget
We now need to configure which marker the ImageTarget will use. Select the ImageTarget and view its properties. Find the Database and Image Target properties.

First, set the Database to MagazineCovers, then set the Image Target to cover1:

You can see that it automatically populated some of the fields.

c) Spawning a boat on top of the marker!
Now – let’s spawn a boat on top of the marker! I purchased a nice boat from the Unity Asset Store. There are other boats available that may be free: https://www.assetstore.unity3d.com/en/#!/content/23181

Navigate to the folder for your asset, then drag it (or its prefab) onto the ImageTarget so it becomes a child of the ImageTarget.

Then, position/scale the boat so it fits on top of the ImageTarget (the magazine cover).

Looking at the scene view, you can now see the magazine cover with the boat on top of it:

d) Testing if it spawns
Let’s go ahead and run the app again. Place the magazine on the playfield (in front of the camera) and the yacht will become visible on top and will track if you move the marker.

e) Adding details
You can add even more things to the scene, like water, and can change the lighting so your scene becomes more realistic. Feel free to play around with it.

3) Exporting as a UWP

Getting your experience running on a Windows 10 device will make the experience even better, since your tablet has the ability to easily move.

To export the solution from Unity, go to File -> Build Settings:

From this dialogue, set the Platform to Windows Store and the SDK to Universal 10 and click Build. A new dialogue will ask you to select a folder to export to; you can create a new one or select an existing one – it’s up to you. Once the export is done, a new UWP Solution is created in the selected folder.

Go ahead and open this new solution in Visual Studio 2015.

4) Testing the app

Once Visual Studio 2015 has loaded the solution, set the Build Configuration to Master and the Platform to x86, and build and run it on your local machine:

Verify that the application is running and working as it should.

5) Adding a simple UI using XAML

Let’s also add a simple user interface to the app using XAML. To do this, open the MainPage.xaml file from the project tree and view the code. It should simply consist of a SwapChainPanel with a Grid in it, like so:

<SwapChainPanel x:Name="DXSwapChainPanel">
    <Grid x:Name="ExtendedSplashGrid" Background="#FFFFFF">
<Image x:Name="ExtendedSplashImage" Source="Assets/SplashScreen.png" VerticalAlignment="Center" HorizontalAlignment="Center"/>
    </Grid>
</SwapChainPanel>

You might also want to decorate the screen with a logo and some lines to make the UI look neat and clean. To do this, we need a file from the downloadable source (/Assets folder) called SunglobePatrick26x2001.png. Add this to your solutions Assets folder.

Next, change your XAML code to be similar to this:

Next, change your XAML code to be similar to this:
<SwapChainPanel x:Name="DXSwapChainPanel">
    <Grid x:Name="ExtendedSplashGrid" Background="#FFFFFF">
        <Image x:Name="ExtendedSplashImage" Source="Assets/SplashScreen.png" 
VerticalAlignment="Center" HorizontalAlignment="Center"/>
    </Grid>
    <Rectangle Fill="#FFF3C000" HorizontalAlignment="Stretch" Height="3" 
Stroke="#FFF3C000" VerticalAlignment="Top" Margin="360, 64, 24, 0"/>
    <Image VerticalAlignment="Top" HorizontalAlignment="Left" Margin="24, -80, 0, 0" 
Width="300" Source="Assets/SunglobePatrick26x2001.png"></Image>
    <Rectangle Fill="#FFF3C000" HorizontalAlignment="Stretch" Height="3" 
Stroke="#FFF3C000" VerticalAlignment="Bottom" Margin="24, 0, 24, 64"/>
    <CommandBar VerticalAlignment="Bottom" IsOpen="True" Background="#00000000" 
Foreground="#FFF3C000" Margin="0,0,18,0">
        <AppBarButton Icon="Edit" Foreground="#FFF3C000" />
    </CommandBar>
</SwapChainPanel>

What we’re doing here is using the XAML tags to add two rectangles, used as lines, for a minimalistic UI, as well as adding the logo for the boat.

Run the app again to see the UI on top of your rendering canvas:

That’s it! You now know how to develop AR applications for Windows 10 devices!

Wrapping up

To sum up, we created an AR experience for Windows 10 with the following simple steps:
1) Create an account at the Vuforia Developer Portal
2) Acquire a license
3) Created a Unity project using the Vuforia SDK
4) Exporting the Unity project as a UWP app for Windows 10
5) Added a simple UI using XAML

Download Visual Studio to get started.

The Windows team would love to hear your feedback.  Please keep the feedback coming using our Windows Developer UserVoice site. If you have a direct bug, please use the Windows Feedback tool built directly into Windows 10.

Source: How to develop augmented reality apps with Vuforia for Windows 10