6 ms·
Cloth
- rikroots 1y agoI'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 https://codepen.io/dissimulate/pen/eZxEBO [2] - https://github.com/Dissimulate/Tearable-Cloth https://github.com/Dissimulate/Tearable-Cloth
- wingerlang 1y agoHere's mine from 14 years ago https://www.youtube.com/watch?v=G05M_Y6NQVM 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 1y agoVideo game Hitman from 2000 had cloth. Mirror's Edge from 2008 had tearable cloth. And I am pretty sure they weren't the first.
- diss 1y agoThat 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.
- sashank_1509 1y agoSo beautiful, robotics simulation can benefit from something like this. The state of cloth simulation in robotics is still pretty pathetic
- brcmthrowaway 1y agoIs this the new Ciechanowski
- sph 1y agoThese 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 1y agoSearch for "numerical integration" in the context of physics simulation/game engines. You can use https://en.wikipedia.org/wiki/Numerical_methods_for_ordinary_differential_equations 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 1y agoWould 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 1y agoYou mean for this submission? The window title says "Verlet simulation test".
- Azrael3000 1y agoAh thanks I missed that. Then it seems there is nearly no damping used.
- polotics 1y agoDoes this mean I can finally get a robot to fold my shirts in ten years?
- DonHopkins 1y agoYes, but you will have to wear a hinged stainless steel shirt that makes you look as ugly as a CyberTruck.
- skrebbel 1y agoworth it!
- stefanka 1y agoSimulating 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
- m0llusk 1y agoAre the Foldimate and Laundroid not meeting your needs?
- polotics 1y agoCan 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 1y agoAnother one for the browser: https://oimo.io/works/cloth/ https://oimo.io/works/cloth/
- stefanka 1y agoAnd another one (Rusty with bevy).. runs better on desktop
- rand0m4r 1y agosimply lovely (like the other stuff on that website)
- varun_ch 1y agosuch an unbelievably cool website.
- luotuoshangdui 1y agoCool. When can we get this kind of cloth interaction in games?
- spiralganglion 1y agoSplinter Cell, from 2002: https://web.archive.org/web/20220207182149/https://gfycat.com/helpfulhalfanura https://web.archive.org/web/20220207182149/https://gfycat.co...
- falcor84 1y agoThis 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
- imiric 1y agoThis 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.
- stefanka 1y agoThe author created some Godot addons. Is this made with Godot too? Would be a nice to have for a free game engine
- __loam 1y agoGodot can target the web so it's conceivable
- faeyanpiraat 1y agoIs there a simple way to do fluid (air) simulations like this?
- xiaoyu2006 1y agoNo they are completely different.
- diss 1y agoNo, fluid simulation is much more complex, but there are some relatively simple Smoothed Particle Hydrodynamics demos out there.
- mattfrommars 1y agoHow 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 1y agoit'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 1y agoThen you read into things like runge-kutta and implicit methods that make your little simulation not blow up...
- diss 1y agoThis example actually appears to be 2d.
- timeforcomputer 1y agoI 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.
- ninju 1y agoClick on the word in front of "Cloth Type" to change it to a Grid for even a cooler interaction
- atan2 1y agoI 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-simulation https://pikuma.com/blog/verlet-integration-2d-cloth-physics-...
- BlueTemplar 1y ago> 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 !
- Borzadaran 1y agoThis 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 1y agoWhat 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 1y agoLove 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 1y agoCan someone update this so that I can blow in to my phone and make the cloth move?
- account-5 1y agoCan 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.