Segmentation

In this tutorial, you’ll learn how to setup a Segmentation effect and implement an animated background and foreground.

This tutorial covers the following:

• Importing assets
• Swapping assets
• Changing segmentation type

Prepare

Before you start, feel free to prepare image assets for background or foreground. It can be a static image or texture sequence if you want animated effects. The folder below contains a texture sequence of the background, a static image for foreground, and a UFO texture sequence for your reference.

↓ segmentation_assets.zip

2D Rendering Order

When you open the segmentation template, you will see the scene objects organized in the Hierarchy panel:

2D scene objects under the same 2D canvas don’t have a z position to tell the distance between the camera to decide the render order. In order to determine the render order, we will use the order in which the scene objects are arranged in the Hierarchy panel.

In this template design we have three scene objects: Foreground, Portrait Segmentation, and Background. Each scene object represents one image layer. The 2D scene object at the very top of the hierarchy will be rendered last, which means it will cover and be placed in front of the others. In this example, Foreground will be rendered last.

It will be easier for you to add additional layers such as a background or foreground once this rule is understood.

Import Assets

You can import a static image by clicking + Add asset > Import > From Computer. You can also simply select and drag your static image into the Assets panel.

For texture sequence, click + Add asset > Import > Texture Sequence. Then select all the frames of the texture sequence from the Assets selection panel, then click Open.

Replace Assets

Let’s take a look at how to swap the assets for foreground after importing your assets. Select the Foreground scene object and go to the Inspector panel to find the Image component. Click the Texture property to click on your own image from the Assets selection panel.

Click + Add component > Animation > Animation Sequence to assign the component if you want to set texture sequence for the foreground.

Then go to the Animation Sequence and click Texture Sequence to open the selection panel and choose the texture sequence you want. Feel free to tweak the position, size, and rotation of the image.

If you want to swap the background sequence, the operation is the same. Just replace the Texture Sequence property of the Background scene object’s Animation Sequence component.

Play With the Segmentation Setting

Let’s say you want to segment different parts of the body, for example, changing the effect to segment the head. Go to the Assets panel, select Portrait Segmentation Texture, then take a look at the Inspector setting. Click the dropdown menu of Type and choose your segment type.