Building A Fun AR Filter In An Hour

Matt Alcock
Apr 20, 2018 · 4 min read

This post outlines how you can create an advanced face lens/filter using Facebooks new AR Studio in less than an hour.

Previously face recognition and Augmented Reality (AR) apps would take developers months if not longer to build. Now with the advancement of tools by Facebook (AR Studio) and Snapchat (Lens Studio) building these fun face filters is super easy and most importantly very accessible to creatives and marketing teams looking to take advanced of this new technology.

Getting Started

First of all, you need to download the AR Studio from Facebook from here. It is currently only available to Mac users. Facebook opened up the AR Studio to all developers and creatives in December 2017.

Face Mesh Tutorial

The AR Studio team have made some fantastic tutorials and I have adapted the sharpie mustache tutorial to show you how easy the complete experience is. If your keen to build more advanced experiences I really recommend reading all the documentation facebook has put together here.

https://developers.facebook.com/docs/ar-studio/tutorials/quick-start-guide

Building Your Own Texture

Once you are all installed, setup and have watched the short getting started tutorial you need to build your own texture. I’m a massive Golden State Warriors fan and therefore decided to make a face-paint filter. I can extend this further with more advanced effects and graphics over time but to get something done in the hour I stuck to basic blue and yellow stripes.

I used Sketch to build the texture file. As you can see above, getting the dimensions, file size and layout of the stripes wasn’t easy and took some trial and error. The final file size that worked well was a 1024 x 1024 png file I exported from Sketch as seen below.

Publishing

Once complete you can publish your AR filter using the new Facebook camera effects manager. This helps you with targeting the filter and managing any geofence you want to use.

The magic link to that publishing tool is here: https://www.facebook.com/fbcameraeffects/manage/

You need to provide the following when submitting the lens.

  1. The exported AR studio file
  2. A name, owner and description of your new lens/filter.
  3. A video capture of you using the filter. See the first video in the post.
  4. An icon for the new effect.
https://developers.facebook.com/docs/ar-studio/design/effect-icons
My Sketch file for the filters logo.
FB camera publishing tool interface.

Complete Face Filter

Once approved you can find the lens using the facebook camera on mobile. My new filter was all the way to the right of a very long list of filters.

Filter discovery is still an issue but it was amazing to see it there so quickly. Maybe 15 minutes after publishing. See the filter icon on the bottom shelf and it in use on my iPhone below.

Loaded on Facebook Camera via Mobile Interface

Note, I could not find a way to load these filters into Facebook instant messenger, Instagram, WhatsApp or Facebook Live. I believe they are currently tightly controlling the filters added to these platforms.

Couldn’t load the filter on Live, Instagram, Instagram Stories or Whatsapp

There are some filters available on Facebook Live but not all of them. Maybe the publishing process for Live is more advanced or takes time to propagate.

Conclusion

It is amazing how fast, easy and effective it was to generate an AR experience using this toolchain. No coding was required and I can see it being something that creatives would love to use. Facebook and Snapchat are thinking about content creators first with these new tools and that’s fantastic to see. As more content hits these platforms, more AR experiences will be built generating a virtuous cycle that can only promote more AR research and exposure.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade