Augmented Reality Tutorial No. 32: User Interface for Augmented Reality using Unity3D and Vuforia (Incorporating Different Scenes)

Augmented Reality User Interface

In this Augmented Reality User Interface tutorial a simple UI was created using buttons.  Different scenes were incorporated in one app. In each scene it is possible to load next or previous scene with different 3D Characters. In each scene characters can be manipulated differently by changing position, scale or rotating.

Download # Unity3D (download and install it, if you don’t have it already) (*.exe file)

Unity3D is also available to download from here.

Download # Download and Import Unity3D Extension v5.0.5 (*.unitypackage file)

Unity3D extension is also available to download from hereThere might be newer version.

Download # Print Euforia of Beauty Logo to Augment Different Scenes and Create the Tracker (*.jpg file)

Download # You Can Use Already Created Tracker Based on Euforia of Beauty Logo (*.unitypackage file)

Download # Script for Buttons to Change the Scale, Position and Rotation of 3D Characters (*.cs file)

Download # User Interface for Augmented Reality Tutorial Project Files (the result to test it) (*.rar file)

Tags: , , , , , , , , , ,

42 Responses

  1. hello, i tried to make rotation button on adroid
    but its always looping
    the only way to stop it, is hold the button
    but if i release the button, its looping again

  2. hello..
    how can i make the button when click on it, the model will duplicate/added and another button that will remove the model..

  3. Hello,
    Is it possible to turn the buttons into virtual ones that can be pressed with your hand like you demonstrated in a another tutorial (No. 19)? I don’t succeed when I try to merge the code UI from this tutorial and the one of Virtual(Vuforia) buttons…

      • I thought it’s just because I’m a lame coder… Is there a way to extend interactions with virtual buttons (Vuforia-Unity)? For instance, jumping to a next scene or playing a video?
        Btw, thanks for all your tutorials, they are very helpful.

          • I will try until I make it, thank you very much!
            There’s one more issue no one could answer at vuforia’s forum: is it possible to trigger a whole environments in which the viewer can dive?
            Should I use extended tracking (the triggered image would be much bigger than the marker) and keep the image target active even when tracking is lost (can I just disable this function to keep it on even if I turn the device/camera in other direction)?
            I’ve read about different plug-ins like Unified Coordinate System that could help building augmented environments… Could you point a direction I should go?

  4. May I ask, what if there is two model in 1 scene? Because your tutorial only have 1 model in 1 scene. Then, what happened to the tag? Can I tag both of my model as Model?

      • I have tried set both character same tag name as Model, but it does not work.

        What happen is only 1 character that scale up and scale down when I click the button, the other one did not happen anything.

        I’m creating a scene that has two character, one person performing CPR and the other person is the patient. I need both character to scale up and scale down at the same time when the button is clicked.

  5. Hi, I did the same way as u did and everything worked. Just that the UI buttons will be on screen even when the image is not tracked. The UI Buttons would just stay at the last place it was tracked. I wanted to do when the image is tracked the buttons appear where the should and when is not tracked it would disappear. Please help. Thanks in advance.

      • Hi first thank you for your job ! sure i have the same problem i did everything but the UI buttons are on the screen doesnt matter, if canvas are in or out ImageTarget the result has same the ui button are always on screen.
        Please help. Thanks you.

      • I have the same problem as Nqb..I have tried making canvas as child of Image Target. But still canvas is rendered onto the screen even if image is not tracked. Can someone please help me out?..Thanks in advance

  6. Hey could you suggest any tutorials for using real world marker input instead of virtual buttons? The plan is to make an application which reads the position of a real world marker and responds based on it’s hovering over a real world button which is printed on the paper page instead of virtual buttons.

  7. I got same problem with Nqb, and i already put the canvas with buttons inside image target, but the result still same, the button still popped out when the marker is lost

  8. I have tried your tutorial but when I moved the object away from the camera, the interface stays on the screen but in angled position. How do you fixed this? Is this something to do with the script? Please let me know, thanks.

    • Same here! Would love to know how to fix it. So It can only pop up when you point towards the track. Already tried putting the Canvas inside Image Track, and it does not work. Thanks for the tutos!

  9. I find a solution for not disappearing canvas problem:
    Add these codes which after the “//” to \Assets\Vuforia\Scripts\DefaultTrackableEventHandler.cs

    Debug.Log(“Trackable ” + mTrackableBehaviour.TrackableName + ” found”);
    // gameObject.SetActive (true);

    Debug.Log(“Trackable ” + mTrackableBehaviour.TrackableName + ” lost”);
    // gameObject.SetActive (false);

  10. […] OK, so back to what we do next with is “interface with our characters”.   That’s right, I brought you to life, now speak to me!  Love me! Give me attention, Pooh Bear, I MADE YOU!   The user interface of augmented reality, especially for eyewear, is being developed now, and is ot yet ready, so, sorry but Pooh is still too dumb to play.  The technicians and UI developers are working closer than ever as we enter an age of seamless integration between the game engines like Unity 3D or Unreal and SDKs like Vuforia.  The SDKs help you get started from developer portal to final product.  Check out tutorial here.  Additionally, you can download Augmented Reality User Interfaces here. […]

  11. Hi thanks. Very good tutorial. This works on PC but on android does not work. Pressing the buttons on android does not happen

  12. hello, can you say is it possible to change 3d model in the app. For, instance I will press button “change model”-> I will have to choose object-> this object will be in app.

  13. Hey, congratulations for your tutorials, you helped to community.

    Do you have any sample with photo capture, when get de 3D Model.


  14. sir.. what is Model on augmented reality?
    name object?
    name scene?
    or what?

    public GameObject Model

    GameObject.FindWithTag (“Model”)

  15. When I first created the tag “Model” and ran unity, everything worked! However, I then added another tag and called ‘Model1’ and deleted my tag ‘Model’. I then realized that the tag ‘Model’ was part of the code. I added back tag ‘Model’ and assigned it back to my model. However, the buttons don’t work anymore. I only have 1 tag in my tags, and that is ‘Model. Please advise? Thanks!

    • Note: I just realized that the object is scaling (as being shown in the panel under Transform) but not scaling on the screen.

  16. Hi, thanks for this work you show us. I have a question, I have created two scenes with models and the buttons to scale, rotate and change scenes. In the first scene, I have no problem, the buttons work properly, but when I change to the next scene the buttons don´t do anything and the rotate buttons work but the are spin around, only works the previous scene button. As I did in the first scene y tagged mi model as “Model” so, I don´t know what´s the problem. Please help me with this. Thanks in advance.

  17. Hello,

    I created Userinterface according to your tutorial. All buttons except Scaling buttons are working fine. In the scale down button, If we keep on pressing, the model will be tilted at one stage and be zoomed. How can we resolve the issue to have scaling down at minimum level without tilting.