Friday, 7 November 2014

Unity 4.6 - Simple Tutorial, Vuforia Augmented Reality.


If you are planning to migrate your Vuforia project to the new Unity 4.6 uGUI system you will want to know a couple of things. You will not only take advantage of the new user interface tools but also the Event Systems and Raycasters. In this post I will explain briefly how to detect mouse and touch events over the Augmented Reality content.

Vuforia Unity Plugin is at the moment the best option out there to create multi-platform AR applications and definitivelly the easier to use. The guys at Qualcomm did a great job integrating the Vuforia plugin in the Unity editor in such a way that it is almost inintrusive in the Unity Engine itself.

In Mofables, we are working on an AR project using Unity 4.6 and Vuforia 3.0.9. In the future I will write about the experience of creating a Augmented Reality board game that uses a phone or tablet to work. So far it has been an amazing journey to the unknown, but it is still not finished and we have still much and more to learn. On the meantime I write this post to explain the how to create simple interactive setups.

Prototype AR board game ROAR!.


As I mentioned before in my post about Event Systems and Raycasters, we have multiple Raycasters to detect events in the Canvas (Graphic Raycaster), 2D Colliders (Physics 2D Raycaster) and 3D Colliders (Physic Raycaster). Once you place a ARCamera and some kind of Marker in the scene you can add a Cavas or Colliders to the Marker GameObject or any child of it.

Now I will details those 3 kind of Raycasters with a very simple example. I will not explain how to start with Vuforia from step one. If you don't know how to do it yet, come back when you can already see any kind of AR content any marker on your phone or tablet.

3D Colliders
 

You can detect interaction with any kind of 3D Mesh in realtime AR.


the Canvas (Graphic Raycaster), 2D (Physics 2D Raycaster) or 3D world (Physics Raycaster). - See more at: http://unitydojo.blogspot.com/2014/08/unity-46-simple-tutorial-new-events.html#sthash.2HAkEqeB.dpuf
the Canvas (Graphic Raycaster), 2D (Physics 2D Raycaster) or 3D world (Physics Raycaster). - See more at: http://unitydojo.blogspot.com/2014/08/unity-46-simple-tutorial-new-events.html#sthash.2HAkEqeB.dpuf
the Canvas (Graphic Raycaster), 2D (Physics 2D Raycaster) or 3D world (Physics Raycaster). - See more at: http://unitydojo.blogspot.com/2014/08/unity-46-simple-tutorial-new-events.html#sthash.2HAkEqeB.dpuf
the Canvas (Graphic Raycaster), 2D (Physics 2D Raycaster) or 3D world (Physics Raycaster). - See more at: http://unitydojo.blogspot.com/2014/08/unity-46-simple-tutorial-new-events.html#sthash.2HAkEqeB.dpuf
2D Colliders


Useful if you want to create an AR 2D game.


the Canvas (Graphic Raycaster), 2D (Physics 2D Raycaster) or 3D world (Physics Raycaster). - See more at: http://unitydojo.blogspot.com/2014/08/unity-46-simple-tutorial-new-events.html#sthash.2HAkEqeB.dpuf
the Canvas (Graphic Raycaster), 2D (Physics 2D Raycaster) or 3D world (Physics Raycaster). - See more at: http://unitydojo.blogspot.com/2014/08/unity-46-simple-tutorial-new-events.html#sthash.2HAkEqeB.dpuf
the Canvas (Graphic Raycaster), 2D (Physics 2D Raycaster) or 3D world (Physics Raycaster). - See more at: http://unitydojo.blogspot.com/2014/08/unity-46-simple-tutorial-new-events.html#sthash.2HAkEqeB.dpuf
the Canvas (Graphic Raycaster), 2D (Physics 2D Raycaster) or 3D world (Physics Raycaster). - See more at: http://unitydojo.blogspot.com/2014/08/unity-46-simple-tutorial-new-events.html#sthash.2HAkEqeB.dpuf
uGUI components


Perfect for Augmented UI or simply detect cliking on your Markers.


the Canvas (Graphic Raycaster), 2D (Physics 2D Raycaster) or 3D world (Physics Raycaster). - See more at: http://unitydojo.blogspot.com/2014/08/unity-46-simple-tutorial-new-events.html#sthash.2HAkEqeB.dpuf
the Canvas (Graphic Raycaster), 2D (Physics 2D Raycaster) or 3D world (Physics Raycaster). - See more at: http://unitydojo.blogspot.com/2014/08/unity-46-simple-tutorial-new-events.html#sthash.2HAkEqeB.dpuf
the Canvas (Graphic Raycaster), 2D (Physics 2D Raycaster) or 3D world (Physics Raycaster). - See more at: http://unitydojo.blogspot.com/2014/08/unity-46-simple-tutorial-new-events.html#sthash.2HAkEqeB.dpuf
the Canvas (Graphic Raycaster), 2D (Physics 2D Raycaster) or 3D world (Physics Raycaster). - See more at: http://unitydojo.blogspot.com/2014/08/unity-46-simple-tutorial-new-events.html#sthash.2HAkEqeB.dpuf
That's all! As you can see, there is almost no difference between using Vuforia and not using it when it comes to detect mouse and touch events. :)

I would be very happy to answer any questions you have. If you find any problems trying to detect events, please post a comment and I will try to help you. Would you like to know anything else about integrating Vuforia Plugin in your projects?

20 comments:

  1. Hi,
    I have tried just like this example, but it does not work. Do you have any ideas on what could be the cause?

    https://developer.vuforia.com/resources/dev-guide/unity-drag-ar-object-screen-your-finger

    ReplyDelete
    Replies
    1. Input.touches only work in mobile devices, or with the Unity Remote. It will not work in the editor. Are you using any of both options?

      Delete
  2. can you do a tutorial about that game board idea?, im developing in unity too, im new in AR, but i have done 1 or 2 apps with vuforia plug in its fun :)

    ReplyDelete
    Replies
    1. I will definitively write about it! :)

      In the meantime, you can know more about my AR board project, ROAR! here: http://roarthegame.com/en/

      Thanks a lot for showing interest and stay tuned! :D

      Delete
  3. hello, can xan you give us tutorial about floating text in unity using vuforia extension? when we move our camera the text will stick with the object and the text orientation will follow the orientation of camera. thanks in advance 😊

    ReplyDelete
    Replies
    1. Hello there!

      I will definitivelly add this idea to my blog posts. It is actually pretty simple thing to do! ^^

      On the meantime you can check this post: http://unitydojo.blogspot.com/2014/09/unity-46-simple-tutorial-health-bar-and.html

      What you have to do is check the part with the "Billboard effect". Adding a gameobject with the "world space" canvas and text as a child of your target/marker will make it follow the "real thing" then choose the AR camera as the camera to follow by the billboard effect and that's it! :D

      Delete
    2. it works, thanks a lot! :D
      by the way can i ask you more question? :D
      i cant zooming objet in unity vuforia, i tried using pinch to zoom tutorial from unity it doesnt work, maybe because the script contain "camera" wich is different from AR camera, can you give us tutorial about it? or at least zooming using button. thanks in advance again :D

      Delete
    3. Hello Abdurrahman! Good to see that you have it up and running :)

      About the pinch to zoom it can be a little more harder than it looks. You can read about it here: https://developer.vuforia.com/forum/unity-3-extension-technical-discussion/pinch-zoom

      The thing is that Vuforia creates a background picture with the input stream from the camera. Modifying the camera will not affect how you see the background picture since every frame is updated to fill the camera. You can however try to modify it manually and scale it up every frame on LateUpdate or something.

      Try running Vuforia on the editor and you will see that it creates this background picture on the fly.

      Good luck! :D

      Delete
    4. Okay, I can figure it now, i'll give it a try, thanks guys!

      Delete
  4. This comment has been removed by the author.

    ReplyDelete
  5. Hi can i peek with your 2D regarding with the event system, just want to see what magic you cast there hehehe if its just ok with you

    ReplyDelete
    Replies
    1. Hello Leed Almogbel!

      Can you tell me in more detail what do you want to know? Everything I did in this tutorial didn't require any code from my side :)

      Thanks for the comment!

      Delete
  6. hi can you help me with vuforia cloud reco setup in unity.

    ReplyDelete
    Replies
    1. Hello Awali Leonce!

      I'm sorry but I have never used cloud reco. All I can do is recomend you follow this steps that look very detailed! :) https://developer.vuforia.com/forum/faq/unity-how-do-i-create-simple-cloud-reco-app

      Delete
  7. Hi, Firstly congrats for you project.. it is amazing and works like a charms. I need some advice using Image Target in Vuforia with Unity. When it recognizes the ImageTarget the ARCamera shakes all the time... The ImageTarget is big and has 5 stars. I don't know why it shakes. Could you help me, please? Thanks

    ReplyDelete
  8. Such posts intrigue me very much.

    ReplyDelete
  9. Has top vetted Vuforia developers available for hire. Find the best freelance developer for your job or project — chat with us now.

    ReplyDelete
  10. As an Internet marketing strategy, SEO considers how search engines work, the computer programmed algorithms which dictate search engine behaviour, what people search for, the actual search terms or keywords composed into web indexes, and which web crawlers are favored by their focused on a group of spectators https://growth-loops.com .

    ReplyDelete