A little turn.
A world of pattern.

01 / Three mirrors, one small world

Imagine three mirrors meeting to form an equilateral triangular tube. Put a few coloured glass pieces at the far end. A ray from your eye can meet a piece directly, or reach it after reflecting off one or more mirrors. The many images come from the same small chamber.

Choose “Chamber without mirrors”, then switch to “Three-mirror glass”. The same eight pieces now appear across the view. This is a perspective view into a three-dimensional chamber; the repeating triangles continue beyond the frame.

02 / Unfold a reflection

Instead of bending a ray at a mirror, imagine reflecting the whole chamber across that wall and letting the ray continue straight. Reflect an equilateral triangle across each edge. The copies tile the plane without gaps, alternating their handedness. Six 60° corners meet around a vertex.

Reflection preserves distances and reverses orientation. Rotation preserves both distances and handedness. Their difference is why copying and rotating an arbitrary picture is not sufficient to reproduce all mirror boundaries.

03 / Begin with a simpler 2D study

Choose “2D symmetry study”. This separate construction folds a circular image into mirrored wedges. Let N be the number of pairs. A pair spans 360° / N and its source wedge spans 180° / N. Six pairs therefore use twelve 30° wedges.

Compare one wedge, its mirrored pair and the complete circle. Turn on the boundary lines. Four pairs use 45° wedges; six use 30°; eight use 22.5°. This is a useful symmetry diagram, while the glass view above uses the fixed three-mirror chamber.

04 / Fold an angle in code

For the 2D study, measure a pixel by its radius r and angle θ. Wrap the angle into one pair, then fold the second half back onto the first. Positive modulo also handles negative angles.

const period = 2 * Math.PI / pairs;
const wrapped = ((theta % period) + period) % period;
const folded = Math.min(wrapped, period - wrapped);
const sampleX = radius * Math.cos(folded);
const sampleY = radius * Math.sin(folded);

The folded angle stays between 0 and π / N. Every mirrored copy reads the same source coordinates. A triangular mirror chamber instead reflects rays against three plane normals using d′ = d − 2(d · n)n, where n is a unit normal.

05 / Make the glass occupy space

Return to “Three-mirror glass”. Each piece is a solid faceted shape with a position, orientation and thickness. Perspective makes nearer surfaces appear larger. Surface normals determine how a facet catches a highlight. Refraction bends light at the entry and exit faces.

Snell’s law is n₁ sin θ₁ = n₂ sin θ₂, with angles measured from the surface normal. Upload a photo to place it behind the glass, or use the built-in backgrounds. Change the refractive index while keeping the pieces still. The background seen through a facet shifts, while the piece itself stays in place.

06 / Add colour with restraint

Coloured glass absorbs some wavelengths more strongly than others. A longer path through the material produces a stronger tint. Fresnel reflection makes a surface more reflective at grazing angles. Small differences between the red, green and blue refractive indices create dispersion.

Toggle colour dispersion and compare the edges. The renderer traces up to nine mirror encounters and one glass entry–exit path per colour. It allows up to four internal glass reflections and uses three colour samples, approximate lighting and scripted piece motion. It does not simulate full spectral light transport, gem-to-gem refraction, caustics or rigid-body collisions.

07 / Turn, settle, keep

Move the pieces to change the contents. Turn the view to rotate the whole image. Dragging follows your hand and stops on release; Play runs a slow study. Keeping the cause of each change clear makes the instrument easier to explore.

Motion starts only on request. Pause to inspect a facet, change one material setting, then save the image. A quiet interface gives the small optical world room to be the main event.

Try it / Separate structure from material

Save three images at the same piece position: without mirrors, with mirrors, then with a different refractive index. Which change repeats the objects? Which changes what you see through them?

The mirrors change the repeated structure. The refractive index changes light paths inside the glass. As an extra study, compare four, six and eight pairs in the 2D diagram and predict the source wedge angle before moving the slider.

Keep a little world

Save the glass render as a PNG, or download the complete lesson and experiment as a single offline HTML file. A geometric SVG fallback is available when WebGL is unavailable. No installation or account is needed.