Segmentation
Segmentation isolates an area to apply customized textures and effects to it. You can use Segmentation Textures in conjunction with Segmentation to personalize the portrait, hair, head, hand, and clothing. You can also customize the textures for the sky, ground, and buildings.
In the Demo Effect sections, you will learn how to use segmentation to manipulate the background. You can download the following files to get started:
↓ Add_3D_Object_to_Segmentation.zip
Add a Segmentation Object
Go to the Hierarchy panel and click the Add button [+] > Segmentation. Select from the following Segmentation objects:
- Portrait Segmentation
- Hair Segmentation
- Hand Segmentation
- Clothing Segmentation
Object Hierarchy
Starting in Effect House v2.0.0, the Portrait Segmentation, Hair Segmentation, Hand Segmentation, and Clothing Segmentation objects, along with their corresponding objects, are automatically added to the 2D Background Effects render group Hierarchy panel. Learn more about render groups.
Configure the Segmentation Texture
Each Segmentation object has an Image component and a respective texture. For example, when you add a Portrait Segmentation object, Background and Portrait are nested under it. If you select the Portrait object, you can see that the Texture property of the Image component is set to Portrait Segmentation Texture by default in the Inspector panel.
Similarly, Hand Segmentation Texture is the default texture for a Hand Segmentation object.
You can change the texture of your Segmentation object by selecting the Texture field under Image in the Inspector panel. Choose a texture from the list of available assets and click OK.
The default textures can also be found in the Assets panel under the Textures folder. When you add a Segmentation object to the scene, a corresponding Segmentation Texture is also automatically added to the Assets panel.
You can also add a Head, Sky, Ground, and Building texture.
Learn how to create a Segmentation Texture.
Demo Effect: Hand Segmentation
Learn how to create a hand shadow effect.
If you haven’t already, download the following file:
Add a Hand Segmentation object by clicking the Add button [+] > Segmentation > Hand Segmentation in the Hierarchy panel.
Add an Image by clicking the Add button [+] > 2D > Image in the Hierarchy panel.This will be the background image. Remove the canvas and 2D camera that were added with the image. You only need one 2D camera and one canvas in the scene. Drag Image under the Hand Color object so that it will render behind the hand segmentation. Rename it to Background.
Replace the texture of this Background image to background. Adjust its size in the scene to fill the screen.
Select Hand Segmentation Texture from the Assets panel. In the Inspector panel, change its Cutout Texture to the black hand texture you’ve prepared. Now feel free to try it on your hand.
Demo Effect: Animated Sky Segmentation
Learn how to create an animated sky effect.
If you haven’t already, download the following file:
Go to the Hierarchy panel, click the Add button [+] > Segmentation > Portrait Segmentation.
Select the Portrait Segmentation Texture in the Assets panel. Navigate to the Inspector panel. Use the Type dropdown to select Sky.
Now you’ll see the sky part gets cut out and the building areas are covered by the background image. To apply the background image to the sky area, select the Invert Mask checkbox.
To replace the background image with your custom animation, add an Animation Sequence to the Background object first. Import your animation by clicking the Add button [+] > Import > Texture Sequence in the Assets panel.
Learn more about the asset requirements. Drag the imported animation to the Texture Sequence slot under Animation Sequence. Now you can see the animation appear in the sky.
Demo Effect: Add a 3D Object In Between the Portrait and Background
Add a 3D object in front of or behind the segmentation layer by changing the render order of the cameras.
If you haven’t already, download the following file:
↓ Add_3D_Object_to_Segmentation.zip
First go to Hierarchy panel and click the Add button [+] > Segmentation > Portrait Segmentation. Next add a Sphere object by clicking the Add button [+] > 3D > Sphere.
You can see that the Sphere object is rendered on top of the Portrait and Background objects.
Make sure that the Sphere object you added is on the same layer as the Camera object.
Render the Segmentation and Background Images Separately
To move the sphere between the Portrait image and the Background image, you must have two 2D cameras to render the two images separately. Then the sphere can be rendered in the middle.
First go to the Hierarchy panel and duplicate the 2D Background Effects render group, or the container with the 2D Background Camera and Portrait Segmentation objects and its child objects. You can rename the duplicated render group by right-clicking it and clicking Rename.
Now drag and drop the duplicated render group under the General render group, or the container with the Sphere object, in the Hierarchy panel.
Disable the Portrait object in the original segmentation canvas and then the Background object in the duplicated segmentation canvas.
You can see that the sphere now moves in between the Portrait and Background images.
Performance
Segmentation has a very high performance impact on iOS devices. We do not recommend combining Segmentation with other features as doing so will cause low FPS.