WovenThreads

Options

ground #efece1

css colour

What shows between the threads. On an open cloth this is most of what you see, so it is doing as much work as either thread colour. Set it dark and a loose weave reads as mesh over a void.

warp #f7f5ed

css colour

The threads running one way. Warp is the set held under tension on the loom, which is why it is the one that runs the length of a bolt.

weft #d9d4c4

css colour

The threads running the other way, passed through the warp by the shuttle. Two slightly different colours is what makes the weave legible: identical ones give a surface whose structure you can only read from the shading.

pitch 13

3 to 60, good: 8 to 22

Distance from one thread to the next, in CSS pixels. This is the count of the cloth: fine pitches read as a shirt, coarse ones as sacking or canvas. Below about 5 the shading of a round thread has nowhere to happen and the weave flattens into a check.

width 0.86

0.1 to 1, good: 0.7 to 0.95

Thread width, as a share of the pitch. At 1 the cloth is closed and no ground shows; below about 0.6 it is a gauze and you are mostly looking at the gaps. Real cloth sits near the top of the range because a loom beats the weft up tight.

float 1

1 to 5

How many crossings a thread floats over before going under, which is the weave itself. 1 is plain weave, the alternating one. 2 and 3 are twills and bring a diagonal with them, which is the single most recognisable thing about denim. Past 4 the floats are long enough that the cloth reads as satin, shiny and structureless.

relief 0.55

0 to 2

How strongly the round threads are lit by their own profile. At 0 the cloth is flat colour and the weave is only readable as a pattern; this is what makes it read as made of something.

light 135

0 to 360 deg

Where the light comes from. It falls differently on the two thread directions, since each is only lit across itself, so turning it shifts which set of threads is the brighter one. That is a real property of cloth and the reason fabric changes as you turn it.

crimp 0.45

0 to 1

How dark the thread underneath goes where it passes beneath. This is the shadow of the thread on top. At 0 the interlacing is a hard edge instead of depth, which is the difference between cloth and a woven-looking pattern.

wander 0.1

0 to 0.45

How far the threads wander from their lines, as a share of the pitch. Small: real cloth is regular, and this is the slack in it rather than a wave. At 0 it is a perfect machine weave, which is a legitimate and very still way to use this.

period 36

8 to 180 s

Seconds for one cycle of the wander. Long, because this is a surface and not an animation.

What it needs

Category

Backdrops, an effect

Dependencies

None at all

Browser

WEBGL2

Frame budget

~0.2 ms · 1 context

Pinned to

v0.13.0

• The interlacing is the item, and it is one comparison per crossing. Two sets of lines crossing is a grid: the threads pass through each other and the surface has no structure at all. The comparison is what turns it into cloth
• Changing that comparison from alternating to shifting is the difference between plain weave and twill, and the diagonal appears in the surface the moment it does. That is why denim has a diagonal in it
• The threads are round, shaded by their own cylindrical profile: the height across a cylinder is the root of one minus the square of the across-coordinate, and the slope of that is the normal. Flat threads are stripes
• The thread that goes under is darkened where it passes beneath, which is the shadow of the one above it. Without it the interlacing reads as a hard edge rather than as depth
• The cloth moves by having its threads wander along their length rather than by being translated, so the weave breathes the way fabric does when there is air in the room. A translated weave reads as a backdrop sliding past
• Because the wander moves a thread's centre, the nearest thread is found from the undisplaced grid and then corrected by that thread's own offset. Exact for any wander under half a pitch, which is far more than cloth does
• Two GLSL traps in one file: half is a reserved word and step is a builtin, and a variable named either fails at compile time rather than at run time
• One WebGL2 context, one full-screen triangle, no buffers and no attributes
• Measured at 0.035 mean absolute change per frame on a 0 to 255 scale and 1.23ms at 640 by 360, which makes it one of the quietest items here: the threads wander rather than travel
• Four evaluations of a two-term wave, for the two threads and their index corrections, plus two square roots for the profiles. No textures, no noise and no render targets
• The index correction is a branch rather than a loop, and it runs at most once per axis because the wander is bounded below half a pitch
• Recorded at 15fps with a raised crf. A fine weave is high-frequency detail across the whole frame, and at 30fps the take was 5.6MB against a 3.5MB budget