3D Cloth Material

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.
3. Bake interlacement, not noise. Each thread has its own width (0.80–0.97), tone and a slub (Gaussian thickening up to 0.34). Warp height blends over/under across cell borders by 0.5·smoothstep(0.05, 0.5, |t|). Plain = (A+B)&1, twill 2/1 = (A+B)%3 < 2, 5-harness satin = (2A+B)%5 != 0 warp-over. NT must be a multiple of the repeat (32, 24, 40) or the tile shows a seam. Failure: a tiled noise normal map reads as stucco or leather.
4. Spun yarn gets a twist. Add 0.22·twist·sin(2π(5·along + 1.3·across)) to each thread height (twist 0.10–0.14 for linen and wool, 0 for silk). Failure: linen looks like wire mesh.
5. Two dyes, per-thread tone. Colour mix(warpDye, weftDye, weftOnTop·shot); silk uses shot 1.0 (madder red warp, gold weft), the rest 0. Tone mix(0.86, 1.14, threadTone), cavity mix(0.5, 1, smoothstep(0.05, 0.85, height)), blotch + warp-direction streaks 1 + var·((blot−0.5)·0.62 + (streak−0.5)·0.22). Failure: one flat albedo on a woven map looks printed.
6. Sheen is the fabric, and it must be small. sheen 0.5–1.0, sheenRoughness 0.28 (silk) – 0.82 (wool), and sheenColor = dye lightened × 0.62. Failure: near-white sheenColor blows out to a milky rim under a warm key. Never set sheen to exactly 0 at runtime (0.0001); crossing zero recompiles the program and hitches 200+ ms.
7. Silk gets anisotropy, wool gets fuzz. Silk anisotropy 0.85, roughness 0.36; linen 0.90 rough with sheen 0.55; wool 0.96 rough with sheen 1.0. Keep anisotropy above 0 at creation (0.0001) so the define never flips.
8. Fold occlusion is not optional. Cast and receive the key's shadow map (normalBias 0.012, bias −0.0004, DoubleSide shadows) and add a vertex AO from the fold depth 0.62 + 0.38·smoothstep(−0.075, 0.035, zFold) on indirect light. Failure: without both, valleys light up like the crests and the folds look painted.
9. Edges have thickness. Turn every free edge under on a half circle, P = edge + out·r·sinφ − N·r(1−cosφ), φ ∈ [0, 0.94π], r = 1.1 mm silk, 2.2 mm linen, 4.6 mm wool. Return the bottom hem up the back at 2r + 0.2 mm with flipped normals. Failure: a zero-thickness cut edge is the loudest tell for CG cloth in a close-up.
10. Stitch in the shader, in cloth metres. Thread arches between holes (4·x(1−x) over 74% of the pitch), the needle groove and pucker feed the normal by finite difference, faded by fwidth. Hem 3 cm up, sides 2.2 cm in, seam ±7 mm with a proud ridge that puckers every 4 pitches. Failure: geometry stitches z-fight and alias; texture-painted ones do not follow the folds.
11. Raw edge: draw out the weft. Beyond the cut, discard fragments except the warp threads (|fract(u/pitch)−0.5| < 0.36), each with a random length F·(0.3+0.7·hash). Failure: an alpha fringe texture has no thread structure.
12. Thin cloth passes light. emissive += trans · lightColour · dye·(1.7,1.2,0.85) · pow(max(0, −N·L), 1.15) · gap · thin with gap = mix(1, 0.42, height) so threads block and gaps pass. Silk 1.05, linen 0.6, wool 0.06. Failure: without it a lit window behind a curtain does nothing.
13. Wear where cloth is touched. wear = clamp(aWear·(0.25+height) + (fbm−0.5)·0.3, 0, 1) → mix dye toward a pale colour by wear·threadTop. Hems +0.4, crests +0.3. Failure: uniform dye reads brand new.