Hanging the curtain

Soft perimeter

A firewall curtain hangs across a doorway while hostile packets blow against it from outside. Grab it and pull hard, or slash it, and they pour through the tear; Patch stitches it shut.

A hand-written XPBD cloth solver (Macklin et al. 2016 and 2019): 121 × 84 particles, about 60,000 distance constraints for stretch, shear and bending, 10 substeps of one Gauss–Seidel pass each per 1/60 s frame, in plain JS typed arrays
Tearing changes the mesh: when the weave is stretched across a grid line past its limit, the vertices on that line are split so the hole really opens, cracks grow from their tips, and Patch merges the vertices back
Packets are particles tested against the cloth through a spatial hash; the ones that get through warm a heat map on the floor
Three.js r186 MeshPhysicalMaterial with sheen over a procedural twill of code glyphs (canvas texture plus a derived normal map), frayed edges in the shader, two shadowed lights and bloom
The attract mode is a scripted session that is re-simulated from a fixed seed when you seek

Keys: R reset, C cut tool, T tear, P patch, Space pause, H notes.

Back to gallery