Custom Filters on Instagram

June 27, 2021

Last year I found out that you can have custom filters for photos and videos on Instagram. Everyone can use those filters for their own Instagram stories. These filter can be quite advanced. It is even possible to work with 3D Head Tracking and other fancy stuff. For the beginning I tried to make a basic filter that adjusts the colors of the image to give it a nice dramatic hot summer look.

Creating the LUT

First we need a LookUpTable that basically maps the colors of the original picture to the colors of the desired output picture. We can create one quite easily using Adobe Lightroom. In Lightroom I edited an arbitrary picture to have the look i want to achieve. Then I used the "Copy Settings" feature to transfer the changes I made to my picture to the neutral LUT. The neutral LUT is just an image which can be edited in Lightroom. The neutral LUT can be downloaded from below. Just right-click the image and save it somewhere.

neutral.png

Creating the filter

After exporting the modified LUT, we can jump into Spark AR Studio, Facebook's appliction for all this filter stuff. We open a new blank project and create a new canvas by clicking Add > 2D Objects > Canvas. Next we want to create a new rectangle that fills out the whole screen. We can do this by clicking Add > 2D Objects > Rectangle, then use the width and height options on the right to set the size to "Fill Width" and "Fill Height".

Now we have to use "Add Asset" on the bottom left to import our modified LUT. Make sure that you set the compression on all devices to "None" like shown below.

Anmerkung 2021-06-27 124902.jpg

We also have to import the Spark LUT Patch which you can download from here. Just download the ColorLUT.arp file and import it into your Spark AR project like any other asset. Now we want to create a new material by selecting the rectangle from the list on the left side and then click on the "+" icon in the "Materials" section on the right side of the window. Now we select the created material from the asset list and click on the small arrow next to "Texture" on the right side of the window. This should create an object in the patch editor. We also want to select the "Camera" on the left side and then click on "+" next to the "Texture Extraction" option.

Now we have all the asset objects we need in our asset section on the bottom left of the window. Drag all the assets into the patch editor and connect them like in the screenshow below.

Anmerkung 2021-06-27 131312.jpg

Deploying the filter

You can test the created filter by clicking on the "Test On Device" icon on the bottom left. This will send your filter to your smartphone where you can try it out.

Anmerkung 2021-06-27 131535.jpg

Once you are happy with the outcome you can publish your filter by clicking "Publish" on the bottom left. This will open Spark AR Hub in your webbrowser where you can give your filter a name and upload a sample video. When you are done it will take a few hours until your new filter has been reviewed. After the review it is publicly available.

sc.jpg

People can now visit your instagram profile and use your filter from the new tab in the middle.

Picture on the top by Oleg Magni on Pexels