Background Replacement for Instagram Filters in Spark AR Studio (Green Screen Effect)

In this tutorial, I want to show you, how you can add a background replacement to your Instagram Filter project in the Spark AR Studio.

Background Replacement in Spark AR

Step 1: Create a new Spark AR project

Step 2: Extract the textures from the camera object!

Click on the camera object in the scene and extract the camera texture and the person segmentation mask.
To export the textures click on the “+” next to texture Extraction and Segmentation

Extract camera texture and person segmentation mask

Step 3: Create the materials!

Create 2 new materials, one for the background and one for the person segmentation

Create 2 materials

Note: Set the shader Type to flat for a better outcome

Step 4: Set up the materials

Select the Person material and do the following.

• Set shader Type to flat.
• Select for the texture in the diffuse tap the “CameraTexture”
• Activate the alpha tap and select the segmentation texture

Set up the segmentation material

• For the background material you can select the texture you want to include or a color.

Step 5: At objects to the scene

Go to the scene panel and create the following objects.

• 1 Canvas
• 2 Rectangles as a child of the canvas

Create the objects in the scene.

• Rename the rectangles one to “person” and one to “background”.
• Make sure the “person” rectangle is under the “background” rectangle.

Step 6: Make the 2 rectangles fill the with and height of the screen.

For this select the 2 rectngles, go to the properties and select “fill with” and fill height.

Fill with and height

Step 7: Attach the materials to rectangle objects.

DONE! 🎉

Hope you enjoyed this short tutorial!
I also made a video version of this tutorial.

Thanks for reading!
- Daniel