GlassCrystal

Options

paper #fbfaf4

css colour

The page behind the glass, and the colour the frame is cleared to. The sheet that gets refracted is built from this, so it sets what the solid is full of.

glass #f4f7fb

css colour

The tint the glass leaves on light that passes through it. This is an attenuation colour, not a surface colour: it is what a given thickness of the material takes out, so the tint deepens where the solid is thick and all but disappears at a thin edge. Setting the surface colour instead paints the object, which is what makes stage-prop glass look like coloured plastic.

key #ffd9a8

css colour

The warm light, one of the two the environment is built from, and the wash on the sheet behind. Warm against a cool fill is what gives the solid two different colours to catch on opposite faces, which is most of what stops it reading as a grey lump.

fill #bcd4ff

css colour

The cool light, opposite the key. Equal to the key in brightness and opposite it in hue is the safe setting; pushing them together flattens the solid.

detail 0

0 to 3, good: 0 to 1

Faces. 0 is a twenty-sided solid with flat shading, which is the cut gem. Each step up quadruples the faces and rounds it off, and by 3 it is a glass ball, which is a less interesting object and a more expensive one.

size 1.5

0.4 to 3, good: 1.1 to 2

How large the solid is in the frame. Past about 2.2 it reaches the edges and stops being an object on a page.

thickness 1.1

0 to 5, good: 0.6 to 2

How much glass the light is treated as travelling through, which is what the tint and the bending are scaled by. At 0 it is a soap bubble: a surface with nothing inside it.

ior 1.46

1 to 2.4, good: 1.3 to 1.8

Refractive index, and the one number here that is a physical quantity rather than a taste. 1.0 is air and bends nothing, 1.5 is window glass, 2.4 is diamond. Above about 1.9 the solid stops transmitting the page and starts mirroring the environment, which is the right look for a gem and the wrong one for a backdrop.

dispersion 1.6

0 to 5, good: 0.8 to 2.5

How far the colours separate at the edges, by refracting red, green and blue at slightly different indices. This is where the colour fringing comes from and there is no rainbow texture anywhere in the effect. At 0 the glass is colourless and noticeably duller.

roughness 0.04

0 to 0.6, good: 0 to 0.15

Frosting. 0 is polished. Past about 0.2 what is behind the glass stops being legible, which is the whole point of putting it there.

iridescence 0.3

0 to 1, good: 0 to 0.5

Thin-film colour on the surface, the way oil goes on water. A little reads as a coating on the glass; at 1 it reads as a soap bubble and fights the dispersion for the same job.

rules 16

0 to 64, good: 10 to 28

Rules across the sheet behind the glass, and the thing the bending is actually visible as. A bend can only be seen as the displacement of something straight, so with no rules the solid is a grey lump however correct the optics are: measured, the shipped version with one hairline rule had a luminance range of 2 out of 255 inside the solid against 26 with these. At 0 the sheet is a plain wash and you get that lump back, which is worth seeing once.

ruleWeight 0.45

0 to 1, good: 0.25 to 0.6

How dark the rules are, as a fraction taken out of the paper. This is the one dial that changes how much glass you can see, because what reaches you through the solid is a dimmer, averaged copy of what is behind it: the contrast inside tracks this almost linearly and lands at about a fifteenth of the contrast on the open sheet. Past about 0.6 the sheet stops being a backdrop and starts being the subject.

drift 0.12

0 to 1, good: 0.05 to 0.3

How far it rises and falls over a period, in scene units. One rise and fall per period, so it closes with the turn. At 0 it only turns.

period 44

4 to 120, good: 24 to 60

Seconds for one turn, and the length of the loop. Both rotation axes and the rise are whole multiples of this same phase, which is what makes the take close exactly. Slow is the point: this is a thing in the corner of a page, not an animation anybody is meant to watch.

What it needs

Category

Backdrops, an effect

Dependencies

three@>=0.163.0

Browser

WEBGL2

Frame budget

~2.4 ms · 1 context

Pinned to

v0.15.1

• Transmission renders the scene behind the object into a buffer and refracts that buffer, so what you see through the solid is really what is behind it. It is not a blur, a frosted overlay or a rainbow texture, and none of those three can be made to bend a straight line the way this does.
• dispersion arrived in three 0.163. On an older copy the property is simply ignored: the glass still works and the colour at the edges disappears, with no error to tell you why, which is why the peer range starts there rather than at 0.160 like the rest of the three.js items.
• The environment is built at runtime rather than loaded. Transmission has to have something to reflect or the glass returns a grey blob, and the usual answer is an HDR file, which is a megabyte of asset and a network request for an effect that is otherwise two files. Four emissive planes are rendered into a cube and prefiltered through PMREMGenerator instead: a key, a fill opposite it, a soft top and a dark floor, which is a lighting setup rather than a photograph of a room.
• Tone mapping is on, which is unusual in this library. Transmission plus a specular off a bright environment goes well past 1 on the highlights, and without a curve those clip to flat white discs that read as holes punched in the glass rather than as light on it.
• Flat shading at detail 0 is what makes it read as cut rather than blown, and it needs per-face normals, which three only computes on a non-indexed geometry.
• Transmission costs a second render of the scene into a buffer every frame, so this is about twice the price of an opaque object of the same size. It is one object against the twenty faces of an icosahedron, so the geometry is free and the cost is entirely the transmission pass.
• The environment is rebuilt only when one of the three colours that define it changes, keyed on those colours rather than on a frame count. Rebuilding it per frame is the mistake that turns a cheap effect into an expensive one, and it is invisible until somebody profiles it.
• detail above 2 is a smooth ball rather than a cut solid and costs more for a worse picture. The interesting range is 0 to 2.