Cloth Tearing SimulatorBeta

Pull, rip and blow a pinned Verlet cloth in the wind

This tool is a beta version still being stabilized. Please let us know if a result looks off.

Loading the cloth engine (WebAssembly)…

Torn threads0%

The cloth is a grid of points joined by threads (distance constraints). Each point moves by Verlet integration, using the gap between its previous and current position as velocity, and every frame the threads are pulled back to length several times to keep the cloth's shape. A thread snaps when it stretches past the tear limit. Shear constraints add hidden diagonal threads across each cell, and bending constraints add hidden threads that skip one point, so the cloth skews and folds less. These never snap on their own; they break together with the horizontal or vertical threads they rest on. Press and drag on the canvas to pull the cloth; swipe with the Cut tool or the right mouse button to slice it. Pick a pattern or add an image (you can also drop one on the canvas) to print it on the cloth; the cloth takes the image's proportions. Higher precision means more points and smoother tears; raise stiffness too so the finer cloth doesn't sag.

About Cloth Tearing Simulator

The cloth here is a grid of points joined to their neighbours by threads, each of which is a distance constraint. Points do not store a velocity. Each one remembers its current and previous position, and the difference between them serves as the velocity. Thomas Jakobsen presented this velocity-less Verlet integration with iterated constraints in his 2001 GDC talk "Advanced Character Physics". It drove the cloth, plants and ragdoll bodies in IO Interactive's Hitman: Codename 47.

The cloth is two-dimensional. It moves only in the plane of the screen, and when it folds over itself nothing collides (no self-collision). By default threads connect only horizontal and vertical neighbours, so nothing resists a cell skewing into a diamond (shear) or the cloth folding (bending). Turn on Shear constraints to add hidden diagonal threads across every cell, or Bending constraints to add hidden threads that skip one point, and both deformations shrink. These threads never snap on their own; they break together with the horizontal or vertical threads they rest on when those tear or are cut.

What happens in one frame

Constraints are satisfied by moving positions directly, so any correction automatically becomes part of the next step's velocity. Velocity and position cannot drift out of sync, which makes the method very stable. The cost is a slow leak of energy, and for cloth that actually helps.

  • Inertia: new position = current + (current − previous) × damping + acceleration × Δt². The default damping of 0.99 is the same trick Jakobsen describes, where lowering the 2 in 2x − x* to about 1.99 adds a little drag.
  • Constraint pass: go through every thread in turn. If it is longer than its rest length, pull both ends in by half the excess, and if it is shorter, push them apart. If one end is pinned or held by the pointer, only the other end moves. Repeat this as many times as the Stiffness (solver iterations) setting says.
  • Tearing: after all iterations, cut any thread longer than the tear limit times its rest length.
  • Walls and floor: points outside the canvas are put back on the edge, and on the floor their sideways velocity is halved as a stand-in for friction.

Relaxation: why repeating the pass converges

Fixing one thread knocks its neighbours out of length again. Sweep over all of them enough times, though, and the whole mesh settles into a state where every thread is close to its length at once. Jakobsen called this relaxation (Jacobi or Gauss–Seidel iteration, depending on how you do it). This tool uses each corrected position immediately in the next thread's calculation, which makes it the Gauss–Seidel kind.

Jakobsen wrote that for most pieces of cloth a single iteration is enough to look good. A sheet of several thousand points hanging only from its top row is a different matter. One pass cannot straighten every thread, and the whole cloth stretches like rubber. Drop Stiffness to 2 and the cloth sags and swings slowly. Push it past 40 and it barely stretches at all. With this method, stiffness is not a material property. It measures how thoroughly the solver finishes its work.

A finer grid gets solved less completely with the same number of iterations. When the point spacing falls below roughly 12 pixels, the tool splits each frame into as many as six substeps.

How a tear spreads

When one thread snaps, the load it was carrying shifts to its neighbours. They stretch further, one passes the limit and snaps, and the tear runs along a line. At the default limit of 2.6, a thread with 12 px spacing breaks once it is longer than 31.2 px. At 1.3 the cloth near the top row cannot hold its own weight, and at 6 even a hard yank rarely tears it.

Pin layout changes a great deal. The default, a pin every fourth point, lets the cloth droop between pins into scallops. Pinning only the two corners makes the middle sag deeply and concentrates the weight on the top threads. Pinning the whole top row spreads the load most evenly and holds up best.

Worked examples

Working out the breaking length

Input
Point spacing 12 px, tear limit 2.6
Output
Snaps above 12 × 2.6 = 31.2 px

The check runs after all constraint iterations, so a thread that is only stretched briefly partway through the solve does not snap.

How much velocity damping 0.99 leaves after one second

Input
60 frames per second, 1 substep vs 6 substeps
Output
0.99⁶⁰ ≈ 0.55 in both cases

The damping value is defined per frame at 60 fps. With n substeps each one multiplies by 0.99^(1/n), so a finer grid does not make the swinging die out any faster.

How to use it

  1. Press and drag on the canvas to pull the cloth.
  2. Swipe with the Cut tool or the right mouse button to slice it.
  3. Adjust gravity, wind, tear limit, stiffness and pin layout.
  4. Pick a pattern or drop in an image to print on the cloth.

Key terms

Verlet integration (position form)
x_new = 2x − x_prev + aΔt². No velocity is stored. The difference between the last two positions stands in for it.
Distance constraint
A rule that two points must stay a fixed distance apart. In this cloth, each one is a thread.
Relaxation
Satisfying many constraints by fixing them one at a time and repeating until the whole set is close to satisfied.

Frequently asked questions

The cloth stretches too much.

Raise Stiffness (solver iterations), especially after increasing the grid resolution. With too few iterations the threads never get back to their rest length and the cloth behaves like rubber.

It tore on its own while hanging.

Either the tear limit or the stiffness is too low, so threads stretched by the cloth's own weight passed the limit. Raise one of them or pin the whole top row.

Is cloth in games made like this?

This approach and its successor, position-based dynamics, are widely used in games. Production cloth adds diagonal threads for shear and skip-one threads for bending, and handles collisions with characters. Switch on Shear constraints and Bending constraints here to see what they change.

Sources

Last reviewed:

Privacy and how data is handled