How to Create an Instagram Filter on SparkAR

Last updated on: 2020

Content

Chances are many of us have found more time on our hands as we self-isolate and practice social distancing. If you find yourself bored, use this time to grow and enhance your skills. Thanks to the internet, learning how to create an Instagram filter is only a few clicks away.

The newest Instagram trend, custom filters, or AR (Augmented Reality) Filters have taken over the app by storm. Popularized by the “Which Are You” filter, which reveals which Disney character you are or even which Trader Joe’s item you are. Instagram has created a platform that boasts an extensive library of every effect imaginable. Wild, complex filters include warping faces, integrating three-dimensional objects, and animation.

Here’s how to create your own Instagram filter:

Most of the creators of these filters are Instagram users using a new programming platform created by Facebook called SparkAR. This program has created a specialized niché in the world of programmers and designers alike. Some of the filters take programmers several hours to build. A few basic types of filters can be created by anyone with enough patience and time. 

Create an Instagram Filter

Courtesy // @thepennyrobin

Spark AR offers templates for creators to work off and build their designs. Most templates still require the user to create 3D objects in other programs. Working backward to figure out how each function is performed is the easiest way to learn how to navigate the template. With this in mind, it is also recommended you watch a few tutorials provided in the learning center of the program. Other online resources like this youtube tutorial are also helpful.

(Although the title of the video is “Make Your Own Instagram Filter in 10 minutes.” Don’t be discouraged if it takes you longer. It seems the video doesn’t touch on the learning curve.) 

Steps for a Filter with Smooth Skin, Glasses, and a dynamic Background

  1. Download Spark AR (Available for MAC and Windows) and log in using your Facebook credentials.
  2. Create a new project or you can build off of a template provided in the app.
  3. The largest area is the Viewport. This is where you will view the filter in a 3D plane. The right top is the Simulator, which simulates the phone and how the filter will appear to the user. You can switch it to your device’s camera by clicking on the camera icon on the left. Lastly, on the left, is the scene panel. This is where you build out the filter’s settings.

Steps For Skin Smoothing

  1. Right-click “Focal Distance” – Add – Choose “Face Tracker”
  2. Right-click “Face Tracker” – Add – Choose “Face Mesh”
  3. Select Face Mesh – go to the right panel – Click “Material” – Create New – rename “smooth_mat”
  4. Dropdown menu on right-click – Shader Type – Retouching – Toggle the percentage to achieve the amount of smoothing you want

Steps for Adding Glasses or other 3D Face Objects

  1. Have your 3D File ready. Use Blender or any 3D modeling software to create or use from the 3D Object library on SparkAR. Also, have your 2D artwork to transfer onto the 3D model.
  2. Drag and Drop into Scene Panel under your “Face Tracker” – Name object (ex. glasses)
  3. Select “glasses”- go-to materials – create new material – rename “glasses_mat”
  4. Select “glasses_mat” – Right Panel – Shader Type – Flat. Check the double-sided box.
  5. Click Add Asset from Computer – Upload the 2D Artwork that will the design of your glasses – save the new texture as “glasses_design”
  6. Click on “glasses_mat” – texture – select “glasses_design”
  7. Right-click “Face Tracker” – Add new Face Mesh – place under original “Face Tracker”. Deselect eyes and mouth. Create new material – name “occluder_mat. This acts as a separation between your face and the glasses. Shader Type – Flat. Opacity – 1%

Steps for Creating a Background with Floating Objects

  1. Go to Focal Distance – Add – New Particle System – Drag to the very Bottom so it is not grouped with any of the other items.
  2. Change Transform Settings to:

*Position: y = -1.05 Emitter:

*Type = Ring *Radius = 2 7

*Birthrate = 35

*Spray Angle = x 40 10

*Speed = -0.05 40%

*Warmup = 45 sec Particle:

*Scale = 0.1 30%

*Lifespan = 45 sec 30%

*Spin = -45 0

*Tilt = 10 15 Force:

*Acceleration = 0x 0.05y 0z

  1. Material – Add New – Rename (ex. sparkles_mat)
  2. Texture – New Texture – Find 2D Objects you want to use from your computer – ex. sparkle – to create the effect of floating sparkles – Shader Type – Flat ( Using a white object is ideal because you can change the color after upload)
  3. Add canvas – add two rectangles – rename “user” and “background”
  4. Select ”user”- Go to size – Fill width and height. Repeat with “background.”
  5. Create a new material separately for both “user_mat” and “background_mat.”
  6. Camera – Texture Extraction – Click +. Segmentation – Click +. Which adds two new textures to the Scene panel
  7. Select “user_mat” – Select CameraTexture – Shader Type Flat. Alpha – Person Segmentation Mask
  8. Select “background_mat – Select color you want – Change opacity. Go to layers tab – add two more layers – rename “foreground, user, and background.” Select objects and assign them to corresponding layers.
  9. Select both user_mat and background_mat – Advanced render options – Uncheck Write to Depth Test – Sparkles will then appear Over your color Background

Have any questions on how to create an Instagram filter? Let us know below! Want to learn more tips on content creation? Check out our Creative page here.

Tags: , , , , , , ,
read more by
Jessie Mires