Press Drop and watch the room change
Three sheets of fabric fall at once. The ivory canopy catches on a cluster of moons. Green cloth folds over a crowned arch. Plaid settles onto a cantilever throne, because a normal chair apparently was not difficult enough.
Textile Alchemy is a live cloth laboratory in the browser. Each station starts with a different fabric, shape, and material preset. You can run all three together or isolate one specimen and see what changes.
What you can do
- Drop, reset, pause, or hit the cloth with a gust of wind.
- Grab the fabric directly and pull a fold into a new position.
- Adjust gravity, stretch, bend, damping, friction, and ambient wind.
- Turn self-collision on or reveal the hidden collision forms.
- Orbit the gallery, fly through it with a keyboard, or use the phone controls.
How the cloth moves
The simulation uses extended position-based dynamics, usually shortened to XPBD. Instead of asking the browser to solve one enormous physics equation, XPBD keeps correcting the cloth in small steps. Those corrections preserve the sheet, let it bend, and stop it from passing straight through the sculptures.
The physics runs in a Web Worker so the solver does not have to fight the interface for every frame. The renderer receives fresh particle positions and turns them into smooth Three.js meshes. Desktop machines use denser cloth grids. Phones and lower-power devices use a lighter grid automatically.
A complete browser build
Textile Alchemy runs on Three.js r185, WebGL, ES modules, and procedural WebAudio. The gallery is a static GLB scene. The cloth is generated at runtime from deterministic grids, which means the browser is doing the folding instead of replaying a baked animation.
There is no framework, CDN, account, or server-side runtime. Once the files load, the gallery has everything it needs.
Materials and provenance
The experience adapts the ClothDrop Reborn Blender study into an interactive solver. Fabric001, Fabric014, and Fabric057 come from ambientCG under CC0. ClothDrop Reborn is GPL-3.0-or-later, and Three.js is MIT licensed.
The original Blender scene supplied the room and collision forms. The browser rebuilds the cloth so every drop, gust, and grab can happen live.
Before you launch
Use a current browser with WebGL enabled. A mouse or trackpad gives you the easiest way to pull the fabric, but the simulation also includes touch controls and a mobile quality mode.
Related builds
Blackbird Recon uses Three.js r185 for a Cold War flight campaign. MMS4 Ephemeris Lens turns NASA spacecraft data into another interactive browser scene.