Nothing in the 3D view is a ready-made model. The garment is cut from flat pieces, sewn, printed and draped in your browser, in six steps that run again whenever you change something.
Cut the pattern
Each block is drawn in centimetres from a few measurements: half chest, length, neck width and drop, sleeve angle, length and cuff. The outline is sampled on a 2.4 cm grid, and grid points that fall outside it are snapped onto the edge, so the cloth edge follows the cut line. The tote is two rectangles. The cap's six gores and brim are unrolled from a dome, so the flat pieces match the curved ones.
Pieces –Nodes –Triangles –
Sew the seams
Front and back share their shoulder, sleeve and side lines, so the same grid point on each piece is joined by a zero-length stitch. The hood's neck edge is matched to the neckline by distance along the curve. Stitches tighten over the first second, which is the drape you see on load.
Shoulder
Sleeve top
Underarm
Side seam
Stitches –
Set the type
Text layers are laid out by Weft, the measuring code from Textile. It measures each word once with canvas, then breaks lines with plain arithmetic, so a relayout on every keystroke costs almost nothing. Arc bends those lines onto a circle. Circle fill pours them through a round shape, one line width at a time.
const P = Weft.prepare(text, '100px Anton')
Weft.layoutWithLines(P, boxWidth, lh) // Box, Arc
Weft.flow(P, { lineHeight: lh, bottom: D,
slots: (y0, y1) => Weft.polygonSlots(circle, y0, y1) }) // Circle fill
Weft.cells(P, line) // per-glyph x, kerning included
Print the atlas
Every visible layer is drawn into one 2048 px texture at up to 12 px per cm, clipped to its piece. Each cloth node keeps the texture position of its spot on the pattern, so the print stretches and folds with the fabric. This is the live texture:
Drape the cloth
Every frame runs two Verlet substeps. Each one makes several passes over all links: structural, shear and bending springs, plus the stitches. Rib bands are cut 20% short across their ridges, so cuffs and hems gather. Worn, the cloth is pushed out of an invisible body made of ellipsoids and jointed capsule arms. It drapes in an A-pose that matches the sleeve cut, then the arms lower and the body idles or walks while the cloth follows. Structural threads may not stretch past 6%, which keeps the fabric from sagging like rubber. On the dress form, the same torso stands without arms. On the hanger, the shoulder seams are pinned and front and back are kept from passing through each other. The tote hangs from its four handle points. The cap is structured, so it is placed on its block rather than simulated.
Links –Passes –Solver –
Shade it
WebGL lights the surface and steps the light into 20 grey tones, as the original cloth did. It adds a thread every 8 mm and inks hems, ribs and stitching from a second texture. Puff and embroidery read the edges of the print to raise it.