Monthly challenge #2: Make an AR poster using Unity & Vuforia.

For the month of August, my challenge was to build an AR poster. By AR poster, I mean something like this:

example from Eyejack app

I’ve been following what the people from Eyejack have been doing and I really love their augmented art, so I wanted to try and make something a bit similar. Of course, I am not an artist so what I ended up making is definitely not as pretty.

It’s been hard to document the steps I took this month because I moved country and actually didn’t get many days to experiment with that, so I can’t share a day-by-day progress but I’m gonna try and share some links.


Process

I started by looking for some tutorials and found one to create a simple AR game like Pokemon Go.

After following it, I ended up with this prototype:

I found that Unity & Vuforia are quite easy to get started with, especially because the tutorial is pretty good!

After that, I actually didn’t do much for a while… :/ and a few days ago, I got back into it because I had a bit more time.

I started by trying to understand how the people at Eyejack were doing it. I knew that in Vuforia, you could add a custom image target, so you don’t have to use a predefined marker, you can use any image to be tracked and trigger an animation. I followed this tutorial to set that up.

Then, I started wondering how the animations were built; was it something like Processing? OpenFrameworks? AfterEffects?

I still don’t know for sure but I don’t think the animation is made with code, it has to be something done with a software like AfterEffects and then exported as a video overlaid on top of the “real” art; although, I’m happy to be wrong! :)

I personally struggled to understand how to use a video as texture in Unity/Vuforia but this tutorial helped me a lot!

What I was really impressed with, is how well the animation is aligned on top of the art and how seamless it looks… If you have a close look, the animations have no white background or anything, the videos must have been exported with a transparent background. I tried to replicate that but didn’t get it to work :(. A friend of mine helped me export an animation with transparent background but when testing it, a white background kept being added :(.

If it doesn’t make sense, here’s what I tried to do:

I designed a very quick poster.

And wanted to display a simple animation. I animated that with Processing and exported the video with a transparent background.

But ended up with this…

fail

So after trying a few times without success, I moved on to trying with another design.

New poster design

You can’t see the borders in that article but the black square is actually placed at the center of an A4 page. This new design allowed me to stop caring about having a transparent background because I could just overlay the video on top of the square.

And the result gave me this:

And I’m pretty happy with that!! :D

I wanna work on this more as I’d like to make more complex posters but for a few days worth of work, I’m really excited about the end result!

Also, as I am writing this, ARCore just came out and I really wanna give it a try as I’ve only been playing with Unity and Vuforia so far.

Anyway, here’s the repo if you wanna have a look! Also, if you’ve been doing some similar projects, I’m happy to hear about it! :D

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.