December 10, 2018
For my proof of concept/demo Vuforia Unity AR project, I created Cupid Tinder. Cupid Tinder is a little, Cupid-like creature that sits on top of your phone while you play Tinder. This demo version used screenshots from the Tinder app as the different image targets for Vuforia to project the Cupid character in an AR space.
We used the game engine Unity as our primary tool for composing 3D animations. This is because there are pre-existing assets we could use in our animations and because of its built-in support for AR/VR experiences. The Vuforia plugin allowed us to target and track images to use as our AR reference point. Below is a screenshot of me testing out Vuforia using a Bed, Bath, and Beyond coupon as the AR image target and rendering a Unity GameObject cube on top of that image target.
Gabe emphasized how an image target with many unique points and minimal repeating patterns produce the best image targets since it makes tracking the image and its dimensions easier. So I thought about potential image targets to use in this demo project and decided on the Tinder UI.
To the people who haven’t experienced the wonderful world of Tinder and are unfamiliar with the dating application’s UI, here is an example screenshot I took of the Tinder application:
I then imported the Tinder screenshots as Vuforia image targets in a Unity project and tested them with a GameObject cube.
I used multiple image targets because I could have different AR animations play on each profile (screenshot). Next, I used Adobe Fuse to generate a 3D model character to be the Cupid creature.
Fuse, however, does not include a skeleton or animations, so I exported the Fuse model to Mixamo for animating.
After downloading a few
.fbx Unity files of the Cupid creature performing sitting animations, I imported the model into Unity.
I placed the models slightly above each image target to account for the space between my phone screen and case. They also sit on top of the image target plane, utilizing Vuforia’s ability to project AR elements beyond the image target itself, to give a 3D effect (similar to Gabe’s DESCENT piece).
However, the character’s textures weren’t being rendered in Unity. This short Unity Mixamo YouTube video refreshed my mind on how to import the materials. I did end up repeating this process on each of my Cupid models (one Cupid GameObject per profile), which didn’t seem to be the most efficient approach.
I was then able to test the AR experience after all the Cupid models were loaded with their materials into their respective image targets and had their animations set to loop.
Some thoughts I have as I continue to iterate on this AR project:
A perpetual work in progress blog documentating my NYU ITP projects. Words are my own.