[HN Gopher] Cloth
___________________________________________________________________
Cloth
Author : memalign
Score : 401 points
Date : 2025-04-26 05:31 UTC (17 hours ago)
(HTM) web link (www.cloudofoz.com)
(TXT) w3m dump (www.cloudofoz.com)
| rikroots wrote:
| 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
| wingerlang wrote:
| 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.
| ribcage wrote:
| 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.
| sashank_1509 wrote:
| So beautiful, robotics simulation can benefit from something like
| this. The state of cloth simulation in robotics is still pretty
| pathetic
| brcmthrowaway wrote:
| Is this the new Ciechanowski
| sph wrote:
| 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?
| Karliss wrote:
| 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.
| Azrael3000 wrote:
| 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.
| debugnik wrote:
| You mean for this submission? The window title says "Verlet
| simulation test".
| Azrael3000 wrote:
| Ah thanks I missed that. Then it seems there is nearly no
| damping used.
| rikroots wrote:
| 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
| debugnik wrote:
| 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...
| praptak wrote:
| 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.
| polotics wrote:
| Does this mean I can finally get a robot to fold my shirts in ten
| years?
| DonHopkins wrote:
| Yes, but you will have to wear a hinged stainless steel shirt
| that makes you look as ugly as a CyberTruck.
| skrebbel wrote:
| worth it!
| stefanka wrote:
| 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
| m0llusk wrote:
| Are the Foldimate and Laundroid not meeting your needs?
| polotics wrote:
| Can you clarify if Foldimate is still a going concern? Their
| Wikipedia page says they folded, but some website is trying
| to sell Foldimates. As for Laundroid, 16000 is more expensive
| than getting the work done elsewhere.
| mmwelt wrote:
| Another one for the browser: https://oimo.io/works/cloth/
| stefanka wrote:
| And another one (Rusty with bevy).. runs better on desktop
| rand0m4r wrote:
| simply lovely (like the other stuff on that website)
| varun_ch wrote:
| such an unbelievably cool website.
| luotuoshangdui wrote:
| Cool. When can we get this kind of cloth interaction in games?
| spiralganglion wrote:
| Splinter Cell, from 2002: https://web.archive.org/web/2022020
| 7182149/https://gfycat.co...
| swiftcoder wrote:
| 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
| falcor84 wrote:
| This reminded me of this cool Polygon video examining the
| incredible cloth design in the game Elden Ring
|
| https://youtu.be/wSSqx-Dh6ko
| stefanka wrote:
| The author created some Godot addons. Is this made with Godot
| too? Would be a nice to have for a free game engine
| __loam wrote:
| Godot can target the web so it's conceivable
| faeyanpiraat wrote:
| Is there a simple way to do fluid (air) simulations like this?
| xiaoyu2006 wrote:
| No they are completely different.
| mattfrommars wrote:
| 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
| gosub100 wrote:
| 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.
| jeffreygoesto wrote:
| Then you read into things like runge-kutta and implicit
| methods that make your little simulation not blow up...
| timeforcomputer wrote:
| 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.
| qoez wrote:
| 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.
| DavidPiper wrote:
| 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)
| andai wrote:
| 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.
| simpaticoder wrote:
| _> 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/
| ninju wrote:
| Click on the word in front of "Cloth Type" to change it to a Grid
| for even a cooler interaction
| atan2 wrote:
| I was able to understand verlet integration and write my own
| cloth simulation after reading the blog post from Marian Pekar:
|
| https://pikuma.com/blog/verlet-integration-2d-cloth-physics-...
| BlueTemplar wrote:
| > Fun fact: We pronounce Verlet as [veR'le]... but remember
| that it's only _Verlet_ if it comes from the Verlet region of
| France; otherwise, it 's just sparkling Euler.
|
| Brilliant !
| Borzadaran wrote:
| 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!
| Borzadaran wrote:
| 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!
| gitroom wrote:
| 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?
| 1001directories wrote:
| Can someone update this so that I can blow in to my phone and
| make the cloth move?
___________________________________________________________________
(page generated 2025-04-26 23:00 UTC)