AR.js Supports Tango on A-Frame too!

How to build a Tango Application in 10 Lines of HTML :)

Recently we published a post announcing tango support For AR.js. Since then we have been busy, and we made it available to the A-Frame API. To celebrate i made a demo with hatsune miku. The muse of AR dancing in my living room 😀

Hatsune Miku Dancing in my living room!

Remember our crazy vision? AR.js enabling people to create “augmented reality in 10 lines of html”. Well, good news — it is valid for tango too! You can now write a full tango application with tracking and picking in only 10 lines of html! Thanks @superhoge for his great work on a-mmd which make it so easy to include hatsune miku!

Tracking and Picking ?

So this update provides tango tracking and picking… Cool, but what is it ?

  • Tango tracking means you get a markerless tracking. Robust, mature and efficient.
  • Tango picking means you can select position in the real world. So you can place virtual objects anywhere you want in the space e.g. you can put a virtual pet on your very own desk. You can put a video on your wall, a lot of crazy things like that!

Provide Best Tracking Available on Any Device

Did you noticed something on line 4 of the code above? It says “trackingMethod:best” and not “TrackingMethod:tango”. Let me elaborate on that. It seems like nothing, but it is directly related to one of our very important goal.

AR.js provides the best tracking available on any device.

Details on this principle and its implications can be found in this post. This mysterious “trackingMethod:best” is nothing less than the running implementation of this principle!

So if you run the above application on a phone, it always tries to provide the best tracking available on that phone.

  • If you use a tango device, AR.js will use tango tracking.
  • If you use a normal phone, AR.js will use pure-web tracking
  • And hopefully soon, if you use an ios device, AR.js will use arkit tracking.

Single Source for all Platforms

As a side effect, we got a single source for all platforms. A rather important element when you write applications. You don’t get to do a tango application, an arkit application, or even a marker application. You don’t have to write 3 applications for 3 different platforms. This is very time consuming.

You write your application once and it run on all platforms.


So, what do you think? Are you ready to try AR.js with tango and aframe on your very own phone? If you are, then don’t hesitate to share this post, and your experimentations via twitter! We love to see the awesome work that you guys are creating.

Until next time!