# Creating a Simple AR App

## Introduction to Vuforia and Unity for Creating Augmented Reality Applications

Vuforia Engine is the most widely used platform for AR development. It can easily be integrated with Unity.

Developers can easily add advanced computer vision functionality to any application, allowing it to recognize images and objects, and interact with spaces in the real world. &#x20;

The Vuforia Engine platform supports AR app development for Android, iOS, and UWP devices. See: [Vuforia Supported Versions](https://library.vuforia.com/content/vuforia-library/en/articles/Solution/Vuforia-Supported-Versions.html)

### Workflow

This tutorial will cover the creation of a basic application which **recognises ImageTargets** and **displays information** based on the recognition of those targets. The **basic process** of app development is to:

* Create a Unity Project
* Create a Vuforia License and Image Database<br>
* Add an Augmented Reality Camera
* Add Image Targets
* Add GameObjects as Child Assets
* Build Application

{% hint style="info" %}
Ensure you have **downloaded and installed Unity** and **created a Vuforia Developer Account**
{% endhint %}

### Create a Unity Project

Follow the steps outlined in the Unity Primer to create an example project.

![Figure 0.2 - Create a New Unity Project](https://1820679795-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LXautSvCbUco5Lv7YrH%2F-LYZpUMmRqEZgRZi00Pt%2F-LYZtb7o_FHECqqMd_1z%2FScreen%20Shot%202019-02-13%20at%202.12.46%20pm.png?alt=media\&token=0d20250b-4100-437d-a146-7a62d55f0a7b)

We have named our project `AugmentedRealityDemo`

### Vuforia Database and License Management

Follow the steps outlined in the [Vuforia Primer](https://ms-kb.msd.unimelb.edu.au/next-lab/augmented-reality/guides/unity-and-vuforia-1/creating-an-ar-app-in-30-minutes) to obtain a Development License Key and to create a **Target Database**. Our **Target Database** is titled `AugmentedRealityDemo.unitypackage`

**Import** the `.unitypackage` in to the newly created Unity Project.

![Figure 0.3 - Import the Vuforia Target Database](https://1820679795-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LXautSvCbUco5Lv7YrH%2F-LYZpUMmRqEZgRZi00Pt%2F-LYZrWCDgf2roVHox0mW%2FScreen%20Shot%202019-02-13%20at%202.15.51%20pm.png?alt=media\&token=89b9dc4f-3bba-4981-ac1c-7f365f62999f)

## The AR Camera

The first **GameObject** required to create an Augmented Reality app is the **Vuforia AR Camera**.

The **AR Camera** is located under the **GameObject** menu: `GameObject > Vuforia Engine > AR Camera`

![Figure 1.0.1 - Importing the AR Camera GameObject](https://1820679795-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LXautSvCbUco5Lv7YrH%2F-LYZpUMmRqEZgRZi00Pt%2F-LY_2IQUiA4Us5PNOJDW%2FScreen%20Shot%202019-02-13%20at%203.00.50%20pm.png?alt=media\&token=646b36f5-5a9a-40c9-898f-4384973c456a)

{% hint style="info" %}
During first-run, Vuforia Assets may take several minutes to unpack and install
{% endhint %}

The **ARCamera** will now appear in the **Hierarchy Window**.&#x20;

![Figure 1.0.2 - The Hierarchy Window](https://1820679795-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LXautSvCbUco5Lv7YrH%2F-LYZpUMmRqEZgRZi00Pt%2F-LY_2ZZftRqRGEBGh2ms%2FARCAMERA.png?alt=media\&token=58c4a5a0-64a7-4f01-98e7-5762503c2b4e)

When the **ARCamera** GameObject is selected, a **Camera Preview** window should appear. By default, Unity will use the computer's webcam as the ARCamera.&#x20;

![Figure 1.0.3 - Vuforia AR needs to be enabled](https://1820679795-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LXautSvCbUco5Lv7YrH%2F-LYZpUMmRqEZgRZi00Pt%2F-LY_1W0XKJQCmCYoVK-u%2FScreen%20Shot%202019-02-13%20at%203.05.05%20pm.png?alt=media\&token=e31d08de-5c51-437c-8234-c68065b8a0d6)

**Ensure** Vuforia is enabled in **Player Settings**:

`File > Build Settings > Player Settings > XR Settings > Vuforia Augmented Reality`

![Figure 1.0.4 - Enabling Vuforia in Player Settings](https://1820679795-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LXautSvCbUco5Lv7YrH%2F-LYZpUMmRqEZgRZi00Pt%2F-LY_1lhG6VnJRO2MZSJg%2FScreen%20Shot%202019-02-13%20at%203.06.41%20pm.png?alt=media\&token=6169ec21-615a-41cf-994c-9fa5c16b482f)

### Adding the Unity Development Key

With the **ARCamera** selected, click `Open Vuforia Engine Configuration` from the **Inspector window**.\
`Inspector > Vuforia Behaviour (Script) > Open Vuforia Engine Configuration`

**Copy and paste** the **License Key** created on the **Vuforia License Manager**&#x20;

![Figure 1.1 - Copy and Paste the Unity Development Key in to the App License Key Field](https://1820679795-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LXautSvCbUco5Lv7YrH%2F-LYZpUMmRqEZgRZi00Pt%2F-LY_4s0GKAIETAe6RvZF%2FScreen%20Shot%202019-02-13%20at%203.16.42%20pm.png?alt=media\&token=bba654fe-894c-4994-8e59-b7aebcd148e6)

**Click** **Debug** (The play symbol in the centre of the toolbar) to verify that the **Unity is able to access the camera**.

**Delete** all unnecessary **GameObjects** such as the `MainCamera` and `Directional Light`

`Hierarchy Window > Select > Right-click > Delete`

## ImageTargets

Image Targets can be added as children of the ARCamera by selecting the AR Camera in the Hierarchy Window and adding Images from the GameObject Menu

`GameObject > Vuforia Engine > Image`

![Figure 2.0.1 - Adding ImageTargets](https://1820679795-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LXautSvCbUco5Lv7YrH%2F-LYZpUMmRqEZgRZi00Pt%2F-LY_7QdsVzH0Q1-KO_hD%2FScreen%20Shot%202019-02-13%20at%203.30.26%20pm.png?alt=media\&token=58ec73f1-1b50-4feb-bd7d-b149d5afc372)

The **Image Target** can be changed within the **Inspector Window** drop-down menu.

![Figure 2.0.2 - Changing Image Targets](https://1820679795-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LXautSvCbUco5Lv7YrH%2F-LYZpUMmRqEZgRZi00Pt%2F-LY_7fOjcE7z_3X6OEKb%2FScreen%20Shot%202019-02-13%20at%203.30.44%20pm.png?alt=media\&token=351b69e6-ea3f-4bce-adf7-40c46cffc2f7)

You can duplicate the **ImageTarget** **GameObjec**t by `right-clicking` the object in the **Hierarchy Window** and selecting `Duplicate`.

For this tutorial, we have created **three ImageTarget GameObjects**, each with **a different Image Target**. (Bark, Stones and Tarmac).

![Figure 2.0.3 - Duplicating Image Targets](https://1820679795-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LXautSvCbUco5Lv7YrH%2F-LYZpUMmRqEZgRZi00Pt%2F-LY_8Ev9uhfY_mkPVUSD%2FScreen%20Shot%202019-02-13%20at%203.36.59%20pm.png?alt=media\&token=d85b1d8c-c9bc-4c01-af15-ecff7af44d27)

## Adding Content to ImageTargets

**ImageTargets** are objects which, when detected by the **ARCamera**, can display some type of **content**. This content can either be in the form of:&#x20;

* Assets downloaded from the Unity Store, &#x20;
* **.obj** files
* Assets built in to Unity such as&#x20;
  * 3D Geometries
  * Text

This tutorial will focus on adding **simple 3D geometries** and **Text** built in to Unity.&#x20;

To add a cube, head to `GameObject > 3D Object > Cube`.&#x20;

![Figure 3.0.1 - Inserting premade GameObjects](https://1820679795-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LXautSvCbUco5Lv7YrH%2F-LY_BVSKoTiIsRYtyDbZ%2F-LY_DnN5uspsEV9ltriV%2FScreen%20Shot%202019-02-13%20at%203.58.36%20pm.png?alt=media\&token=bc63ec09-7032-45ff-8fcb-409ca6c2f15e)

Ensure to **scale the object correctly** using the controls in the I**nspector Window**, and that the **GameObject** is a child of a particular **ImageTarget** in the **Hierarchy Window**.

![Figure 3.0.2 - Using the Hierarchy Window](https://1820679795-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LXautSvCbUco5Lv7YrH%2F-LY_BVSKoTiIsRYtyDbZ%2F-LY_DrQfRvkn9z8548bO%2FScreen%20Shot%202019-02-13%20at%203.58.17%20pm.png?alt=media\&token=ac7a07c8-813f-4614-be10-d52c228e6de4)

### Adding Annotations

Simple 3d Text can be added by heading to GameObject > 3D Object > 3D Text

![Figure 3.1.1 - Adding 3D Text](https://1820679795-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LXautSvCbUco5Lv7YrH%2F-LYdoWPUkF-jETVy3UwE%2F-LYdom2XU4NbzjL4RJYE%2FScreen%20Shot%202019-02-14%20at%2010.10.11%20am.png?alt=media\&token=0ead3116-4558-4e64-b63b-d8cd798575d7)

**Rotate** and **Resize** the text using the `Transform` functions in the **Inspector Window**.

This text should be made a **child** of either the `ImageTarget` or the `Cube` we have just created.&#x20;

As we want the text to show as an annotation of the `Cube`, we have made it a child of the Cube, by dragging and dropping the `GameObject` in the **Heirarchy Window**.

![Figure 3.1.2 - Using the Hierarchy Window](https://1820679795-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LXautSvCbUco5Lv7YrH%2F-LYdoWPUkF-jETVy3UwE%2F-LYdoqiFDv7D2VADrv_J%2FScreen%20Shot%202019-02-14%20at%2010.11.30%20am.png?alt=media\&token=95568564-2295-4bde-9a6f-d7afcac3deb7)

## Debugging

**Use the Play button** in the `toolbar` to **test the application**.

![Figure 4.0 - Debugging an Application](https://1820679795-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LXautSvCbUco5Lv7YrH%2F-LYdq2tYANFqDcsLvtUc%2F-LYdq9hM3DF9H0CoeBAq%2Far_demo_video_1.gif?alt=media\&token=cde00828-1e58-4228-b7ee-8e3650c5dc19)

## Importing Other Model Types in to Unity

Models can be imported in to your Unity Application in a variety of ways.

### Importing assets from the Asset store.

**The asset store** provides access to a library of **pre-made content** (both paid and free). This content is particularly useful to easily create animated figures.

To access the asset store, **click** `Asset Store` on the **Scene Window Toolbar.**

![Figure 5.1.1 - Importing Assets from the App Store](https://1820679795-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LXautSvCbUco5Lv7YrH%2F-LYdp89Qvs10tIsxRUU8%2F-LYdpFyOZk18JY5A85ai%2FScreen%20Shot%202019-02-14%20at%2010.42.33%20am.png?alt=media\&token=d7a209c1-2447-4636-8db7-d2fe4d453eb9)

You can search for free assets by using the cost slider. Download your asset and drag and drop it from the **Project Window**

![Figure 5.1.2 - Inserting Assets in to a Scene](https://1820679795-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LXautSvCbUco5Lv7YrH%2F-LYdp89Qvs10tIsxRUU8%2F-LYdpO6_ejsDdQakz-0F%2FScreen%20Shot%202019-02-14%20at%2010.44.09%20am.png?alt=media\&token=a2345c9b-54cd-4220-8bb4-95d2dcc438d4)

### Importing .obj Files

The easiest way to **import** `.obj` models in to **Unity** is by **dragging and dropping** the model files in to the **Project Window.** It is best practice to **keep these assets their own dedicated folder.** `.stl` and `.3dm` filetypes are **not supported** in Unity.

![Figure 5.2 - Importing .obj Files](https://1820679795-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LXautSvCbUco5Lv7YrH%2F-LYdpXQOIebDxL5ZptJV%2F-LYdpbDrb7NwDK00-sAy%2FScreen%20Shot%202019-02-14%20at%2011.09.39%20am.png?alt=media\&token=0f385e2d-183a-46d4-9cb4-f7edc7994c0b)

**See also: Creating and texturing .obj files in Rhino3d.**

### Final Output

This scene consists of assets built in to Unity,&#x20;

![Figure 5.3 - Final Output](https://1820679795-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LXautSvCbUco5Lv7YrH%2F-LYdpfcdxMa0fHBV3lp1%2F-LYdpynD0OJIhS9TBq7Y%2FAr-2.gif?alt=media\&token=b97c8c79-f223-4225-9720-b16c7b760c5d)

## Packaging Applications

Applications can be packaged for **different platforms**. Head to `File > Build Settings` and **select** the **desired platform**. Be sure to click `Add Open Scenes to Build`.

See the [Unity Primer](https://ms-kb.msd.unimelb.edu.au/next-lab/augmented-reality/guides/unity-primer#5-0-building-applications) for information on [Building Applications](https://ms-kb.msd.unimelb.edu.au/next-lab/augmented-reality/guides/unity-primer#5-0-building-applications)

{% content-ref url="unity-primer" %}
[unity-primer](https://ms-kb.msd.unimelb.edu.au/next-lab/augmented-reality/guides/unity-and-vuforia-1/unity-primer)
{% endcontent-ref %}

Vuforia only supports a variety of handheld and headset devices. Therefore, AR apps built with the Vuforia Engine **cannot easily be deployed on Windows or OSX**.&#x20;

See: [Supported Devices](https://vuforia.com/devices)

{% embed url="<https://vuforia.com/devices>" %}

{% hint style="info" %}
Note that **for iOS applications**, **OSX** and **XCode** are required.
{% endhint %}

## Going Further

{% content-ref url="vuforia-primer/interaction" %}
[interaction](https://ms-kb.msd.unimelb.edu.au/next-lab/augmented-reality/guides/unity-and-vuforia-1/vuforia-primer/interaction)
{% endcontent-ref %}

## Other Resources

{% embed url="<https://www.youtube.com/watch?v=HnjbTytHH6U>" %}

{% embed url="<https://gamedevelopment.tutsplus.com/tutorials/introduction-to-vuforia-on-unity-for-creating-augmented-reality-applications--cms-27693>" %}

{% embed url="<https://library.vuforia.com/articles/Training/getting-started-with-vuforia-in-unity.html>" %}
