TranslucentSheets

Options

paper #fbfaf4

css colour

The paper behind the stack. Everything else multiplies down from here, so this is the lightest value in the scene.

ink #9a8e79

css colour

What each sheet multiplies the paper by. Most of the stack is this. A warm grey reads as tracing paper; push it green and it becomes drafting film.

accent #c44400

css colour

Roughly one sheet in five is printed in this instead. Never the first, so the accent always has something crossing it.

sheets 14

3 to 30

How many sheets. Changing it rebuilds the pile, which is the one option here that is not free. Depth is by index, so a new sheet lands on top rather than shuffling the stack.

density 0.12

0.02 to 0.5

How dark one sheet is on its own. The stack compounds from here, so small numbers go a long way: fourteen sheets at 0.3 is a solid brown blot in the middle where they all cross. Behind content, come down rather than reaching for opacity.

spread 1

0.2 to 2

How far the sheets are scattered. Low is a neat pile with heavy overlap, high is a table strewn with them.

radius 0.08

0 to 0.5

Corner radius of a sheet. Real vellum is guillotined rather than die-cut, so keep it small. It exists so the corners do not read as a hard polygon.

sheen 0.55

0 to 1

How much a sheet lifts toward the light as it turns into it. Within a multiply this can only mean less tint, never more light, which is what paper catching a lamp actually looks like.

fibre 0.5

0 to 1

Paper fibre. At zero the sheets are film rather than paper.

elevation 34

0 to 90

Light height above the horizon, degrees.

azimuth 42

0 to 360

Light direction around the compass, degrees.

tilt 0.42

0 to 1

Camera height. 0 is edge on to the pile, which is mostly cut edges. 1 looks straight down at it.

zoom 0.62

0.15 to 1.4

How much of the frame the stack fills.

period 12

2 to 60

Seconds for one loop of the drift. Every sheet travels a closed circle, so the pile returns to exactly where it started and the loop is seamless. Behind content, raise it.

What it needs

Dependencies

three@>=0.160.0

Browser

WEBGL1

Frame budget

~2.5 ms · 1 context

Pinned to

v0.6.2

• three.js must already be a dependency of the project. It is not bundled
• The sheets multiply rather than composite, which is order-independent, so the whole pile is one InstancedMesh and there is no transparency sorting to get wrong
• Nothing in the scene can be brighter than the paper. A multiply has no way to add light, so there is no specular highlight and there cannot be one
• No shadow map. Nothing here is opaque enough to cast one
• One draw call whatever the sheet count. Two triangles each
• The instance matrices are rebuilt on the CPU each frame, which is fourteen compose calls into pre-allocated scratch
• Fill rate rather than geometry is the cost. A stack of large sheets covering the viewport several times over is the worst case
• Paper fibre is grain, and grain is the hardest thing for a video codec to compress, so the recording carries a per-item quality override. The effect itself is unaffected