Cloth Physics.

Cloth physics is a fantastic visual representation of how physics can be used to enhance a scene in a game, it can be used to convey character emotion like in the PS3 game Journey by thatgamecompany or just make a character feel more alive like in Beyond : Two souls in the chapter “The Embassy” where Jodie wears a red dress.

Cloth physics is also notoriously difficult to get right.  From numerical stability to collision. In this post i will talk about my approach to solving cloth simulation. Making it “feel” good, stable and usable in different situations, character cloth and flags.

The traveler from Journey and Jodie from Beyond : Two souls.
The traveler from Journey and Jodie from Beyond : Two souls.

Cloth Structure:

A real world example of a scarf constrained on two clips.

They are 3 types of constraints in creating a solid cloth simulation that behaves and looks believable. These are bend, shear and structural constraints. I drew a little diagram below.

Structural Constraints: These are the backbone of the cloth, which ensure stability and connect every adjacent point. They connect to every particle horizontal from particle (x, y) to (x + 1, y) and they connect vertically from particle (x, y) to (x, y + 1).

Shear Constraints: These transverse diagonally between points to moderate and create lateral movement. They specifically moderate against force perpendicular along the latitude direction of the cloth. They connect each particle horizontally from (x,  y) to (x + 1, y + 1) and vertically (x + 1, y ) to (x, y + 1)

Bend Constraints: These are intended to stop the cloth from folding in on itself. They connect every second particle along horizontally from (x,  y) to (x + 2, y) and vertically (x, y) to (x, y + 2).

cloth strucutre


Every constraints in the system has two particles that are connected at either end. Each constraint has a rest length, which is the distance between the two particles that the constraint will attempt to return to. In other words, in addition to the external forces being applied to the cloth particles, the constraints. will apply a force to each particle based on the length and direction of the constraint. The direction is simply the normalized vector between each of the constraint particles.

 Vector3 delta = p2->getPosition() - p1->getPosition();
 real deltaLendth = delta.magnitude();
 real diff = (deltalendth - restDistance) / deltaLendth;

 delta *= 0.5f * diff;


Wind forces:

Simulating the wind forces on cloth is very simple when you don’t take into account of fluid dynamics. Wind can be modeled as a force acting on a triangle of particles. The wind force acting on a triangle will always be in the direction of the normal vector of that triangle. The force will be proportional to the surface area of the triangle, the angle at which the winds hits the triangle and the speed of the wind. It just so happens that when you use the cross product to calculate the normal for the triangle, the length of that vector is proportional to the area of the the triangle.


Vector3 Cloth::calcTriangleNormal(Particle *p1, Particle *p2,
 Particle *p3)
	Vector3 pos1 = p1->getPosition();
	Vector3 pos2 = p2->getPosition();
	Vector3 pos3 = p3->getPosition();

	Vector3 v1 = pos2 - pos1;
	Vector3 v2 = pos3 - pos1;

	Vector3 norm = v1.vectorProduct(v2);

	return norm;

The angle between the face’s normal and the wind vector is used to calculate the amount of force to apply to each point. The angle between the vectors determines how much of the wind’s force to apply. It is calculated by performing a dot product calculation on the face’s normalized vector with the wind vector.

Vector3 force = normal.normalize() * 
dotProduct(normal, windDirection));


This is how it looks when i’m drawing the normal’s of the cloth for debug purpose in my physics engine.

g_debugDrawManager.AddLine(getParticle(x, y)->getPosition(),
 getParticle(x, y)->getNormal() + 
getParticle(x, y)->getPosition(), COLOR::RED, 0.04f);




Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s