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.