Cloth(cloudofoz.com)
cloudofoz.com
Cloth
https://www.cloudofoz.com/verlet-test/
59 comments
Another one for the browser: https://oimo.io/works/cloth/
such an unbelievably cool website.
Cool. When can we get this kind of cloth interaction in games?
Splinter Cell, from 2002: https://web.archive.org/web/20220207182149/https://gfycat.co...
Good memories ^^
This sort of thing was all the rage in the late 2000s. NVIDIA acquired PhysX, and suddenly every AAA game had cloth animation (just so long as you bought an nvidia GPU)… mirror’s edge, for example, has a ton of interactive tarpaulins and drapes if you play it on a supported card
Mirror’s Edge
simply lovely (like the other stuff on that website)
And another one (Rusty with bevy).. runs better on desktop
Forgot the link?
I did. Thank you
https://jbargu.github.io/cloth-simulation-bevy-rust/
And someone ported the one of the thread already
https://github.com/roackb2/verlet-rs
And someone ported the one of the thread already
https://github.com/roackb2/verlet-rs
I was able to understand verlet integration and write my own cloth simulation after reading the blog post from Marian Pekár:
https://pikuma.com/blog/verlet-integration-2d-cloth-physics-...
https://pikuma.com/blog/verlet-integration-2d-cloth-physics-...
> Fun fact: We pronounce Verlet as [vɛʁ'lɛ]... but remember that it's only Verlet if it comes from the Verlet region of France; otherwise, it's just sparkling Euler.
Brilliant !
Brilliant !
How do people go from web dev/gradle/java knowledge to build something like this.
For me, sometimes I wonder since I never did CS undergrad, I will never understand any of this no matter how many programming langauge I learn. I did dabble a bit with OPENLY, LIBGDX, GODOT, unity but to come to with cloth simulation from scratch, damn
For me, sometimes I wonder since I never did CS undergrad, I will never understand any of this no matter how many programming langauge I learn. I did dabble a bit with OPENLY, LIBGDX, GODOT, unity but to come to with cloth simulation from scratch, damn
It’s actually a lot simpler than you might think. I say that having written the “tearable cloth” demo linked elsewhere in this thread before I’d even started my SWE career.
In this case it’s basic “verlet” integration, which involves updating 2d vectors forming the grid based on their current and previous position, and constraining them to a certain distance from their immediate neighbours. Draw lines between them and you have a cloth. I first came across it because I was fascinated by physics simulation and it was one of the simplest things to implement. A lot of bang for your buck in terms of results. It gets far more complicated from there.
In this case it’s basic “verlet” integration, which involves updating 2d vectors forming the grid based on their current and previous position, and constraining them to a certain distance from their immediate neighbours. Draw lines between them and you have a cloth. I first came across it because I was fascinated by physics simulation and it was one of the simplest things to implement. A lot of bang for your buck in terms of results. It gets far more complicated from there.
it's not that difficult. in javascript, you represent each point in (x,y,z), give it a mass, and every frame apply gravity, maybe with some noise added. every time the particle tries to move, you use trigonometry to transmit the forces through the edges to the other points + some damping amount so it doesn't runaway. the mass determines how much each point is affected by subsequent forces.
If you aren't ready for it in 3d, do it in 2d.
If you aren't ready for it in 3d, do it in 2d.
This example actually appears to be 2d.
Then you read into things like runge-kutta and implicit methods that make your little simulation not blow up...
A good book you could try, the nature of code by Dan Shifman takes you from zero to hero
And recently he released the 2.0 version of the book
I have felt similar, wanting to learn physics sims. I have had to learn over time to separate domains of knowledge like physics from programming tools used to ~manifest them. Especially starting with gamedev, initially it felt like there should be a natural programming idiomatic way to set up each of the major simulations like rigid bodies, cloth, springs, fluids, so the first thought I had was these sims will be naturally encoded in the language, like a fluid sim being somehow setting up a grid, then choosing some update rules per timestep. But really it is modelling a problem as real mathematics and physics, then mapping this to a language/toolset which perhaps can't naturally express it idiomatically.
There are a few algorithms like some cloth sims based on particle positions and springs, which can be coded easily, but that was misleading to me when trying to improve, I had to dig a lot more into physics and numerical analysis then mapping the problem to code, which can end up clunky and with a lot of magic numbers.
There are a few algorithms like some cloth sims based on particle positions and springs, which can be coded easily, but that was misleading to me when trying to improve, I had to dig a lot more into physics and numerical analysis then mapping the problem to code, which can end up clunky and with a lot of magic numbers.
They're completely different skillsets. You just have to go from the ground up and grind to learn it all (this demo isn't that hard but generally it could take years). You probably have to unlearn a ton of stuff you adapted to when learning java/web dev.
At the end of the day, it's all just maths and physics.
You didn't specifically ask about game development, but that domain is where the majority of graphics, mathematics, lighting, physics, etc, knowledge is distributed. And it can be difficult to find information solely about (e.g.) cloth simulation and other niche topics without it being coupled into game development resources.
I happened to read https://alextardif.com/LearningGraphics.html today, which might give you some pointers in various directions. https://learnopengl.com/ gets a consistently good rap, even today when there are newer APIs like Vulkan, Metal and DX12. Consider the API as 5% of the problem to solve though (less tbh, though Vulkan is proving even heavier than I was warned).
If you don't want to learn C/C++, I understand there's a large community around WebGL, so finding their subreddits and other forums could be a good starting point too.
However, again, the API and platform is really just a wrapper around the actual physics simulation (the impressive/novel part).
(Source: I'm a web dev/gradle/java developer who is once again building a game engine in their spare time after a previous attempt many years ago)
You didn't specifically ask about game development, but that domain is where the majority of graphics, mathematics, lighting, physics, etc, knowledge is distributed. And it can be difficult to find information solely about (e.g.) cloth simulation and other niche topics without it being coupled into game development resources.
I happened to read https://alextardif.com/LearningGraphics.html today, which might give you some pointers in various directions. https://learnopengl.com/ gets a consistently good rap, even today when there are newer APIs like Vulkan, Metal and DX12. Consider the API as 5% of the problem to solve though (less tbh, though Vulkan is proving even heavier than I was warned).
If you don't want to learn C/C++, I understand there's a large community around WebGL, so finding their subreddits and other forums could be a good starting point too.
However, again, the API and platform is really just a wrapper around the actual physics simulation (the impressive/novel part).
(Source: I'm a web dev/gradle/java developer who is once again building a game engine in their spare time after a previous attempt many years ago)
I have the opposite problem[0], one of the first programs I wrote as a child was bouncing ball sim. I didn't get the math behind it, I just fiddled with the code until it seemed right.
It's only a few lines of code, and it's still my "hello world" for any interactive programming system or gamedev library.
Make the ball respond to keyboard ... that's velocity! But it's too jerky, so we wanna smooth it out... that's acceleration! Make it fall, that's gravity! (Constant acceleration in one direction.) Ball keeps moving endlessly is weird, let's make it slow down a tiny bit each frame... hey look, that's friction!
The next year in school we learned the math for most of the same stuff (velocity, acceleration, gravity, friction) and it was pretty straightforward to me (even though I still suck at math) because I already had the "instantaneous" (frame by frame) model built up from making it in code, so I could sorta-kinda translate that to the continuous (formula-based) perspective.
I made a cloth thingy like this a few years ago after watching a video about it. The actual cloth sim code is like, 3 lines iirc.
It basically just jiggles the system a few times based on stuff being too close or too far away. So the idea is that the movement of one part transfers to all the others.
I'm a bit confused now since I saw some that have hard limits on the segment length (e.g. chain sims), whereas this one seems to be more stretchy (spring based?)
The neat thing about this stuff is that if you aren't going for physical accuracy (or efficiency), you can half-ass it by just guessing and fiddling with the code or the math. E.g. I still don't get how springs actually work, but my own terrible guess works well enough to be amusing!
[0] Whereas after repeated attempts over decades, web never really clicked for me. Well, it did when PHP was popular... I can still make stuff with PHP and vanilla JS, hahaha.
It's only a few lines of code, and it's still my "hello world" for any interactive programming system or gamedev library.
Make the ball respond to keyboard ... that's velocity! But it's too jerky, so we wanna smooth it out... that's acceleration! Make it fall, that's gravity! (Constant acceleration in one direction.) Ball keeps moving endlessly is weird, let's make it slow down a tiny bit each frame... hey look, that's friction!
The next year in school we learned the math for most of the same stuff (velocity, acceleration, gravity, friction) and it was pretty straightforward to me (even though I still suck at math) because I already had the "instantaneous" (frame by frame) model built up from making it in code, so I could sorta-kinda translate that to the continuous (formula-based) perspective.
I made a cloth thingy like this a few years ago after watching a video about it. The actual cloth sim code is like, 3 lines iirc.
It basically just jiggles the system a few times based on stuff being too close or too far away. So the idea is that the movement of one part transfers to all the others.
I'm a bit confused now since I saw some that have hard limits on the segment length (e.g. chain sims), whereas this one seems to be more stretchy (spring based?)
The neat thing about this stuff is that if you aren't going for physical accuracy (or efficiency), you can half-ass it by just guessing and fiddling with the code or the math. E.g. I still don't get how springs actually work, but my own terrible guess works well enough to be amusing!
[0] Whereas after repeated attempts over decades, web never really clicked for me. Well, it did when PHP was popular... I can still make stuff with PHP and vanilla JS, hahaha.
Yeah I went through a similar process as a kid. I remember learning trigonometry in high school and realising I was way ahead because I'd been using sin and cos to calculate positions of 2d spaceships for years...
>web dev/gradle/java knowledge to build something like this
Web dev (and not just in java) is dominated by "component integration" concerns, containing lots of structure but little content. Computation is delegated to libraries, and the problems more about complexity of integration (at build time) scaled distributed systems (at runtime). In contrast, writing a simulation is computationally intensive, so most of the code is content. It's homogenous where web dev is heterogenous. The problems are entirely constrained by single process performance within a time budget determined by fps.
All that means is that you can focus on one runtime. I suggest the browser, since it solves the distribution problem. Ganja[1] is perhaps the ultimate "content, not structure" simulation project. It's very strange, and lies unmaintained because it's impenetrable. Yet it works. A bit more structured is D3 who's authors have written cutting edge visulation/layout algorithms for you, for example in support of force directed graphs[2]. A more friendly way to get started would be with some variant of Processing[3], which started as a Java thing and then got ported around, including to Python and JavaScript. A word of warning: something like cloth simulation is to a game engine what a single cell is to a mouse. Game engines are huge, in other words, and again you won't be writing simulations, lots of (internal) integrations.
1 - https://github.com/enkimute/ganja.js/blob/master/ganja.js
2 - https://github.com/d3/d3-force/tree/main/src
3 - https://processing.org/
Web dev (and not just in java) is dominated by "component integration" concerns, containing lots of structure but little content. Computation is delegated to libraries, and the problems more about complexity of integration (at build time) scaled distributed systems (at runtime). In contrast, writing a simulation is computationally intensive, so most of the code is content. It's homogenous where web dev is heterogenous. The problems are entirely constrained by single process performance within a time budget determined by fps.
All that means is that you can focus on one runtime. I suggest the browser, since it solves the distribution problem. Ganja[1] is perhaps the ultimate "content, not structure" simulation project. It's very strange, and lies unmaintained because it's impenetrable. Yet it works. A bit more structured is D3 who's authors have written cutting edge visulation/layout algorithms for you, for example in support of force directed graphs[2]. A more friendly way to get started would be with some variant of Processing[3], which started as a Java thing and then got ported around, including to Python and JavaScript. A word of warning: something like cloth simulation is to a game engine what a single cell is to a mouse. Game engines are huge, in other words, and again you won't be writing simulations, lots of (internal) integrations.
1 - https://github.com/enkimute/ganja.js/blob/master/ganja.js
2 - https://github.com/d3/d3-force/tree/main/src
3 - https://processing.org/
This reminded me of this cool Polygon video examining the incredible cloth design in the game Elden Ring
https://youtu.be/wSSqx-Dh6ko
https://youtu.be/wSSqx-Dh6ko
This is great, thanks for sharing.
One thing they didn't emphasize is that cloth has a functional purpose as well. It obscures the shape of the enemy so that it's more difficult to distinguish its model. In a game with very precise hit boxes—arguably the most innovative aspect of FromSoft games—and melee combat being a core gameplay element, free-flowing cloth makes it difficult to gauge how close to the enemy you need to position your character in order to make contact, and how far away you should be to avoid getting hit. Adding this to unpredictable movement and attack patterns adds even more challenge and makes every encounter unique.
This is actually the same quality cloth has in real life as well. An enemy in a robe or cloak is much more intimidating and challenging.
I don't enjoy their games because of the gameplay loop, but they're really some of the best designed video games ever made.
One thing they didn't emphasize is that cloth has a functional purpose as well. It obscures the shape of the enemy so that it's more difficult to distinguish its model. In a game with very precise hit boxes—arguably the most innovative aspect of FromSoft games—and melee combat being a core gameplay element, free-flowing cloth makes it difficult to gauge how close to the enemy you need to position your character in order to make contact, and how far away you should be to avoid getting hit. Adding this to unpredictable movement and attack patterns adds even more challenge and makes every encounter unique.
This is actually the same quality cloth has in real life as well. An enemy in a robe or cloak is much more intimidating and challenging.
I don't enjoy their games because of the gameplay loop, but they're really some of the best designed video games ever made.
I've always loved this sort of cloth animation. I think the first one I saw was dissimulate's tearable cloth demo on Codepen - I can't believe they wrote that code 9 years ago!
[1] - https://codepen.io/dissimulate/pen/eZxEBO
[2] - https://github.com/Dissimulate/Tearable-Cloth
[1] - https://codepen.io/dissimulate/pen/eZxEBO
[2] - https://github.com/Dissimulate/Tearable-Cloth
Here's mine from 14 years ago https://www.youtube.com/watch?v=G05M_Y6NQVM
It's very simple to implement a basic setup like this, and I agree that the results are super cool.
It's very simple to implement a basic setup like this, and I agree that the results are super cool.
That was me! The original version I put on codepen was about 13 years ago. I can’t believe it either… until I realise that was before I landed my first programming job, and it feels like ages.
Video game Hitman from 2000 had cloth. Mirror's Edge from 2008 had tearable cloth. And I am pretty sure they weren't the first.
These cloth simulators always feel somewhat unstable - try generating a Grid cloth, and see it start bouncing and moving randomly. Is this due to accumulating IEEE 754 floating point errors?
Search for "numerical integration" in the context of physics simulation/game engines. You can use https://en.wikipedia.org/wiki/Numerical_methods_for_ordinary... as a starting point.
From what I understand it's not just floating point errors, but due to the nature of approximating continues function as simple discrete steps. Linked wikipedia article has a graph demonstrating that with large steps the error accumulates way before floating point precision is a concern.
There are different numeric integration techniques with different tradeoffs. Stuff like Eulers method, Verlet, Runge-Kutte. In some of them overall energy tends to accumulate in others it gets lost both of which is wrong. Some of the more complex ones tend to behave a bit better, but then you get into the problem whether gains from each individual step being more complex outweighs what you would get from running more iterations of simpler/faster algorithm.
From what I understand it's not just floating point errors, but due to the nature of approximating continues function as simple discrete steps. Linked wikipedia article has a graph demonstrating that with large steps the error accumulates way before floating point precision is a concern.
There are different numeric integration techniques with different tradeoffs. Stuff like Eulers method, Verlet, Runge-Kutte. In some of them overall energy tends to accumulate in others it gets lost both of which is wrong. Some of the more complex ones tend to behave a bit better, but then you get into the problem whether gains from each individual step being more complex outweighs what you would get from running more iterations of simpler/faster algorithm.
I've got a demo[1] where people can play with (my interpretation of) various calculation engines, adjust variables, etc. But seeing this comment made me realise I've never heard of Verlet integration[2] before - not surprising given that I got an F in Maths (and got thrown out of Physics before I could take the exam). So ... how efficient and accurate is Verlet compared to Euler/Runge-Kutte/etc? And what other methods are out there for this sort of calculation?
[1] - https://scrawl-v8.rikweb.org.uk/demo/particles-008.html
[2] - https://en.wikipedia.org/wiki/Verlet_integration
[1] - https://scrawl-v8.rikweb.org.uk/demo/particles-008.html
[2] - https://en.wikipedia.org/wiki/Verlet_integration
Verlet integration became the go-to method for particle effects and soft surfaces back when people wrote their own game engines, mostly thanks to the paper documenting its implementation for the first Hitman game [1]. In fact, I'd say it got cargo-culted by game devs for that purpose and that purpose only, despite it being a general method and competing with others.
[1]: https://www.cs.cmu.edu/afs/cs/academic/class/15462-s13/www/l...
[1]: https://www.cs.cmu.edu/afs/cs/academic/class/15462-s13/www/l...
Would be interesting to know what integrator they use. Verlet schemes can be implemented with very little effort and they don't suffer from this issue (see e.g. the leap frog method).
But in general you would nearly always add some sort of damping mechanism, particularly for CG applications.
You mean for this submission? The window title says "Verlet simulation test".
Ah thanks I missed that. Then it seems there is nearly no damping used.
Energy preservation doesn't work by default in physics simulations unless you specifically code for it (e.g. by periodic explicit adjustment).
It's not only the rounding error, it's also quantisation of time and other minor errors coming from the mathematical model itself.
If the error is on the damping side, you get the real life effect of motion eventually stopping due to energy dissipation. If it's on the acceleration side you get a runaway simulation.
It's not only the rounding error, it's also quantisation of time and other minor errors coming from the mathematical model itself.
If the error is on the damping side, you get the real life effect of motion eventually stopping due to energy dissipation. If it's on the acceleration side you get a runaway simulation.
Can I just say well-done to the author of this site. No external JavaScript, it all runs as is, even on mobile. Most modern text based websites can't claim this.
This is seriously impressive work — simple yet mesmerizing. Really highlights how powerful Verlet integration is for creating natural, believable cloth simulations. For anyone interested, I'd also recommend checking out Jakobsen's paper from the Hitman game engine — it's a classic. Thanks for sharing this inspiring project!
Love seeing people actually ask the hard questions about how stuff like this works. Never fails to make me feel like everythings built up from a million tiny steps over years. You ever hit a point where the math just feels like a wall, or you keep banging away until it clicks?
What fascinates me the most is how setting a few parameters and constraints can lead to such realistic motion. It feels like a reminder that the world around us might just be a set of hidden models and forces — and our task is to discover and simulate them. Beautiful work!
Click on the word in front of "Cloth Type" to change it to a Grid for even a cooler interaction
Can someone update this so that I can blow in to my phone and make the cloth move?
Is this the new Ciechanowski
Does this mean I can finally get a robot to fold my shirts in ten years?
Yes, but you will have to wear a hinged stainless steel shirt that makes you look as ugly as a CyberTruck.
worth it!
Simulating cloth for instance with spring/damper models is quite old. Even older than robotics research on folding cloths—and it has progressed pretty far. See for a recent survey:
https://arxiv.org/abs/2407.01361
https://arxiv.org/abs/2407.01361
Is there a simple way to do fluid (air) simulations like this?
No, fluid simulation is much more complex, but there are some relatively simple Smoothed Particle Hydrodynamics demos out there.
No they are completely different.
So beautiful, robotics simulation can benefit from something like this. The state of cloth simulation in robotics is still pretty pathetic