Programming Tutorials

  • View all tutorials
  • ,
    Simple Augmented Reality Tutorial with Unity
    We're going to be using the Vuforia SDK Unity extension for the augmented reality portion of our application. We'll be creating a simple augmented reality application where a 3D object will appear based on a picture we provide our camera, then we'll be able to modify the 3D object using virtual buttons. You'll need to download the following things for this project:

    Installation

    1. Unity This is the game engine we'll use to create our game. 2. Vuforia Unity Extension This Unity extension provides us with everything we need to create augmented realty applications.

    Setting up our scene

    The first thing we'll do is open up Unity and create a new project called tut_AugReality. Then go to Assets > Import Package > Custom Package and select the Vuforia Unity extension you downloaded which should be named something like vuforia-unity-android-ios-x-y-z.unitypackage After importing this, in your Project window go to Assets > Qualcomm Augmented Reality > Prefabs and drag the ARCamera prefab onto the scene. Delete the old Main Camera from the Hierarchy window. Then Drag the Image Target prefab onto the scene as well. The Image Target prefab should create a white square in the scene. Scale this square down to 50 in the x, y and z directions and place it within the ARCamera so that your scene and Camera Preview look something like this:

    Creating targets for our camera to recognize

    Our augmented reality application needs to know when to create our preconfigured 3D scene whenever some specific target comes into our phone cameras view. We're going to be creating an image target for this application, but in other tutorials we'll cover 3D targets, text, frame markers, and other targets. You can read more about Vuforia targets here. To create a new target go to this link: https://developer.vuforia.com/target-manager 1. First create a database and name it something, this is where all your targets will be stored. 2. Then, within your database, click Add Target and choose Single Image and select some image from your computer and name it FirstTarget and give it a width of 30 (the image must be equal in its width and height dimensions). I'll be using this image. 3. When your image is created, select it and press Download Selected Targets and select Unity Editor and give your Unity package a name. Now go back into Unity and go to Assets > Import Package > Custom Package and select the target pacakge you just downloaded. Then select the ImageTarget in the Hierarchy window and in its Insepector window you should now be able to select your newly created target in the Image Target Behavior Component. Then select the ARCamera in the Hierarchy window and in its Insepector window select Load Data Set and Activate in the Data Set Load Behavior Component.

    Creating the 3D scene

    Go to GameObject > 3D Object > Sphere, scale it to 0.8 in all directions, place it on top of the target image and make the sphere a child of ImageTarget in the Hierarchy window. Then create a simple directional light by going to GameObject > Light > Directional Light and position it above the sphere so your scene should end up looking something like this: Now in the Project window go to Assets > Qualcomm Augmented Reality > Prefabs and drag the VirtualButton prefab onto the scene. Make the button a child of ImageTarget in the Hierarchy window, scale it to x=0.2, y=1 and z=0.2, copy and paste the button and name the buttons Blue and Red in the Hierarchy window and in their respective Virtual Button Behavior Components in the Inspector window. Then create two cubes and make them children of ImageTarget, scale them to x=0.1, y=0.05 and z=0.1 and position them on top of the buttons. Finally move your sphere back slighly so that your scene looks like the following so far: So we have our buttons that we'll be using to manipulate the sphere, the last thing we need to do is specify what we want changed when a button is pressed. Select ImageTarget in the Hierarchy window and in the Inspector window select Add Component > New Script and name it VirtualButtonEvent and select CSharp. Then open the file and paste the following code. (gist.github)
    using System.Collections.Generic;
     
    public class VirtualButtonEvent : MonoBehaviour, IVirtualButtonEventHandler {
     
      private GameObject Sphere;
      
      // register buttons for event handling
      void Start() {
        VirtualButtonBehaviour[] vbs = GetComponentsInChildren<VirtualButtonBehaviour>();
        for (int i = 0; i < vbs.Length; ++i) { vbs[i].RegisterEventHandler(this); }
        Sphere = transform.FindChild("Sphere").gameObject;
      }
      
      // button is "pressed" so change color of Sphere
      public void OnButtonPressed(VirtualButtonAbstractBehaviour vb) {
        if (vb.VirtualButtonName=="Red")  { Sphere.renderer.material.color = Color.red; }
        if (vb.VirtualButtonName=="Blue") { Sphere.renderer.material.color = Color.blue; }
      }
      
      // change Sphere back to white
      public void OnButtonReleased(VirtualButtonAbstractBehaviour vb) {
        if (vb.VirtualButtonName=="Red")  { Sphere.renderer.material.color = Color.white; }
        if (vb.VirtualButtonName=="Blue") { Sphere.renderer.material.color = Color.white; }
      }
     
    }
    

    Building the application

    We're now ready to run our application on a mobile device. Click File > Build Settings. 1. Click Android and press Switch Platform. 2. Click the Add Current button to add the current scene. 3. Click the Player Settings button and in Resolution and Presentation > Default Orientation select Auto Rotation. 4. In Other Settings provide your game with a Bundle Identifier such as com.aug.application After building is complete you should have an apk file in your folder that you can run on your device.
    mrdaniel wrote this tutorial on 7/14/16 | unity
    Comments
    Login to submit a comment