Real-time cloth · WebGL2 · no plugins
A banner of printed cloth hangs in a small studio. Pull it, flick it, let the wind take it, cut it with scissors, drop it off the rod. Every fold is worked out as you watch.
This browser cannot run WebGL2, so here is the banner at rest. Open the page in a current browser to handle the fabric.
Keyboard: arrow keys push the fabric, G sends a gust, D drops it off the rod, S switches to scissors and back, R hangs it again.
Pieces 1 · Thread stretch 0.0%
3,080particles in the sheet
10solver steps every frame
5fabrics, each with its own weight
0plugins or libraries
The banner is a grid of particles, seventy across and forty-four down. Each one is tied to its neighbours along the warp and the weft, across each little cell, and to the particle two along, which is what gives the fabric its resistance to bending.
Every cell is treated as a tiny sail. The air meeting it face-on presses it, the air sliding past drags it along. With the wind off, that same sum is plain air resistance, which is why a flick makes the sheet billow and settle instead of falling flat.
A cut removes the cells under the blade and rebuilds every thread that ran through them. The loose edge frays, the counts update, and a piece that no longer reaches the rod drops onto the plinth and drapes there.
It is simulated live. The banner is a grid of about three thousand particles tied together by roughly eighteen thousand constraints. Every frame the solver takes ten small steps, keeping the threads at their length, letting the cells shear and the sheet bend, and pushing each little patch of cloth against the air.
Your stroke is compared with the fabric as it appears on screen. Every cell the blade passes through is removed and the threads that ran through it are rebuilt without it, so the two sides genuinely come apart. A piece that is no longer attached to the rod falls and drapes over the plinth.
Each fabric has its own weight per square metre, bending softness and air drag. Chiffon weighs about forty grams per square metre and floats on the slightest breeze; denim weighs almost ten times more and folds in slow, heavy creases.
Yes. It uses WebGL2, which current phone and desktop browsers support. On a phone it uses a smaller grid, lowers its own resolution if frames run slow, and stops drawing when it is scrolled out of view.
Yes. Silk is a website template from Apex Flow Digital. One config file sets the words printed on the banner, the fabrics on offer and the studio lighting.
The page, the cloth engine and one config file for your words, fabrics and light.
Get the Silk template