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

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

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

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.

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.

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

Fill with and height

DONE! 🎉

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

Thanks for reading!
- Daniel

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store