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.
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).
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.
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.
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.
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!
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.
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.
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.
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!
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.
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.
Most of your comments in this thread have been flagged because they're not substantive and somewhat uncivil. Please don't do that.
My guess is that you know a lot about WebGL programming and don't see anything new or special in this. If so, you should use your superior knowledge to teach others, e.g. by making interesting suggestions, pointing to other work, and so on. Then we all learn something. If you don't want to, that's fine, but please don't post purely dismissive comments.
Most topics that appear here (even the ones on particle physics!) are old hat to somebody or other; HN has experts on a lot of things. If they all expressed their expertise by putting others down, this would be a much sorrier place, with many fewer opportunities to learn.
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...