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.
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
Step 3: Create the materials!
Create 2 new materials, one for the background and one for the person segmentation
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
- 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
- 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.
Step 7: Attach the materials to rectangle objects.
Hope you enjoyed this short tutorial!
I also made a video version of this tutorial.
Thanks for reading!