◈ lib · drapery
The Drapery
Drapes a material from authored optical coefficients — scatter depth, micro-facet roughness, specular anisotropy, metalness, refractive index — over a closed-form height field. No simulation, so the cloth is a pure function of its parameters and can be permalinked, rendered by a worker, and reproduced exactly. Iridescent coatings use genuine two-beam interference.
A working specimen.
Pass null as the ground for RGBA transparency. Size the canvas backing store explicitly; CSS dimensions alone stretch its pixels.
Minimal example · selected parameters
Mount <canvas width="600" height="360"></canvas> before running this code. Run pixel-buffer functions in a worker for larger outputs.
import { drawDrape } from '@/lib/render/drapery';
const state = {
"material": "Sartorial Super 150s Merino Wool",
"tint": "#2b3140",
"folds": 7,
"depth": 0.3,
"sag": 0.5,
"coating": 0,
"liftX": 0.62,
"liftY": 0.45,
"lift": 0.18
};
const ctx = document.querySelector('canvas').getContext('2d');
drawDrape(ctx, 600, 360, state, [240,233,220]);
// Worker: drapePixels(600, 360, state, null) returns RGBA.Copies component source and tokens directly into your repository with requirements listed for this item: no additional npm dependencies beyond the host framework.
Open-source under MIT. We preserve the source header comment, and invite you to credit the archive on your project's /about, /colophon, or footer. Display our Archival Colophon Seal or copy a citation snippet below. Sites displaying the seal are welcome to submit to our Federation Showcase!
Source
lib/render/drapery.ts
Registry item: /r/drapery.json