Augmented reality, where the digital world meets the real world

Cody Pfitzner
Wolox
Published in
4 min readApr 6, 2018

--

Facebook’s AR Studio makes it look easy. Just watch a few tutorials paired with their downloadable content, and you’ll be making AR filters like a pro in no time. But, most importantly this program isn’t reserved just for coders (or designers for that matter), I believe it’s for all creative people, so if you haven’t already: download it here.

If you are like me, then you have come here searching for more answers. You have a big idea but no idea of how to make it happen, I was in the same boat. I urge others to share your experiences with AR Studio. In the meantime, I’d like to share 4 tips to make your lives a little bit easier.

Wait, firstly, here’s some context. I’m a designer at Wolox and had the opportunity to give AR studio a go. The objective was to create a camera filter for Facebook to celebrate the SXSW festivals. That one filter turned into a 5 in 1 filter, here are my 4 main tips as the result of first-timer mistakes. (You can check out the finished product here).

1. Planning

You need to have a solid plan. I was lucky to have a team to help brainstorm and create mockups for the filters I had to create. These 2D mockups of 3D filters were a huge help in picturing what I had to create. Sketch it or create it in illustrator, to start visualising your next steps: can parts be animated? How will the filter be activated? What will be 3D or 2D?

2. Stay organised

This is a big one and might seem obvious. Stay visually organised with file names and also keep the file sizes low. This includes anything you export in, from dae/obj files to you png assets. The worst thing that can happen is finishing your filter only to realise that you have to delete a lot before exporting, learn from my mistakes. Compressing all your assets can make all the difference also.

You can double check the file size by clicking export, the total should be under 20mb and the download value about 2mb.

Bonus tip: use face trackers to divide your different filters (if you’re doing multiple filters in one). Note: adding another face tracker doesn’t add another tracked “face”, only if you change the value “tracked face” to 1,2,3, 4 or 5.

3. Use online resources

Now, if you’re a master at 3D software, then your options are limitless. However, maybe you don’t have the time or you’re a rookie, like me, you can download free 3D objects online (Turbosquid, Cgtrader). Also, if you need something more customised, you can use this online 3D generator (Tinkercad) which to easily create 3D text and simple shapes. Don’t forget to take advantage of what AR Studio tutorials already give you. They have an ‘occluder’ which they used to as a 3D face mask so you don’t see objects (glasses/hat/headphone etc) through your head (you can find it in their very first tutorial), reusing this will save you time.

4. The Patch editor

The patch editor was pretty foreign to me. Even with some descriptions here and a developer on my team, cueing in, it still took me days to figure out. I wanted to be able to tap the screen to change filter and also have some animating parts. After one long night, I finally figured it out. Of course, things are only unfamiliar when you see/do it for the first time. Taking a step back. and actually understanding the logic, really helped. Below is specifically what I did.

To tap between multiple face trackers (filters)
To create an easy animated object using the position, scale or rotation values.

You don’t need to know how to code to animate. Sometimes, it just takes one late night to hit that “eureka!” moment when it all clicks together.

There’s so much to learn about AR studio, share your own tips. Now, stop procrastinating, get back to you AR project and just do it ;)

--

--

Cody Pfitzner
Wolox

Product Designer skilled in UX/UI, Illustration, and Motion Graphics | Interested in solving complex problems with design for a positive impact.