Augmented Reality Subway Map with Unity 3D
Written by: Adham Farag, Agile Software Engineer, TribalScale
📫 Subscribe to receive our content here.
💬 Have any questions about our design capabilities? Click here to chat with one of our experts!
Augmented Reality (AR) is technology that has been around us for years now, whether it’s filters on Snapchat and Instagram, playing games like PokemonGo and Jurrasic World, or even fashion apps that allow you to try on clothes virtually, the possibilities are practically endless.
The idea
I have been using the TTC (public transit services in Toronto) since I landed in Toronto back in 2017 and like many others I’ve had my fair share of negative experiences, most notably getting lost. I wanted to find a solution to this problem and find a way to make my commute more fun and just all around more engaging. Being the software developer I am, I figured if I can’t find a solution that already exists then why not make one myself?
As a result, I created a working prototype of a hovering subway map on a Presto card (contactless smart card for public transit in Ontario, Canada) as shown in the linked video below.
Reactions and feedback
To give a bit of backstory, I was always fascinated by Snapchat and their work with AR filters and knew I wanted to create a useful augmentation of my own that could be used in day-to-day life. This was initially just a small app I created years ago but never actually published until last year when I shared it on LinkedIn. The post got a lot of traction with over 200,000 views, thousands of reactions, and hundreds of comments and shares from the LinkedIn community. I was very happily surprised by the public reaction, people were fascinated with the capabilities of AR and its practical uses. I got a lot of amazing feedback and suggestions to take it from a prototype to a working application with full features such as location tracking, integrations with the Presto API, and adding to the unique user experience that could one day be the norm for users interacting with real world objects.
The process
Now I’ll walk you through the process for creating this prototype.
What you’ll need to download to start:
Let’s first start by creating a new Unity 3D project.
Then import Vuforia Engine into your new Unity project.
Go to Vuforia to create a developer account (it’s free), then click the Develop tab in the top navigation menu. From there, click “get basic” then add a license name, for the sake of this project we’ll call it TTC-Presto.
Once you have that it should be added to your account, if you click on it you will see a license key, make sure to keep that hidden and to yourself. Copy the license key and add it to the Vuforia configuration in Unity.
Go back to your browser and under the Develop tab in the top navigation menu click on “Target Manager” and create a database. What this does is store the location of all the images that you want your app to recognize, in our case we will be using the Presto card image.
Click “Add Target” then upload the image you want your app to recognize.
You then want to download your database to the Unity editor as a .unitypackage file and import it.
You now have to go back to Unity and create a new image target, it will automatically detect the database you imported (as shown below).
Now you have your scene ready with the Presto card and all we have to do is get whatever overlay we want to be displayed on the card, here is where the TTC map comes in handy.
Import the image you want as a sprite (no background image) and drag it from your Unity assets to be a child of the image target. Also make rotation changes and resize as needed, it should look like the image below.
We’re done! Now you can click play and enjoy your AR project!
If you want to get this on an iOS or Android device, all you have to do is go to File -> Build Settings -> switch to whichever platform you want and click “Build And Run”!
Possible features for the future
Now we did just make something really cool, but what other possibilities can we add to this?
We can always connect some OCR to read the number on the back of the Presto card to give users their Presto balance using the Presto API and hover it over the card.
Unity also supports locations and GPS capabilities so we can add coordinates in order for users to find an estimate to their closest station and put a pin on the map.
Vuforia also allows us to interact with our AR models so users can zoom in and out. We could replace our image with a more detailed one based on how users are interacting with our model.
All great possibilities that we can always explore in a future post :)
Thanks for reading!
Adham is an Agile Software Engineer here at TribalScale. He loves building and discovering new technologies, is always open to learning something new, and is a firm believer that “if you can’t find something that does what you want, then you can always make it and learn in the process”.
TribalScale is a global innovation firm that helps enterprises adapt and thrive in the digital era. We transform teams and processes, build best-in-class digital products, and create disruptive startups. Learn more about us on our website. Connect with us on Twitter, LinkedIn & Facebook!
