How I Built An AR Effect With 200K Opens

Yash Gupta
Refuse

--

At the time of publishing this article, Acid has over 200K opens. Which is pretty amazing — especially when it doesn’t quite have as many impressions yet.

Or ‘200K+’; as the internet tends to stop counting beyond round figures.

That’s right; this Instagram filter has been working so well for people, that it consistently gets more opens than impressions. Which (I assume) means that it has a lot of regular users.

And despite this being a good thing for my AR effect, it had been something I didn’t like for a long time.

Really. I didn’t like that this one effect had been so much more successful than every other Instagram effect I had made — combined.

Number of opens from every other effect, combined.

And the reason is that I was never going to release this effect. It was going to live as an experiment. This effect was a quick and fun experiment for me, while every other effect I had released previously, was more deliberate. I just happened to release Acid, because I happened to feel the need to release an AR effect, and be out of new ideas at the same time.

This reminded me that I was a bad judge; that I had wrongly optimized — wait, no — toned down other effects I had built, hoping to make them more accessible and neutral. As it turned out, Instagram (users) didn’t prefer neutrality as much as it preferred something that was extreme and experimental, even if it seemed to make very little sense from a design perspective.

And that made me feel like I never had the control I thought I did. That I was deliberately working against myself this whole time, while building all those other effects.

Acid reminded me that if I like something I’ve made, others would too.

Things To Learn

As unexpected as it may have been, Acid’s great performance means that I get to have first-hand experience with what works.

Now — I can never truly know (unless you tell me) what makes people want to try this effect; then use it over and over. What I can do though, is think about what I did differently with this effect in comparison to others, make some guesses, and hope that I’m close enough.

This is why I think Acid has performed so well:

  • Heavily Stylized: Acid is very stylized. It works with a few saturated colors, sharp contrast, and a lot of weird analog noise, which just happens to work right. People like art. It’s likely that being a creative effect is part of what makes people want to use Acid.
Acid destroys anything that dares pass through it — which looks nice?
  • It Just Looks Cool: I mean, that’s good enough of a reason for people to use an AR effect. That’s what almost all AR effects really do — make stuff look cool. An effect doesn’t necessarily have to serve another purpose. I think that Instagram’s AR platform has not even matured enough to allow it to a meaningful degree yet. Of course, you can attempt to build camera effects that do other stuff; but for now, you can only rely on Instagram’s AR platform to give you camera-toys.
  • It Looks New: AR effects that manipulate and play with color are super common. But when it comes to working with color, you can always build something entirely new. And that’s probably why Acid works. It doesn’t look like most effects you would find someone using on Instagram. People like new things (though not too new. More about this in this great TEDx talk by Derek Thompson, on YouTube).
  • It Obscures Your Face: Remember, how two bullet points ago, I pointed out that Acid is heavily stylized? It’s stylized so heavily, that it will partially obscure most things in the camera’s view. This includes faces; which might make it easier for people to take pictures of, or record themselves — should they hesitate otherwise.
Acid lets you show your face without actually showing your face.
  • Not a Face Effect: Acid isn’t a face effect. Acid renders everything in the same style. It could be your face, a failing space rocket, a squirrel, or — well, you get the point. It’s a camera that renders things in black, red, yellow, and (mostly) green. And that makes it usable in more ways than a face effect would be.
Acid works on all subjects: hands, synthesizers — you name it.
  • The Name Itself: The effect is called Acid, named after Acid Graphics; a style developed by a wave of contemporary designers — inspired by rave flyers, web-brutalism, and psychedelia; which this filter’s style is built upon. Maybe that’s one of the qualities of this AR effect that make people want to try it (although my hunch is that most users associate the name with the psychedelic drug and/or corrosive liquids).
The accessible name and the strong icon likely played their roles.

How I Built It

I’m not going to get into the specifics of how the application I used to build the effect works, because that’s a different topic. It’s called Spark AR Studio, and has a bunch of online documentation, should you need help figuring out how to use it. If you’d still like to see a short and digestible guide on Spark AR Studio, let me know.

Building this AR effect was pretty straightforward. In fact, it was simple enough that I’m going to cover the process in bullet points (Spark AR has an updated guide on using color LUTs within Spark AR Studio, on their website):

  • I created a rectangle that covered the full device screen.
I repeat: it covers the entire screen.
  • I extracted the camera texture by selecting the Camera object from the Scene panel, then clicking the plus (+) button next to Texture Extraction. This created a camera texture in the Patch Editor.
It’s that straightforward.
  • I imported a patch called FastColorLUT into my Spark AR project, and fed the camera texture into that module. I fed a color LUT I created with Snapseed into the other node, and fed the output from the FastColorLUT module as a texture, into a new material with a Flat shader-type.
We’re basically editing, then rendering the camera footage here.
A neutral LUT.

It’s an image, which contains a specific number of pixels. The color of each pixel in that image describes how a specific color will be recolored (or remapped to another color) upon processing an image through it. Every pixel in a LUT has a default color (a LUT containing default colors is called a neutral LUT), which is what image processing software compares your custom LUT to, before recoloring your image. As complex as that might sound, you won’t have to worry about any part of how it works.

The Acid LUT.
  • To create the LUT, I first imported a collage of people’s faces into Snapseed. I used a collage so I could check my LUT against different skin tones and a range of lighting conditions, without having to go through multiple revisions. I used Snapseed’s color-channel curves to build the look, and saved it as a preset within Snapseed. You can use Photoshop, or really anything else with RGB channel curves to do this. Heck, use DaVinci Resolve and you’ll still get the job done.
Point is, you can do it on a phone.
  • I then imported a neutral LUT into Snapseed, applied the preset I had just saved, and exported the modified LUT as a PNG image. This was the LUT I fed into the FastColorLUT patch(making sure that image compression on that LUT was turned off); and that was all I really did to translate a Snapseed preset into a LUT, into an Instagram effect.

--

--

Yash Gupta
Refuse
Editor for

Designer, writer. Brand and identity design @ Refuse