Cloth Simulation Try-On
The Cloth Simulation Try-On template demonstrates how you can use various technologies together, such as 3D Body Tracking, Cloth Simulation, and Body Mesh, on different types of clothing to create a realistic try-on experience. This template comes with 4 different types of clothing, each showing different techniques to create the best experience.
Note: While the cloth simulation interacts with the Physics Collider, not everything in the Physics system applies to it (such as gravity and wind settings).
Guide
Underneath the Examples object in the Objects panel, you will find different clothes that you might want to make. Press the checkbox to the right of each example to enable or disable them,
Note: Each of these examples contain 3D meshes of clothes imported from another software. Take a look at the importing 3D guide, external body mesh and cloth simulation to learn more.
Common Elements
While each clothes and technique vary, a common set up is used to allow the clothes to interact with the body.
In short: The person is tracked with an Object Tracking 3D component for the body. A Body Mesh is used to conform the clothes to the body, and Cloth Simulation is used to deform the clothes based on the movement of the body. A Physics Collider is then used to guide the cloth simulation based on the body. Finally, a Body Mesh is used to occlude the part of the garment covered by the person.
3D Body Tracking
At the root object of each example, you will find an Object Tracking 3D component. This component is responsible for tracking different 3d objects to our body.
Notice in this component, under Attachment Points, you will have a list of body parts, and a corresponding guide object. These objects guide the clothes so that they do not overlap the body.
Right click on a field and click Select to see what it is a reference to.
Body Guides
When you expand an example, you will notice that there is a Collider Guides object, with guides underneath. These are the objects that the Object Tracking 3D component is aligning to the body.
Each guide is a very simple mesh that aligns to the joints of the body. More importantly, each guide has a child object which contains a Physics Collider component. Each Physics Collider can be used for cloth repulsion, and in this case we use it to repel the clothes from the body.
The guides [EDIT_ME] object contains a script that can modify the settings of a collider. This script will automatically apply these settings to every child Cloth Simulation component. In this template translation and rotation smoothing is applied on all the colliders.
Full Body Occluder
Each example will have a Full Body Occluder that will hide the parts of the clothes that are covered by the person in the camera. This uses the Body Mesh so the occluder can automatically conform to the user body. Like with the guides, this uses Object Tracking 3D to attach the mesh to the user's body.
Reset Cloth on Tap
Lastly, each example contains a script that allows the user to reset the cloth simulation by tapping on the screen.
When working with your own clothes, make sure that the Cloth Simulation you are displaying is linked to the Cloth Visual field.
Examples
For each example, take a look at the various [EDIT_ME] objects within to see how the cloth simulation is set up.
Dress
In this example, a External Body Mesh is created from a 3D model of a dress so that the dress conforms to the body. By using Body Mesh, the cloth will change its size based on the user’s body.
In the Cloth Simulation settings, some of the body guides are added to the Cloth Simulation so that the dress can collide with the user. Only colliders that we expect to interact with our cloth are added to improve the performance of the simulation.
Importantly, the dress is not entirely cloth simulated. The part that hugs the body is pinned to the body mesh. To do this, we use vertex colors to describe which parts of the dress are binded, and which are simulated.
In this case, we bind the vertices of the object painted in white to the 3D body Tracking object. Take a look at the Cloth Simulation template to learn more about using vertex colors to bind clothes.
You'll also notice that there is also a high polygon version of this dress for comparison. In the high poly version we use a debug material that visualizes the different vertex colors! In this example, the white part of the mesh is binded to the body, as set up in the Vertex Bindings section above, whereas the red part of the mesh is driven by cloth simulation. Try using this debug material on the other clothing example.
Keep in mind that the higher the poly count, the less performant the cloth simulation will be. In most cases you will want to use the low poly version of the dress as it will work better across all devices.
You can create a simple graph material to visualize the vertex colors of your mesh like so:
Coat
In the Coat example, we use largely the same techniques as the Dress example. Notice how like the dress, the bottom part of the coat is moving with the cloth simulation, while the chest part conforms to the body.
We add a secondary body mesh to add additional details to our clothes. In this case, we added buttons. These buttons will conform to the body (since it is using Body Mesh), but will NOT interact with the body, since it does not have a Cloth Simulation component.
Ensuring that your Lens is performant by only using simulations when needed will improve your overall Lens.
Hoodie - Auto Paint
In the Hoodie example, rather than manually binding some vertex colors to parts of the body like above, we use a script to automatically bind each Body Mesh vertices to the Cloth Simulation vertices closest to them.
This binding is done by the Vertex Distance Controller object, or, more specifically: the VertexDistanceController script it contains.
- Cloth Visual: The Cloth Simulation which contains the Body Mesh that you will bind together
- Override Vertex Settings: Whether or not you want this script to Auto paint.
- Bind Distance Field: Represents the threshold for binding the Body Mesh to the Cloth Simulation.
Note: The Bind Distance field in the VertexDistanceController script Note that the value here is between 0-1, and are changed by the max distance on the External Body Mesh asset. Thus, when using this script, it’s best to first set up the best parameter on the External Body Mesh, and then set up the cloth simulation bind distance.
Hints
Lastly, this template comes with a Screen Text Hint under the Orthographic Camera to tell people that they can tap the screen to reset the cloth simulation. This is a normal Screen Text object.
This object uses a Behavior script to disable the hint when the user starts recording (so the use is not distracted by it), as well as when the user has tapped (thus the user has seen what tapping does).
Ensuring that your Lens has adequate instruction is key to the Snapchatter having a good experience.
Previewing Your Lens
You're now ready to preview your Lens experience in Snapchat! To do so follow the Pairing to Snapchat guide.
Related Guides
Please see the guides below for additional information: