Menu

Individual skill

3d-cloth-material

0upvotes

Build convincing woven cloth in Three.js, with a thread-level weave normal map, sheen and anisotropic highlights, folds that never stretch the texture, hems with thickness, stitches, seams, frayed edges, fold occlusion, dye and wear variation, and light passing through thin fabric. Use for linen, silk, wool, canvas, curtains, banners, cloaks, tablecloths, tapestries or any 3D drape that currently looks like a plastic sheet, a stretched texture, or a flat coloured plane.

agent-skills/3d/3d-cloth-material/SKILL.md

Read pinned source

Source commit 5ea1661a0e05d82b054553daaa6baf6d0233c33c

What was checked

Matches the observed repository HEAD
Yes
Scanner rules are current
Yes
Repository scan complete
No
Skill scan complete
Yes
Observed behavior
Local scripts
Last checked
Nov 9, 2026

These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.

Install this skill

Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.

An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.

Repository context

Repository stars (not skill ratings)
7,341
Repository last updated
Nov 8, 2026
License
MIT

Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.

Files and excerpt

File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.

Browse files
Read excerpt

# 3D Cloth Material

**Mechanism:** hang the cloth as rows whose *tangent angle* is the fold signal, so arc length equals the rest coordinate `s` and the weave never stretches. Then let a thread-level weave, sheen, hem thickness and light through the gaps do the reading of "fabric".

Nearest neighbours: `3d-high-resolution-textures` chooses texel density, mipmaps and delivery for any material; use it for the budget and stay here for what makes *cloth* different (weave interlacement, folds, sheen, hems). `3d-wood-material`, `3d-paper-material` and `3d-metal-material` cover their own surfaces; this skill owns woven and sewn fabric only. It is not a cloth *simulation*: for a character's flowing cape or a flag that collides, simulate (Verlet or Blender cloth) and bake, then keep the material rules below.

Extracted from KIBORI 木彫, a dark WebGL workshop where a roll of indigo canvas (the dōgu-maki) lies under a warm key light and had to survive a macro close-up. Ported from there: the weave bake, the stitch shader, half-circle hem turn-under, wear on thread tops, the sheen constants. Newly built for this skill (Kibori has one indigo canvas, not three fabrics): the tangent-angle fold curve, satin and twill interlacements, silk/wool/linen tables, tabs on the rod, raw-edge fray, fold AO, backlit transmission, wind. `demo.html` is the reference.

Demo: Three.js r169 · WebGL · GLSL (`MeshPhysicalMaterial` + `onBeforeCompile`), vanilla JavaScript, no post chain.

## The rules, each with the failure it prevents

1. **Integrate folds from an angle, not a height.** `α(s) = a·(sinθ + 0.16 sin(2θ+0.8)) + …`, then `x += ds·cos α`, `z += ds·sin α`. Failure: a height field `z = A·sin(kx)` gives arc length 1 + slope², so the weave swims and stretches 30–80% on every fold. With the angle form `uv = (s, v)` in metres is exact. Keep `|α| < 1.45` rad; past that it clamps into flat plateaus and folds become tubes with black seams.
2. **Uv is material metres, never re-fitted per frame.** Do not recompute uv from the moving surface. Failure: weave shimmers and crawls in wind. Set `texture.repeat = 1/(threads × pitch)` so one texel tile is `NT` threads; linen 1.6 mm, silk 0.7 mm, wool 2.6 mm pitch.
Back to top