
Drape – a Fabric Simulator - aatish
http://aatishb.github.io/drape
======
aatish
Hi, thanks for voting this up! I created this with a few colleagues. Our goal
was to make a fabric simulation tool that might inspire creative exploration
among artists and engineers. I hope you find it fun to play with, and welcome
any feedback and suggestions on how to improve this.

We started from a three.js cloth simulation example and made a bunch of
modifications. The cloth is modeled as a grid of point masses (particles)
connected by springs. We've got options for horizontal & vertical springs
(simulating cross grain, where the cloth threads run parallel to the edges),
diagonal springs (simulating bias grain, where the cloth threads run
diagonally), and springs that connect particles two units apart (simulating
drape / bending stiffness, similar to a starched tablecloth). It's kind of
amazing how a simple system of particles and springs can result in such rich
cloth-like behavior. Other than the springs (which are modeled as constraints
on the distance between particles), the only forces on the particles are wind
and gravity. In addition we have constraints that account for collisions and
simulate friction-like behavior.

We've submitted a paper that explains the details of how this works which I'll
share once it's published, but for now if you're interested in learning more
here are a few references, or google 'verlet integration constraints'. Also
happy to try to answer your questions.

[https://graphics.stanford.edu/~mdfisher/cloth.html](https://graphics.stanford.edu/~mdfisher/cloth.html)
[http://www.pagines.ma1.upc.edu/~susin/files/AdvancedCharacte...](http://www.pagines.ma1.upc.edu/~susin/files/AdvancedCharacterPhysics.pdf)
[http://kucg.korea.ac.kr/education/2005/CSCE352/paper/provot9...](http://kucg.korea.ac.kr/education/2005/CSCE352/paper/provot95.pdf)
[http://luthuli.cs.uiuc.edu/~daf/courses/Games/SimList/Papers...](http://luthuli.cs.uiuc.edu/~daf/courses/Games/SimList/Papers/Baraff-1998-LSC.pdf)

~~~
JoshTriplett
Turning on "no self intersect" produces much more realistic-looking results;
any reason you don't have that on by default?

~~~
vulpino
I'm not the author, but enabling NoSelfIntersect totally ruined the frame rate
for me. I was barely able to open the controls to disable it again. It's
possible it's not on by default as a performance consideration.

~~~
aatish
Yup, that setting is implemented in a somewhat naive way. The way it works is
that I iterate through every pair of points on the cloth, check for when they
get too close, and if they are, I introduce a spring to push them apart. So
effectively this introduces a short-range repulsive force between pieces of
the cloth.

Avoiding self intersections results in more realistic cloth behavior like
folds and wrinkles. The problem is, iterating through all pairs of points
comes at a computational cost, and can really drop the frame-rate,
particularly for large cloths. So I decided to keep this setting off by
default until I have a smarter way to implement this (e.g. using quadtrees).

------
bhouston
This is neat as a personal project restricted to WebGL and real-time.

The state-of-the-art in commercially available cloth/clothing creation
simulation these days is Marvelous Designer and it is available for ~$400. It
does produce results that are pretty phenomenal and hard to tell from real-
life.

[http://www.marvelousdesigner.com](http://www.marvelousdesigner.com)

[http://www.marvelousdesigner.com/product/features](http://www.marvelousdesigner.com/product/features)

[http://www.marvelousdesigner.com/cases/](http://www.marvelousdesigner.com/cases/)

~~~
santaclaus
Their collisions are ok... I like this stuff from Disney:
[https://www.youtube.com/watch?v=uHfQL5UjXhk](https://www.youtube.com/watch?v=uHfQL5UjXhk)

Those knots are gnarly!

~~~
bhouston
That is beautiful. This one also impressed me, modeling individual yarns:
[http://www.gmrv.es/~gcirio/pdf/YarnLevelWovenCloth_SIGASIA20...](http://www.gmrv.es/~gcirio/pdf/YarnLevelWovenCloth_SIGASIA2014.pdf)

------
coord
Dynamic fabric is something I'd love to see more artists working with.

So far the most impressive example I've seen is ZEITGUISED's geist.xyz:
[https://vimeo.com/150824660](https://vimeo.com/150824660) Undulating
impossible fabrics with photo-realistic shaders (and a soundtrack that makes
my head hurt).

It's definitely an experimental art film but it feels more like an impressive
tech demo for what they've been able to accomplish with textile simulation.
Sadly like most art pieces, there's very little in the way of technical on how
they pulled off such interesting stuff.

~~~
bhouston
> Undulating impossible fabrics with photo-realistic shaders

I am fairly sure they were not using custom software, rather off the shelf
tools for both rendering and simulation.

------
lmcnish14
That's pretty cool! Do you have any plans to have it respect the boundaries of
solid objects it comes in contact with such as the poles it's tethered to?
Currently, the cloth will go through the poles instead of interacting with the
poles as solid objects.

~~~
aatish
I'd started off this project by using a fancier ray-tracing method of
detecting and avoiding collisions with arbitrary shaped objects. Unfortunately
it was just too slow for satisfying real-time performance. So finally, I went
with doing the collision detection in a case-by-case way for more simple
shapes (ball, table, etc.). The poles would be easy to add as an option, I may
try to add that in. Thanks for the suggestion!

------
paulpauper
I wish I had more knowledge of the math behind it. Is it done by solving
multiple partial differential equations using finite difference method?

~~~
sesquipedalian
Probably some form of verlet integration:
[http://gamedevelopment.tutsplus.com/tutorials/simulate-
teara...](http://gamedevelopment.tutsplus.com/tutorials/simulate-tearable-
cloth-and-ragdolls-with-simple-verlet-integration--gamedev-519).

Author's github page also has links to a list of cloth simulation resources.

~~~
sillysaurus3
That might be what the physics engine does, but the demo is just using a
physics engine to build a constrained array of particles with springs.

------
eigenbom
I disabled cross-grain and drape and it billowed and exploded:
[https://twitter.com/eigenbom/status/738887973559668736](https://twitter.com/eigenbom/status/738887973559668736)

Not sure if bug or if those parameters are not in the space of valid options.

Cool project btw!

~~~
aatish
Haha nice! Try that in wire-frame mode and it looks even crazier:
[https://twitter.com/aatishb/status/727270083601551360](https://twitter.com/aatishb/status/727270083601551360)

I left that in as allowable behavior, because our goal with this was not
necessarily to model a realistic cloth but more to experience interesting and
unusual movements and behaviors. So glitch away!

------
zymhan
Reminds me of an old PhysX demo I found in a game years ago.

Can't seem to find much besides this video though:
[https://www.youtube.com/watch?v=eoCbSL2kis4](https://www.youtube.com/watch?v=eoCbSL2kis4)

------
wingerlang
I think I posted this last time this link was shared. But just yesterday I
uploaded my code to github after a request on the video.

It is cloth with tearing and verlet integration. Nothing fancy or even
difficult but it is probably a nice starting point.

Video:
[https://www.youtube.com/watch?v=G05M_Y6NQVM](https://www.youtube.com/watch?v=G05M_Y6NQVM)

Code:
[https://github.com/jontelang/VerletClothTearing](https://github.com/jontelang/VerletClothTearing)

------
khedoros
As a note: this works for me in Chrome 51, but Pale Moon 26 and Firefox 46
both reported that my GPU seems to be incapable of WebGL, when I first tried
it. I had to force it to be enabled in my about:config settings, after which
the demo displayed nicely.

I'm not sure if there's something that I've done wrong, or what.

------
Animats
Very nice. Turn on "No self intersect", or the cloth keeps going through
itself. Turn off "Wind" to see it come to rest.

------
curiousgal
Could've used a warning, my shitty i3 laptop went to 80°c

~~~
NetStrikeForce
Interesting. It works great on my iPad Mini 4 on Safari. Maybe the problem is
either the browser or your graphic drivers, not the CPU.

~~~
curiousgal
It's an old laptop with an integrated GPU running Ubuntu so it's a combination
of all.

~~~
mixedCase
>old laptop

Last time you cleaned it?

