Develop An AR App

How to develop augmented reality apps with Vuforia for Windows 10 about:reader?url=https://blogs.windows.com/windowsdeveloper/2016/10...
blogs.windows.com
How to develop augmented reality

apps with Vuforia for Windows 10
12-15 minutes
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
1 of 17 7/6/2019, 6:45 PM
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:
2 of 17 7/6/2019, 6:45 PM
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:
3 of 17 7/6/2019, 6:45 PM
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
4 of 17 7/6/2019, 6:45 PM
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.
5 of 17 7/6/2019, 6:45 PM
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
6 of 17 7/6/2019, 6:45 PM
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:
7 of 17 7/6/2019, 6:45 PM
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
8 of 17 7/6/2019, 6:45 PM
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:
9 of 17 7/6/2019, 6:45 PM
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:
10 of 17 7/6/2019, 6:45 PM
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:
11 of 17 7/6/2019, 6:45 PM
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
12 of 17 7/6/2019, 6:45 PM
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
13 of 17 7/6/2019, 6:45 PM
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"
1 Background="#FFFFFF">
2 <Image x:Name="ExtendedSplashImage"
3 Source="Assets/SplashScreen.png"
4 VerticalAlignment="Center"
HorizontalAlignment="Center"/>
5
</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:
1 Next, change your XAML code to be similar to
14 of 17 7/6/2019, 6:45 PM
this:
<SwapChainPanel x:Name="DXSwapChainPanel">
<Grid x:Name="ExtendedSplashGrid"
Background="#FFFFFF">
2
<Image x:Name="ExtendedSplashImage"
3
Source="Assets/SplashScreen.png"
4
VerticalAlignment="Center"
5 HorizontalAlignment="Center"/>
6
</Grid>
7
<Rectangle Fill="#FFF3C000"
8 HorizontalAlignment="Stretch" Height="3"
9 Stroke="#FFF3C000" VerticalAlignment="Top"
10 Margin="360, 64, 24, 0"/>
11 <Image VerticalAlignment="Top"
12 HorizontalAlignment="Left" Margin="24, -80, 0,

0"
13
Width="300"
14
Source="Assets/SunglobePatrick26x2001.png">
15 </Image>
16
<Rectangle Fill="#FFF3C000"
17 HorizontalAlignment="Stretch" Height="3"
Stroke="#FFF3C000" VerticalAlignment="Bottom"
Margin="24, 0, 24, 64"/>
<CommandBar VerticalAlignment="Bottom"
15 of 17 7/6/2019, 6:45 PM
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
16 of 17 7/6/2019, 6:45 PM
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.
17 of 17 7/6/2019, 6:45 PM

Develop An AR App

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Develop An AR App

Uploaded by

Copyright:

Available Formats

How to develop augmented reality apps with Vuforia for Windows 10 about:reader?url=https://blogs.windows.com/windowsdeveloper/2016/10...

How to develop augmented reality

Augmented Reality is a way to connect virtual objects with the real

Vuforia is one of the most popular Augmented Reality platforms for

encourage you to follow the steps and build this yourself.

As we’ve noted, augmented reality is the creation of a connection

What are we going to develop?

Part 1: Getting started with Vuforia 6

The first thing we need is an account at

This is needed so we can get the free license key as well as a

You can download this front cover here:

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

2) Creating our markers

Once created, click the MagazineCovers entry in the database list

Now we are ready to add the targets. In the MagazineCover

to upload it and generate a marker:

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

3) Creating a new Unity Project

Start Unity, and from the project creation wizard, ensure 3D is

Then click Create project.

4) Downloading the Vuforia SDK

Once downloaded, you can simply double-click the packaged file to

5) Adding our Marker Database to our project

Go back to the Vuforia Developer portal, and click the Download

Select the Editor as the development platform and click Download:

Your solution should look something like this:

Part 2: Developing the app!

Vuforia uses a special camera called ARCamera, highlighted

1) Adding the ARCamera to our scene and configuring it

From the Vuforia/Prefabs folder, drag and drop the ARCamera

Next, click the ARCamera prefab to see its properties in the

b) Getting license key

c) Setting license key

d) Setting how many images to track

e) Setting world orientation

f) Loading our database

g) Testing the ARCamera

2) Adding our first basic marker

Markers are added to your scene using the ImageTarget prefab.

The way an ImageTarget works is that it can have child

b) Configuring the ImageTarget

First, set the Database to MagazineCovers, then set the Image

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

c) Spawning a boat on top of the marker!

Then, position/scale the boat so it fits on top of the ImageTarget

on top and will track if you move the marker.

Getting your experience running on a Windows 10 device will make

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

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

4) Testing the app

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

5) Adding a simple UI using XAML

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

1 Next, change your XAML code to be similar to

10 Margin="360, 64, 24, 0"/>

12 HorizontalAlignment="Left" Margin="24, -80, 0,

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

To sum up, we created an AR experience for Windows 10 with the

4) Exporting the Unity project as a UWP app for Windows 10

Download Visual Studio to get started.

You might also like