Skip to content

how to create an augmented reality filter for Instagram

The new Instagram filters have been a total success and they have unleashed the madness among the users of the social network. Much of the community has been desperately searching for new and better filters for their stories (like all of these), and more and more are being created every day.

This has led us to wonder Will it be very difficult to make your own filter? A question that has been around our heads for days, and surely you too. And since we love to dare, we undertook this fabulous work. Learn to create your own Instagram filters with this tutorial.

What are Instagram Augmented Reality Filters?

What are augmented reality instagram filters

Before starting the tutorial, it is always necessary to contextualize a bit about what will be discussed. In this case, it can be just so you know what you’re getting into, or so you know about this new Instagram feature if you haven’t already.

Augmented reality (AR) filters they are computer generated effects that are superimposed on the image that the camera of your mobile captures. Thus, if your face moves in any direction, the filter will follow it so that the effect is always being applied to it.

In the case of AR filters for Instagram Stories, these alter the real image in order to offer some interesting effect, such as a gala makeup, funny deformations, games or things like random trivia, which lately have so many downloads.

How to create an Instagram filter, step by step guide

create ig filter step by step

Creating an AR filter for Instagram is relatively simple if you follow the steps in this tutorial correctly. You don’t need great programming skills or anything like that, just a little patience. But as in any tutorial, the first thing is to know the prerequisites:

  • Have a PC with Windows 10 or MacOS installed (the program is not compatible with Linux yet, although you can use an app like Wine on your laptop or desktop).
  • Your mobile with the instagram app updated.
  • Install Spark AR Studio on your computer, you can download it from here.
  • Have a clear idea of ​​what you would like to do.
  • Save the images that you will need.

Once you have all this ready, it is time to venture to the creation of your new filter for Instagram stories. U.S we will make a simple filter, of learning, but we are sure that with practice you will be able to create incredibly great augmented reality filters. Let’s go there.

Get to know Spark AR Studio and select your filter for stories

spark ar studio

Spark AR Studio is the official program created by Facebook to create filters, images and videos in augmented reality on your face, or the environment. It works for a lot more than just Instagram Stories, but this is definitely its main use.

  1. Open Spark AR Studio on your computer and log in with your Facebook account. In doing so, you will see up to eight predesigned filter templates, as well as a section to create a filter entirely from scratch.

After doing this tutorial, we recommend that you start practicing with templates, although we will create something entirely from scratch at this point, to show you the complete process. What will we create? A quiz so you know which brand of car identifies you.

  1. You will enter the Spark AR Studio creation panel. This is divided into 4 panels that you should know:
    • Viewport: located in the entire center of the screen, is where you can visualize and build your effect.
    • Simulator: located inside the Viewport, on the right hand side, is a floating window that shows what your filter will look like.
    • Scene panel: located on the left of the screen, above, contains all the general options to edit your AR filter for Instagram stories.
    • Assets panel: located on the left of the screen, below, contains all the “Assets” with which you will lock your AR filter.
    • Inspection panel: located to the right of the screen, is where the specific options for each general animation option are displayed.

Process of creating an AR filter for Instagram

Now that you are familiar with the editing program, it is time to continue with the step-by-step guide. The steps to create a quiz They are these, and they continue the previous ones.

  1. In the Scene panel, press “+ Add Assets” in the section of the same name, then locate the option “Animation sequence” and add it.
  2. Select the sequence you created, go to the inspection panel and press “Choose file …”, next to the “Textures” option.
  3. The file explorer will open in a new window, navigate to the folder where you have the answer images of the quiz you will create. Select them all and press “Open”.
  4. A new texture pack will be created in the scene panel. Continue in the scene that you created, uncheck the “Loop” option and check “Randomize”, both in the controls section.
  5. In the scenes section, add the object “Face Tracker”, and inside him add a plane (“Plane”). You can change the name of the plane right now if you don’t want to get confused.
  6. You will see that your simulation character now has a box on his face that follows him as he moves. Pause the animation in the left sidebar of the screen, then use the three dimension dates to move the box up to the top of the head and enlarge it if necessary.
  7. Now you will load the cover / question of your quiz. To do this, just press “+ Add Assets”, and later “Import from computer …”.
  8. A window will open and you will have to add the image that will serve as a question in your AR filter for Instagram.
  9. Select again “Plane” and then go back to the inspection panel. There you will have to add a new material (“Add Material”).
  10. Then, you will have to go to the scene panel, and select the newly created material. Change the “Shader Type” to “Flat”, and then change the texture of that material by selecting the Asset corresponding to the quiz answer.
  11. Create a new plane with the same characteristics as the previous one, which will be used for the filter responses, or copy the current one. Later, create a new material, and change the texture by selecting the “Animation Sequense” created in the third step.
  12. Choose the animation sequence in the scene panel, and check the “Loop” box on the inspection panel. If the filter is not stopped, you will see that the images start to change in the simulator.

Configure commands and conditions to create an AR filter for Instagram

set animation commands filter ar

Until the previous point, everything you did was the basis for creating your own augmented reality filter, now is the time to animate it to work properly, these are the steps to follow:

  1. Open the “View” menu and there check the option “Show / Hide patch editor”With this, a new section will open in Spark AR which is where the filter action is programmed.
  2. Now you will create the action that will activate the quiz to move from the question to the possible answers. There are two options for this:
    • Option 1: Right click on the patch editor and add the “Screen Tap” patch.
    • Option 2: In the scene section, go to the “Face Tracker ”that you created earlier, and in the inspection panel locate the“ Interactions ”section. Press the “Create” button and choose any option you like to trigger the quiz draw.
  3. Create the patch “Switch”, which will allow you to switch between the question and the quiz answers.
  4. Create the “Not” patch, which will complement the previous one.
  5. Select the plane that corresponds to the image of your question, and in the inspection panel press the arrow icon next to “Visible”. A yellow patch will be added to the editor.
  6. Do the same as in the previous step, but for your answer panel.
  7. Create the “Runtime” patch to allow tracking of the number of seconds the effect will be on.
  8. Create the patch “Offset” with which you will know how long the effect has been running.
  9. Create the “Less Than” patch to condition the previous panel. Put 5 in the second text box of this patch.
  10. Create the patch “Loop Animation” to animate your scene repeatedly and then change the “Duration” value to 0.05.
  11. Create the “Random” patch, which will allow the effect to return a random result. Then change the “End Value” to the number of responses you loaded in the first few steps.
  12. Create the patch “Round” which will be in charge of giving the final result of your quiz depending on the value of the previous patch.
  13. Go to the “Assets” panel and select the animation sequence that you created in step three. Then press the arrow next to the “Current Frame” option in the inspection panel. A third yellow patch will be added to the editor.
  14. Correctly interconnect each patch with each other for the filter to work.

In order not to greatly increase the number of steps in this tutorial, We recommend that you see the image that opens this section from the article. There you will find how everything should be connected and configured for this AR filter to work. The connection is made by right-clicking and holding from an arrow in panel “A” to an arrow in panel “B”. It is very simple.

Try your new augmented reality filter

filter augmented reality instagram working

We know that the process has been long so far, but we are sure that it has not been complicated. Now that the filter is programmed, it’s time to try it, and then upload it to Instagram. We will do the two corresponding functional tests:

  1. Try Spark AR Studio: make sure the filter is running by pressing the “Play” button on the left side bar of the screen. Then, go to the simulator and press the icon of the three stripes, when the drop-down menu opens, select the option “Simulate Touch”. Click on your test character to test the filter. If everything works great, it’s time to move on to test two.
  2. Test on Instagram: in the left sidebar, press the mobile icon that has a small arrow next to it. When doing so, a menu will be displayed where you can see the option “Instagram Camera”, press the “Send” button. Spark AR Studio will start uploading the test to its servers. Once you do, you will receive a notification on your mobile where you have your Instagram account open. Press it to test the filter.

If you followed all the steps in this tutorial to the letter, the filter should work perfectly. !! Congratulations!! Now is the time to officially upload it to Instagram.

Upload your augmented reality filter to Instagram

upload filter to instagram

If there is one thing Facebook can boast of, it is that Spark AR Studio is very easy to use. Now that the filter is tested, all that remains is to publish it on Instagram. To do it you will only have to press the loading icon in the sidebar of the program.

Once you do, a new window will open with some notices and requirements that you must meet for the filter to be accepted by the platform. If you do not incur any violation of the policies of Instagram, surely there will be no problems. Press “Upload” and Ready!

Now we just have to wait for the filter to be approved. This process tends to take a couple of days, because there are many users who are creating AR filters at this time, so do not despair. In the same upload window you can also export your filter file to upload it later.

What do you think of this tutorial? It sure has been amazing and you weren’t expecting it. Here we only teach you how to make one of many augmented reality filters, but if you want to try more tutorialsYou can go to the Spark AR Studio official page by following this link. There are many tutorials for other types of filter, unfortunately it is all in English, although it is very interactive.