Showcase · Systems
Yarn-Level Knit Simulation
A knitted fabric is not a sheet — it is one continuous strand of yarn drawn into tens of thousands of interlocking loops, and everything that makes knitwear recognisable comes from how those loops press and slide, not from any surface. yarnify simulates a stockinette patch at the yarn level, entirely in WebGPU compute shaders: a serpentine yarn with a persistent contact precomputed at every stitch crossing (so there is no runtime collision detection), axial stretch, discrete elastic-rod bending about a rest curvature, one-sided contact repulsion, and velocity-filter Coulomb friction. The hard part is contact at knit density — many yarn elements write to the same node — so forces scatter into shared nodes with fixed-point integer atomics, which makes the whole contact solve data-parallel with no serial fallback. The yarn is drawn as instanced swept tubes, not lines, so it reads as rounded strands. The part worth defending is that the mechanics are proven, not asserted: a relaxed patch curls at its free edges and is ×9 stiffer along the course than the wale — the two signatures a normal-mapped triangle sheet cannot fake — its relaxation dissipates energy monotonically, and the exact WGSL the browser runs is checked headless against a native CPU reference on a real GPU, matching to the fixed-point quantum.
Drag to orbit, scroll to zoom. In grab mode, drag a loop to snag the fabric and watch the tug travel along the yarn before it relaxes; pull the loose end to release interlocks and ladder a run down a wale, unknitting the row stitch by stitch. Tune the yarn stiffness, bend, friction, gravity and rest-curl live. The native gate (
cargo run -p knit-cli -- check && gpucheck) is what proves the patch curls, is anisotropic, and that the browser shader matches the reference on the GPU.Paper & references
The full model — the stitch-mesh topology, the force law as the gradient of a single potential, the persistent-contact formulation, the GPU parallelisation and its atomic force scatter, and the validation gate with its measured curl, anisotropy and GPU-versus-CPU numbers — is written up as a technical paper, with an honest account of what the method does and does not reproduce.
Read the paper (PDF)- [1]J. M. Kaldor, D. L. James, and S. Marschner, “Simulating knitted cloth at the yarn level,” ACM Trans. Graph. (SIGGRAPH), 2008. Google Scholar
- [2]J. M. Kaldor, D. L. James, and S. Marschner, “Efficient yarn-based cloth with adaptive contact linearization,” ACM Trans. Graph. (SIGGRAPH), 2010. Google Scholar
- [3]G. Cirio, J. López-Moreno, D. Miraut, and M. A. Otaduy, “Yarn-level simulation of woven cloth,” ACM Trans. Graph. (SIGGRAPH Asia), 2014. Google Scholar
- [4]G. Cirio, J. López-Moreno, and M. A. Otaduy, “Yarn-level cloth simulation with sliding persistent contacts,” IEEE Trans. Visualization and Computer Graphics, 2017. Google Scholar
- [5]C. Yuksel, J. M. Kaldor, D. L. James, and S. Marschner, “Stitch meshes for modeling knitted clothing with yarn-level detail,” ACM Trans. Graph. (SIGGRAPH), 2012. Google Scholar
- [6]K. Wu, X. Gao, Z. Ferguson, D. Panozzo, and C. Yuksel, “Stitch meshing,” ACM Trans. Graph. (SIGGRAPH), 2018. Google Scholar
- [7]J. Leaf, R. Wu, E. Schweickart, D. L. James, and S. Marschner, “Interactive design of periodic yarn-level cloth patterns,” ACM Trans. Graph. (SIGGRAPH Asia), 2018. Google Scholar
- [8]M. Bergou, M. Wardetzky, S. Robinson, B. Audoly, and E. Grinspun, “Discrete elastic rods,” ACM Trans. Graph. (SIGGRAPH), 2008. Google Scholar
- [9]S. Poincloux, M. Adda-Bedia, and F. Lechenault, “Geometry and elasticity of a knitted fabric,” Physical Review X, 2018. doi:10.1103/PhysRevX.8.021075
- [10]R. Bridson, R. Fedkiw, and J. Anderson, “Robust treatment of collisions, contact and friction for cloth animation,” ACM Trans. Graph. (SIGGRAPH), 2002. Google Scholar
- [11]G. Sperl, R. Narain, and C. Wojtan, “Homogenized yarn-level cloth,” ACM Trans. Graph. (SIGGRAPH), 2020. Google Scholar
- [12]C. Jiang, T. Gast, and J. Teran, “Anisotropic elastoplasticity for cloth, knit and hair frictional contact,” ACM Trans. Graph. (SIGGRAPH), 2017. Google Scholar
- [13]Y. Hu et al., “A moving least squares material point method with displacement discontinuity and two-way rigid body coupling,” ACM Trans. Graph. (SIGGRAPH), 2018. Google Scholar