Over, Under: WebGL2 Weave Engine and Cloth Simulation

Studio R&D, interactive exhibitions. Built as the publication for an exhibition that has not been held. The renderer, the cloth simulation and the research are complete and run live.

The thesis is that in cloth the picture is the structure: every crossing of warp and weft is both a pixel and a bond. A gallery of cloth photographs would only show that. The visitor needed to change the structure and watch the picture change with it, and every claim along the way had to stand up.

The weave maths and a hand-written WebGL2 renderer compute every image from weaving drafts. Nothing is photographed. A flat renderer takes over in browsers without WebGL2, so the exhibition never breaks.

At the cut, a position-based dynamics simulation lays the cloth on the table: a grid of particles with gravity, stretch and shear constraints between neighbours, a bend constraint two apart, and the table as a plane with friction. The resting pose is worked out in idle moments, 8 ms at a time, rather than in one long pass.

Ten stations, one job each: Selvedge, Crossing, Draft, Float, Satin, Colour, Card, Damask, Cut, Colophon.

Every historical and technical claim was checked against a source and logged as sourced, calculated or illustrative.

Visitors edit a draft, flip a crossing, weave their own word as damask and watch a cut cloth fall onto the table. In the DOM only opacity and transform move; everything else moves in the cloth.

173 of 173 automated checks passed in Chromium and WebKit, at seven viewports, with reduced motion and with WebGL switched off.

Every image computed live from drafts, with a working fallback when WebGL2 is missing.

Measured on the published build (Chromium 141, axe-core 4.13, Lighthouse 12.8 desktop preset, October 2026):

The whole exhibition, its WebGL2 renderer, six GLSL ES 3.00 shaders and the cloth simulation weigh 226 KB in one file, 99 KB gzipped.

0 third-party requests.

0 axe violations against WCAG 2.2 AA at 1440 px and at 390 px.

Lighthouse 100 for accessibility, best practices and SEO.

0 JavaScript errors with WebGL disabled; the flat renderer takes over and every word of the exhibition still renders.

Live build: https://studio-helpers.com/work/over-under/

Brief the studio: studio-helpers.com · WhatsApp +92 346 6616118 · Sulmancheema82@gmail.com