Awesome Open Source
Awesome Open Source


A fabric design and simulation tool, built in three.js.

Change log

  • May 2: added multiple options for pinned constraints, option to avoid cloth self-intersections (very slow!)
  • April 27: collision detection speedup (abandoned ray-tracing)
  • April 12: improved collision detection, more intuitive GUI controls, made objects transparent
  • April 5: added sliders GUI, mouse control (scroll to zoom, drag mouse to change view)
  • March 22: added shear & bending springs, collision detection, friction, wireframe view


To run online:

You can find the latest version of Drape here

To run on your own computer:

If you're interested in developing drape further, you'll want to download the code and run it locally. Here's how to do that:

  1. Download code and unzip
  2. Easiest way to run: Open one of the .js files with the p5 editor and press play
  3. Alternatively, run the code with a local server (instructions here or here).


Drape is developed by Aatish Bhatia, Demi Fang, Sigrid Adriaenssens, using three.js and starting from the cloth simulation example. This work is shared under the MIT License.

More Reading

Some papers that go into the nitty-gritty of cloth simulation.

  1. GPU Ray-Traced Collision Detection for Cloth Simulation (2015)
  2. Ray-traced collision detection for deformable bodies (2008)
  3. Untangling Cloth (2003)
  4. [Simulation of Clothing with Folds and Wrinkles] ( (2003)
  5. Robust Treatment of Collisions, Contact and Friction for Cloth Animation (2002)
  6. Collision and self collision handling in cloth model dedicated to design garments (1997)

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,158,774
Ray (3,744
Collision (2,665
Collision Detection (500