Making an AR poster employing Vuforia and Unity

When I began searching for a few Unity and Vuforia tutorials, I came across one for creating a subtle AR game like Pokemon Go. After following the tutorial thoroughly, the result was this prototype:

I have realized that Vuforia and Unity are fairly easy to start with, especially since the tutorial is rather good!

A few days ago, with more time in my hand, I started with the tutorial. First, I tried to figure out how people at Eyejack were implementing it. I was aware that Vuforia allows you to add a custom image target, eliminating the need for a predefined marker. This enables you to utilize any image for tracking and triggering an animation.

Following this, I began wondering how the animations were built; was it some tool like AfterEffects? Perhaps OpenFrameworks? Or maybe Processing?

Though I am still not sure, I do not think that the animation was created using code. It must have been something executed with software like AfterEffects, and later exported as a video layered on top of the actual art. However, I might be happily mistaken here.

Personally, the video has helped me a lot in understanding how a video can be used as a texture in Vuforia Unity .

The flawless alignment of the animation on top of the real art and its seamless look really impressed me. Having a closer look, you will find that the animation doesn’t have a white background, meaning that the videos must have been exported with a transparent background. I tried replicating the same with the help of a friend. However, a white background was repeatedly added to it during the testing.

To give you a better perspective, here is what I tried to do: First, I quickly designed a poster.

Wanting to display a simple animation, I animated it using Processing. Then, keeping the background transparent, I exported the video.

This is what I ended up with.

Without any success after a few tries, I moved on to experimenting using another design. New Design

Though the borders aren’t visible to you, the black square has actually been placed at the center of an A4 page. With this new poster, I didn’t have to worry about not having a transparent background as I could simply overlay the animation on top of the design. This was the result and I was quite satisfied with it!

I want to work more on this and create more complex posters. But, for only a few days’ work, I am really excited about the result. I also want to try the ARCore that has just come out.

To help you manage your rendering budget and reduce render costs, here are some tips and links to helpful resources:

• Setting the anti-aliasing very high should be avoided. Although a 2X setting can prove to be beneficial in reducing offscreen rendering cost, an anti-aliasing setting above 4X will cause significant deterioration in its performance.

• When using Unity, this setting can be changed under Project Settings -> Quality.

• When targeting low-end devices, you can rescale the distortion rendering size. It should be noted that, when executing high-end rendering, the texture size recommended by Vuforia to maximize quality can be detrimental to low-end devices. By programmatically rescaling the texture size, the FPS can be improved, though the rendering will be decreased.

• When using Unity, the distortion or offscreen rendering format is automatically selected to optimize performance for each platform. With iOS apps and native Android platforms, you can select the format for optical texture yourself.

• The distortion mesh in Vuforia offers a resolution that offers good performance across a wide range of devices. If you wish to create a smother or tighter mesh by increasing the resolution, you can tessellate the mesh by interpolating the provided texture coordinates and vertex.

• You may even be able to use advance GL/EGL extensions that are provided by GPU manufacturers, such as the OVR_Mulitiview that has been recently introduced, to enhance the stereo performance. opengl.org/registry/specs/OVR/multiview2.txt opengl.org/registry/specs/OVR/multiview.txt

• A constant high frame rate in sync with the display refresh rate is required by VR apps. This is generally 60fps on supported platforms. A significant variation in the frame rate is non-tolerable by users, possibly resulting in motion sickness. Thus, any non-rendering processing should be avoided in the render thread and all non-critical processes should be executed in a separate process.

You can make your own AR posters through these easy steps. Hope this was helpful!