Upper Garment Segmentation
The Upper Garment Segmentation allows you to replace a portion of upper garment with an image, 3D object, text or even a post effect. This template comes with a helper script to allow you to design your content as well as track the content to the body.
This template combines Segmentation and Body Tracking to create the desired effect.
Guide
Designing Upper Garment
To make your objects appear on the garment, just place any content as a child of the Garment Design [PLACE_ART_HERE] in the objects panel.
Take a look at the Screen Image and Screen Text guide to see some of the different types of content you can bring into your Lens.
As soon as you place the object as a child of the Garment Design [PLACE_ART_HERE] ,you can see your object will appear on the upper garment section of the body.
If the object is too big or too small, you can use the Scene panel to modify the transform of the object.
Most objects are compatible with Upper Garment Segmentation, take a look at the provided examples by enabling the scene object in the Inspector or Objects panel.
To make any content appear on the garment, you need to make sure that the object's alpha are enabled as well as all the child content are on the same layer as the Orthographic camera. In this template we provided a script that automatically sets the alpha as well as render layer on each child object. This script is called DesignAttributeSetter and it’s placed on the Garment Design [PLACE_ART_HERE] object. If you want to set the layers manually, feel free to disable the script.
This template comes with a helper script to help you design patterns for the upper garment segmentation, in the next section we will explain on how to use the helper script.
Pattern Designer
PatternDesigner script lets you easily design patterns and attach it to the body.
You can find this script attached to the Pattern [EDIT_ME] object in the Objects panel. To modify the pattern first select the Pattern [EDIT_ME] scene object and modify the values in the Inspector panel.
These options are similar to the ones found in the Segmentation Template
Background
To enable a solid background color, make sure the Use Background Color checkbox is checked. Once enabled, you’re able to tune the color and transparency.
Image
To place an image on top of the background, make sure the Use Image checkbox is checked.
Set Texture
Once Use Image is checked, you’ll want to assign the image texture. To add a texture to Lens Studio, drag and drop a PNG or JPG to the Resources panel. Alternatively, select + -> Import Files from the Resources panel. Then, click the Image Texture field and assign it to your newly imported texture.
Image Transparency
You have control for how transparent your image will be via the Image Transparency slider.
Set Image Blend Mode
You can set your image blend mode using the Image Blend Mode drop down. Available blend modes are Normal, Screen & Multiply.
Set Image Fill Mode
You can set your image fill mode using the Fill Mode drop down.
Tiled
When the Tiled checkbox is selected, your image is tiled and you can easily design your pattern.
The following options in the Inspector panel allow you to configure the tiling.
- Tile Density: How dense the tiled pattern is. Smaller number = Bigger tiles. Bigger number = Smaller tiles
- Animate: If enabled, the tile pattern will play a scrolling animation
- Animate Speed X: How fast the tile pattern scrolls in the horizontal direction
- Animate Speed Y: How fast the tile pattern scrolls in the vertical direction
Transform
You can use the slider to configure the pattern’s transform.
You can also duplicate the script to create multiple patterns.
Modify Segmentation Texture
To modify what part of the image is segmented, modify the segmentation texture resource found in the Resources panel. To do this, select the upper_garment_segmentation [EDIT_ME] object, and in the Inspector panel, modify its settings.
All of the segmentation textures can be inverted by enabling the Invert checkbox.
You can change how the borders of the segmentation looks by modifying the Feathering and Refine Edge option.
Modify Segmentation Post Effect Material
This template comes with a custom material and a helper script to extract the detail of the garment and apply that on top of your content. If you take a close look, you can see all the shadows and highlights as well as wrinkles on the shirt still visible with the content that we applied on the garment. This will make the look of the Lens much more believable. However you can easily tweak the values on the post effect by selecting the upper_garment_material [EDIT_ME] material in the Inspector panel and modifying its settings.
Tracking Controller
This script helps you to track all your objects on the garment. To modify it settings first select the Tracking Controller in the Objects panel and modify the values in the Inspector panel.
Tracking
This option allows you to track selected objects on the body. The script uses body tracking as well as shoulder tracking to attach any object to the body. You can disable the tracking by unchecking the checkbox.
When Tracking is disable all the objects are not moving with the person anymore and it stays in world space.
Auto Optimize
Tracking content to the body can be process heavy on older phones. This script provides an option to track how smooth Lens running on the phone and optimize the tracking based on the frame rate.
If the frame rate is lower than Min FPS To Switch slider, it will automatically switch to less process heavy tracking (Only shoulder tracking) and if the frame rate is above the number it uses body tracking.
Tracking Objects
You can select and specify what objects are tracked to the body using the Tracking Objects. The Garment Design [PLACE_ART_HERE] object is already set as a tracking object to make the process easier.
Previewing Your Lens
You’re now ready to preview your Lens experience. To preview your Lens in Snapchat, follow the Pairing to Snapchat guide.
Related Guides
Please refer to the guides below for additional information: