Adding segmentation

Add segmentation to an effect by applying a ‘segmentation texture’ to the Texture property of a material. Typically, you’ll then apply this material to a rectangle that covers the full width and height of the device screen.

There are 3 segmentation textures available in Spark AR Studio - one for each of the 3 segmentation types.

To create a segmentation texture:

1. In the Scene panel, select the Camera.
2. In the Inspector, click + to the right of Segmentation, and select either Hair, Person or Skin from the list.

The segmentation texture will be listed in the Assets panel. To change the type of segmentation texture:

1. Select the segmentation texture in the Assets panel.
2. In the Inspector, go to Type.
3. Select another option from the dropdown list.

Segmentation texture - properties

In the Inspector, you can edit the following properties of a segmentation texture to change how it appears in your effect.

Edge Softness

Segmentation creates an outline around the person detected in the scene. Edit Edge Softness to soften this outline.

Mask Size

Adjust the size of the outline around the part of scene the texture is segmenting.

Type

Select whether the texture separates someone’s skin, hair or the whole person.

Example - person segmentation

Add rectangles to render segmentation in the scene

The first step is to add 2 rectangles to your scene. One will be used to render the user in the foreground and the other will create the background.

Start by adding a canvas:

1. Click Add Object.
2. Select Canvas.

The canvas is always the same size as the device that's using the effect. You'll insert the rectangles as children of the canvas, so they'll always be the right size for the device. To do this:

1. Right-click on the canvas.
2. Select Add.
3. Select Rectangle.

Repeat these steps, so you have two rectangles in your scene. It's worth renaming the the rectangles to help keep track. To rename an object in Spark AR Studio:

1. Right-click on the object.
2. Select Rename.
3. Call the first rectangle in the list user, and the second background.

Your Scene panel should look like this:

Next change the size of the rectangles, so they're the same size as the canvas:

1. Select each rectangle in the Scene panel.
2. In the Inspector, click each box next to Fill Width and Fill Height.

Your project should look like this:

Adjust the layers

The background rectangle needs to be added to another layer, so it renders after the foreground rectangle. To do this:

1. Select the background rectangle in the Scene panel.
2. Click the dropdown next to Layer in the Inspector.
3. Select Create New Layer.

In the Layers tab you can adjust the order of the layers to change the order they render in. The new layer with our background rectangle (layer1) needs to be below the layer with our user rectangle (layer0):

Create materials for the rectangles

You'll apply a segmentation texture to the material on the user rectangle. You can add a color or your own textures to the material on the background rectangle.

To create the materials:

1. Select the user rectangle in the Scene panel.
2. Click + next to Material in the Inspector.
3. The material will be listed in the Assets Panel - rename the material user_material.

Repeat these steps for the background rectangle. This time, rename the material background_material.

Create a segmentation texture

The segmentation texture separates what the camera can see in the foreground, from the background. To create it:

1. Select the Camera in the Scene panel.
2. Click + next to Segmentation in the Inspector.
3. Click Person.

Extract the camera texture

Extracting the camera texture allows you to use the video captured by the camera as the effect plays as a texture in the effect. You'll add this texture to the user_material, to render the user in the scene. To create it:

1. Select the Camera in the Scene panel.
2. Click + next to Texture Extraction in the Inspector.

Add the textures to the user material

Select the user material in the Assets panel. In the Inspector:

1. Change the Shader Type to Flat.
2. Under Diffuse, click the dropdown next to Texture and select cameraTexture0.
3. Check the box next to Alpha.
4. Under Alpha, click the dropdown next to Texture and select personsegmentationMaskTexture0.

You should see the user in your scene:

Build the background material

Select background_material. You can make any edits you want to this material - for example, import your own texture or change the color. Below, we've edited the color under Diffuse:

Editing the segmentation texture

When the segmentation texture is selected in the Assets panel, you can make changes how it works in your effect in the Inspector.

Edge Softness
Segmentation creates an outline around the person detected in the scene. Use Edge Softness to blur or soften this outline.

Mask Size
Adjust the outline of the person in the scene.

Similar changes to softness and mask size can be made in the Patch Editor using a Segmentation Processor patch group.