Tutorial: Building an AR poster with Unity, Creative Cloud and Vuforia
This project will allow you to use Unity’s visual effect graph to create a stunning AR poster. This tutorial assumes you have an intermediate knowledge of Unity, and are familiar with node based editing programs. Unity Learn is available free at the moment, so feel free to familiarise yourself with Unity there and come back to this later.
You will also need a powerful mobile device to render this project in AR. I’m using an iPad Pro, and even this struggled at times.
With that said, let’s create a wild AR poster!
1. Create a new Unity project
I used Unity 2019.3 for this project, and started with the default Universal Render Pipeline template. This allows for the use of ARFoundation, Vuforia, Shader Graph and the Visual Effect Graph in the same project. Make sure you go to the Package Manager and install the Visual Effect Graph and Vuforia.
2. Build your visual effect graph
This is not a visual effect graph tutorial, however I will share my process for this particular graph.
I started off by looking for inspiration, to make sure my VFX graph isn’t just another mindless particle system.
Since the VFX graph is essentially a super-powered particle system, I looked at examples of particle inspired art. I’ve also been pushing myself to include geometric patterns in my creative coding, kind of like white walkers, and stumbled upon the incredible Japanese artist Hiroyuki Doi — http://www.doi.muenchina.com .
Deconstructing this artwork, I saw that it is built from a sphere and 4 toruses staggered on the z-axis. Instead of particles, Mr Doi is using hand drawn circles, which I recreated with unlit spheres with a slightly transparent unlit texture. This runs the risk of the artwork looking lifeless since it’s no longer interacting with any light, but I felt the life of the particles would discount this. Feel free to experiment with a variety of shaders and materials, and note how they impact performance.
If none of that made sense, or if it made sense but you’re having trouble implementing it, just do this a few times and tweak the position values.
A useful way to look at a VFX graph is to imagine it as a C# script. You have your start/instantiate methods taking parameters, an update method to tell the methods where to send things and control over what’s being instantiated. I apply this thought model whenever I’m deconstructing VFX graphs to implement in code or doing the reverse.
3. Set up Vuforia
Once you have the Vuforia package installed, head on over to https://developer.vuforia.com to create yourself an app license. You can create a free dev account, which should provide you with an app ID. Head back to Unity and go to GameObject > Vuforia > AR Camera and drop it into your scene. This AR camera will have a configuration component that will ask for an app ID to be pasted in. Paste your app ID in this section. Delete your old main camera. You can now build this project to your device (remember to make your OS minimum high and update your usage descriptions). When built to your device, you can see how your VFX look in AR. This will help you design your poster and let you make any changes to your effect before you design your poster.
4. Creating the poster
I won’t spend too much time on this section. I always take inspiration from designer Vasjen Katro ( http://baugasm.com) when designing posters, and used Illustrator’s mesh tool to create a colour wave and laid out the assets in Photoshop. Consider how feature rich your poster is: Vuforia is a computer vision platform that needs well defined and unique features to allow for easy recognition.
5. Creating the AR poster
On the Vuforia developer portal there is a place to upload your targets. Upload a low-res JPEG of your poster. When this is done, Vuforia will give your poster a star rating for how effective an image target it will be. For reference, my poster got five.
Download this database and drop the file into your project. Then go back to the GameObject menu, go to Vuforia and drop an Image gameobject into your project. Then drop your visual effect as a child of this image. I also put a quad with a black material over the image target to provide dark contrast for my AR poster.
Build your project to your device and test your AR poster. I just darkened the Photoshop interface and used my screen as a poster, but a printed version is the most fun. Hopefully it looks something like this:
That’s it!
Hopefully this has helped you with creating AR posters with Unity’s VFX graph, and I look forward to seeing your creations in the feature. Thanks for reading.
