Drape – a Fabric Simulator | Hacker News Reader

Drape – a Fabric Simulator

aatishb.github.io

258 pointsaatish37 comments

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 http://www.pagines.ma1.upc.edu/~susin/files/AdvancedCharacte... http://kucg.korea.ac.kr/education/2005/CSCE352/paper/provot9... http://luthuli.cs.uiuc.edu/~daf/courses/Games/SimList/Papers...

Very well done, highly mesmerising - loved it. Am just using my S2 Tab now and wasn't expecting such smooth performance (NoSelfIntersect unchecked). Will check out your references.

also...

http://subprotocol.com/system/cloth.html

https://github.com/subprotocol/verlet-js

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

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.

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).

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/product/features

http://www.marvelousdesigner.com/cases/

Their collisions are ok... I like this stuff from Disney: https://www.youtube.com/watch?v=uHfQL5UjXhk

Those knots are gnarly!

That is beautiful. This one also impressed me, modeling individual yarns: http://www.gmrv.es/~gcirio/pdf/YarnLevelWovenCloth_SIGASIA20...

this is most likely ray traced, ie, not computed in real time and not on the client computers

From same company, but geared towards fashion industry: https://clo3d.com/

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 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.

> 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.

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.

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!

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

A good, older introduction can be found here:

http://www.gamasutra.com/resource_guide/20030121/jacobson_pf...

If you want to look into more rigorous and advanced version, reading position based dynamics papers (http://matthias-mueller-fischer.ch) will give you a lot to chew on. Generally speaking Googling "verlet physics" or "position based dynamics" will give you a lot of resources.

It looks like they create particles in a grid, and constraints between the particles to bind them together. Then they create springs and apply forces that simulate what wind would look like.

Probably some form of verlet integration: http://gamedevelopment.tutsplus.com/tutorials/simulate-teara....

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

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.

Yes. The cloth is modelled as particles connected by springs (semi-stiff rods).

This is Verlet Integration, Verlet is good for cloth as Euler tends to tear cloth.

Solving so many constraints simultaneously would be rather intractable so an approximation is achieved iteratively.

This iterative approximation to simultaneous equations is termed Relaxation, more precisely Gauss-Seidel or Jacobi iteration depending on whether the constraints are applied sequentially or in parallel.

For the sequential version each constraint is applied one after another and this repeated a few times, thus 'relaxing' toward a solution that satisfies all the constraints.

Particle movement may be modelled in a variety of ways, Euler, Verlet, Runge-Kutta, (&c.) each with their own pros and cons.

Euler is the most familiar and tracks position and speed, updating the position with speed times time. Basic Euler applies forces to the velocity vector. Sometimes Euler tracks acceleration and forces are applied as changes in acceleration and updates the velocity vector by acceleration times time.

Verlet Integration does not track speed only last and current positions, speed is implicit. In Verlet Forces are applied simply by moving a particle. Basic Verlet Integration thus has a fixed timestep( variable timestep Verlet and other refinements exist).

The problem with Euler integration is that speed and position can lose sync and so the particle is in the wrong place and the cloth stretches and tears.

As Verlet Integration tracks only position it is more stable (and faster to calculate). Long used in molecular dynamics and galaxy formation simulations, Verlet broke into the mainstream with Thomas Jakobsen's work on Hitman[0] where he used it for fast 'realistic enough' rag doll simulations. Verlet tends to correct itself over time and produces fast 'good enough' simulations, the sweet spot for games.

[0] Jakobsen - Advanced Character Physics http://www.cs.cmu.edu/afs/cs/academic/class/15462-s13/www/le...

I disabled cross-grain and drape and it billowed and exploded: 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!

Haha nice! Try that in wire-frame mode and it looks even crazier: 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!

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

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

Code: https://github.com/jontelang/VerletClothTearing

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.

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

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

I've got my i7 Macbook Pro coincidentally plugged into a watt meter, and the power consumption went from 8W to 40W. (This is with the lid closed, fully charged, and an external monitor - idle consumption is more like 15W when the internal screen is active. Maybe subtract a bit if it isn't driving a second monitor. Add more if charging the battery.)

I wouldn't have thought 80°C is anything to worry about from the computer's point of view, but if using it on your actual lap I'd advise a degree of caution.

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.

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

>old laptop

Last time you cleaned it?

you can disable webGL from your browser's settings.

Reply on news.ycombinator.com