Cloth Simulation
To make it easier for you to mix-and-match our different examples, this template has been converted to an importable asset in the Asset Library with the name Cloth Simulation - Tutu
, Cloth Simulation - Bandana
, Cloth Simulation - Vertex
and Cloth Simulation - Sunny Doll
.
The cloth simulation template allows you to generate realistic cloth simulations with custom meshes. The template comes with several examples and helper scripts to customize your meshes.
Cloth simulation allows you to make cloth move with human actions (move, stretch and bend), collision, gravity, air friction, etc. Each single point on cloth can move in different directions based on a combination of different forces.
Guide
In the Scene Hierarchy
panel, you can find the following examples:.
- Head Bandana - shows how to attach a bandana to user’s neck with head binding.
- Vertex Color - shows how to use vertex color with different simulation settings.
- Hand Curtain - shows how to use collider to collide fixed point cloth with hand tracking.
- Hand Sunny Doll - shows how to use the collider to fill the cloth with hand tracking.
- Tutu - shows how to attach a tutu to user’s hip with 3D body tracking.
- Ribbon - shows how to attach a ribbon to left and right hands with 3D body tracking.
- Jacket - shows how to attach a jacket to the left arm, right arm, and neck with 3D body tracking.
Feel free to jump directly to the section you are interested in as each example is stand-alone.
Head Bandana Example
This example shows a bandana cloth attached to the user's neck. Click on the Cloth Simulation Bandana Object
to see the Script
components attached to the object in the Inspector
panel.
Cloth Component
Clothes are added to a scene using a Cloth
Component added to an object.
Cloth Mesh
Use the Cloth Mesh
field to assign the Cloth Mesh. Note that you can import your own mesh.
You must paint at least one vertex color on your own customized mesh for cloth simulation. For more details on importing your own cloth mesh, see the Cloth Simulation Guide.
Cloth Material
Click the Material 1
field, you can assign the Cloth Material
. Or click the Choose Material
button to add new materials. The Stripe Material
is used in the example. Right click the material, then click Select
to see the material.
You can modify the material in the Inspector
panel.
You can also modify it in the Graph Editor.
To learn more about Material Editor, check out the Material Editor template.
Debug Material for Cloth
To use Debug Material
, go to the Resource > Materials
folder and set the cloth material to Debug Material
.
With Debug Material
, You can render vertex color mapping for the Bandana model in Lens Studio. The next step shows how to use the vertex color for binding.
Simulation Settings
The Simulation Settings for the bandana are shown below. Try playing around with them to see how they work.
See the Cloth Simulation Guide for simulation setting details.
Vertex Bindings
For the bandana, red vertex color binding is added. Set the vertex color as red on the bandana model to follow the user’s head with the Neck Pivot Point
object.
Each vertex in a 3D model can have a color assigned to it using the 3D modeling software (Vertex Color
).
Here, bind red vertices in the mesh to the Follow Object
. With different vertex colors, you can bind vertices to pivot points in Lens Studio. The bind parts won’t be affected by cloth simulation, but are stationary relative to pivot points. For example, you can bind the red part of the mesh bandana to the Neck Pivot Point
object. Thus, the red part of the bandana remains relatively static to the Neck and the black part will have the cloth simulation effect.
You can also bind multiple vertex colors to different Follow Objects
. Lens Studio allows a single cloth mesh to bind to a maximum of 12 objects. See the Ribbon and Jacket
examples for more information.
Occluding parts of the cloth
Notice the bandana is occluded with the body with Plane Occluder
under the Neck Pivot Point
. The Plane Occluder Prefab
is located in the Resources > Prefabs
.
This prefab contains a plane displaying the body segmentation, so that the parts of our cloth that is behind the user would be occluded. To learn more about body segmentation, check out the Body Segmentation template.
Vertex Color Example
Now that you understand Cloth Simulation at a high level, the next example shows you how to make a more complicated clothing item with the Vertex Controller
. Enable the Vertex Color
example in the Scene Hierarchy
panel and select the Cloth Simulation
object to see the VertexColorController
Script Component after the Cloth
Component.
If you select the Vertex Controller
object you will find several scripts that define how each vertex behaves. Try playing around with different settings to see how they work.
You can select the vertex color you want to modify based on the available vertex colors in your mesh. In this case, the cloth material has yellow, red, and green vertices.
For each vertex simulation property, you have the global weight property. Global Weight
is how much the global settings influence the Cloth Simulation
script. Set Global Weight
to 0.0
the absolute value of the property in the Vertex Controller on this vertex. Set Global Weight
to 1.0
to ignore the property value in the Vertex Controller. When you disable the vertex controller, all vertex properties are 0.0
by default. The mesh is simulated by all global simulation settings.
The following is the Bend Stiffness
example.
let G = globalSimulationSettings.bendStiffness
let G.VertexWeight = globalSimulationSettings.bendStiffnessVertexWeight
let V[i] = perVertexSimulationSettings[vertexIndex].bendStiffness
let V[i].GlobalWeight= perVertexSimulationSettings[vertexIndex].bendStiffnessGlobalWeight
In the simulation, the final result for Bend Stiffness is bendStiffness[i] = G _ V[i].GlobalWeight + V[i] _ G.VertexWeight
;
This example also uses a Debug material to display the Vertex Colors of your mesh!
Hand Curtain Example
The hand curtain example uses hand tracking with a physic collider to interact with the cloth object. Enable the Hand Curtain Single Follow Object
in the Scene Hierarchy
panel and see the set up.
With 3D hand tracking, you can track the Left
or Right
hand.
To learn more about hand tracking, see the 3D Hand Tracking Template.
Expand the Left
object to find the Hand Collider
object. Click on the object to check the Physics Collider
component in the Inspector
panel. The right hand also uses the same setup.
Now with the sphere collider attached to the 3D hand tracking, check the curtain cloth Script
component. Click on the Cloth Simulation Curtain
object.
Now take a deeper look at the Cloth Simulation
Script component.
Notice that the Enable Repulsion
field in Simulation Settings
is checked. With Enable Repulsion
, you can adjust the setting after a collision occurs. Play around with the repulsion settings to see how they work.
With the Choose collider
button, you can assign all the colliders and collide with the cloth.
Enable the Enable Repulsion
field and Use Colliders
field and assign all the colliders to create the collision effect.
Hand Sunny Doll Example
Hand Sunny Doll
Example shows you how to attach the cloth to 3D hand tracking. Enable the Hand Sunny Doll Single Follow
object in the Scene Hierarchy
panel. Instead of binding the cloth with a fixed pivot point in the Scene, the cloth is a child of the Left
hand tracking object.
In this example, a sphere collider is used to fill the sunny doll. Try to scale the sphere collider size up or down to see different results. In order to keep the basic shape for the doll, both the head top and the neck vertices on the doll mesh are painted red.
To learn more about hand tracking, see the 3D Hand Tracking.
Tutu Example
The tutu example shows how to attach the cloth to a single bind point with 3D body tracking. Enable the Tutu Single Follow
object in the Scene Hierarchy
panel.
In this example, note that this 3D body tracking object has an Object Tracking
component which has a mapping of the Collider Guides joint to the tracker’s.
To learn more about 3d body tracking, see the3D Body Tracking Template.
There is also a Reset Cloth On Tap
object. The Cloth Reset
Script is called when you tap the screen. With this script, you can reset the cloth.
The Full Body Occluder
object uses the full body mesh as the body occluder. With this object, the body will occlude with cloth. Note that the render layer
is set to 0
to occlude with cloth mesh.
The Collider Guide
object includes all collisions for body parts. Both the guides and collision are tracked to the body joints.
The Bind Points
object has bind points for cloth. You can attach the cloth to the bind point to follow different body parts.
Click on any of the bind points. Note that the bind point is pinned to the collider guide. Now Select
the bind point material.
Enable the IsDebug
field.
Note that the bind points are now rendered in the scene.
You can find the Collider Guides
, bindPoints
, and Body_Mesh_T_Pose
FBX files under Resources -> 3D Body Tracking References
. You can use them as a reference to create your own cloth mesh.
To learn more about creating cloth mesh for 3d body tracking, see the Cloth Simulation Guide.
Save a template to your computer, and open up the Public
folder in the project folder to find the assets in your project!
Now, take a look at the Cloth Simulation Tutu
object. With the Debug Material you can see that the red vertices on the tutu mesh are binding to the hip binding point. With repulsion and collider enabled, the tutu collides with the legs.
When creating cloth mesh for 3D body tracking, use the FBX files as the reference for cloth transform. In order to have the right binding and occlusion, clickhere to see how to export and import 3D objects into Lens Studio.
Ribbon Example
The ribbon example shows how to attach the cloth to two bind points with 3D body tracking. Enable the Ribbon Multiple Follow
object in the Scene Hierarchy
panel.
The other 3D body tracking example uses a similar setup. Click on the Cloth Simulation Ribbon
object to see the difference. The red vertices are binding to the right hand binding point and green vertices are binding to the left hand binding point.
Replace the cloth material with debug material to see the vertex paintings on the ribbon mesh.
Jacket Example
The jacket example shows how to attach the cloth to three bind points with 3D body tracking. Enable the Jacket Multiple Follow
object in the Scene Hierarchy
panel.
The setup is similar to the other 3D body tracking example. Click on the Cloth Simulation Jacket
object to see the difference. You’ll see red vertices are binding to the neck binding point, yellow vertices are binding to the left arm binding point, and green vertices are binding to the right arm binding point.
Replace the cloth material with debug material to see the vertex paintings on the ribbon mesh.
With Enable Repulsion
and Use Colliders
enabled, the jacket collides with the upper body parts.
Previewing Your Lens
You're now ready to preview your Lens experience in Snapchat! To do so follow the Pairing to Snapchat guide.