TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Drape – a Fabric Simulator

258 pointsby aatishalmost 9 years ago

11 comments

aatishalmost 9 years ago
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.<p>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&#x27;ve got options for horizontal &amp; 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 &#x2F; bending stiffness, similar to a starched tablecloth). It&#x27;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.<p>We&#x27;ve submitted a paper that explains the details of how this works which I&#x27;ll share once it&#x27;s published, but for now if you&#x27;re interested in learning more here are a few references, or google &#x27;verlet integration constraints&#x27;. Also happy to try to answer your questions.<p><a href="https:&#x2F;&#x2F;graphics.stanford.edu&#x2F;~mdfisher&#x2F;cloth.html" rel="nofollow">https:&#x2F;&#x2F;graphics.stanford.edu&#x2F;~mdfisher&#x2F;cloth.html</a> <a href="http:&#x2F;&#x2F;www.pagines.ma1.upc.edu&#x2F;~susin&#x2F;files&#x2F;AdvancedCharacterPhysics.pdf" rel="nofollow">http:&#x2F;&#x2F;www.pagines.ma1.upc.edu&#x2F;~susin&#x2F;files&#x2F;AdvancedCharacte...</a> <a href="http:&#x2F;&#x2F;kucg.korea.ac.kr&#x2F;education&#x2F;2005&#x2F;CSCE352&#x2F;paper&#x2F;provot95.pdf" rel="nofollow">http:&#x2F;&#x2F;kucg.korea.ac.kr&#x2F;education&#x2F;2005&#x2F;CSCE352&#x2F;paper&#x2F;provot9...</a> <a href="http:&#x2F;&#x2F;luthuli.cs.uiuc.edu&#x2F;~daf&#x2F;courses&#x2F;Games&#x2F;SimList&#x2F;Papers&#x2F;Baraff-1998-LSC.pdf" rel="nofollow">http:&#x2F;&#x2F;luthuli.cs.uiuc.edu&#x2F;~daf&#x2F;courses&#x2F;Games&#x2F;SimList&#x2F;Papers...</a>
评论 #11834493 未加载
评论 #11833575 未加载
评论 #11834154 未加载
bhoustonalmost 9 years ago
This is neat as a personal project restricted to WebGL and real-time.<p>The state-of-the-art in commercially available cloth&#x2F;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.<p><a href="http:&#x2F;&#x2F;www.marvelousdesigner.com" rel="nofollow">http:&#x2F;&#x2F;www.marvelousdesigner.com</a><p><a href="http:&#x2F;&#x2F;www.marvelousdesigner.com&#x2F;product&#x2F;features" rel="nofollow">http:&#x2F;&#x2F;www.marvelousdesigner.com&#x2F;product&#x2F;features</a><p><a href="http:&#x2F;&#x2F;www.marvelousdesigner.com&#x2F;cases&#x2F;" rel="nofollow">http:&#x2F;&#x2F;www.marvelousdesigner.com&#x2F;cases&#x2F;</a>
评论 #11834479 未加载
评论 #11836467 未加载
coordalmost 9 years ago
Dynamic fabric is something I&#x27;d love to see more artists working with.<p>So far the most impressive example I&#x27;ve seen is ZEITGUISED&#x27;s geist.xyz: <a href="https:&#x2F;&#x2F;vimeo.com&#x2F;150824660" rel="nofollow">https:&#x2F;&#x2F;vimeo.com&#x2F;150824660</a> Undulating impossible fabrics with photo-realistic shaders (and a soundtrack that makes my head hurt).<p>It&#x27;s definitely an experimental art film but it feels more like an impressive tech demo for what they&#x27;ve been able to accomplish with textile simulation. Sadly like most art pieces, there&#x27;s very little in the way of technical on how they pulled off such interesting stuff.
评论 #11834371 未加载
lmcnish14almost 9 years ago
That&#x27;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&#x27;s tethered to? Currently, the cloth will go through the poles instead of interacting with the poles as solid objects.
评论 #11836551 未加载
paulpauperalmost 9 years ago
I wish I had more knowledge of the math behind it. Is it done by solving multiple partial differential equations using finite difference method?
评论 #11833231 未加载
评论 #11833801 未加载
评论 #11833267 未加载
评论 #11833415 未加载
eigenbomalmost 9 years ago
I disabled cross-grain and drape and it billowed and exploded: <a href="https:&#x2F;&#x2F;twitter.com&#x2F;eigenbom&#x2F;status&#x2F;738887973559668736" rel="nofollow">https:&#x2F;&#x2F;twitter.com&#x2F;eigenbom&#x2F;status&#x2F;738887973559668736</a><p>Not sure if bug or if those parameters are not in the space of valid options.<p>Cool project btw!
评论 #11836559 未加载
zymhanalmost 9 years ago
Reminds me of an old PhysX demo I found in a game years ago.<p>Can&#x27;t seem to find much besides this video though: <a href="https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=eoCbSL2kis4" rel="nofollow">https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=eoCbSL2kis4</a>
评论 #11833159 未加载
wingerlangalmost 9 years ago
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.<p>It is cloth with tearing and verlet integration. Nothing fancy or even difficult but it is probably a nice starting point.<p>Video: <a href="https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=G05M_Y6NQVM" rel="nofollow">https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=G05M_Y6NQVM</a><p>Code: <a href="https:&#x2F;&#x2F;github.com&#x2F;jontelang&#x2F;VerletClothTearing" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;jontelang&#x2F;VerletClothTearing</a>
khedorosalmost 9 years ago
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.<p>I&#x27;m not sure if there&#x27;s something that I&#x27;ve done wrong, or what.
Animatsalmost 9 years ago
Very nice. Turn on &quot;No self intersect&quot;, or the cloth keeps going through itself. Turn off &quot;Wind&quot; to see it come to rest.
curiousgalalmost 9 years ago
Could&#x27;ve used a warning, my shitty i3 laptop went to 80°c
评论 #11833538 未加载
评论 #11833608 未加载
评论 #11835451 未加载