The Pleochroic
The story behind The Pleochroic
Inspired by Pleochroism on Wikipedia
Built with Pure WebGL2 · Fragment Shader Raymarching
Techniques Raymarched SDF · Anisotropic Absorption · Schlick Fresnel · Internal Refraction · Brilliant-cut Geometry
Direction A single crystal that contains three truths it can never show you at once
Result Orbit a faceted gemstone and discover three hidden colors that shift with your perspective
The Story
Certain crystals absorb light differently depending on the vibration direction passing through them. The same crystal displays completely different colors when rotated — deep violet from one axis, warm straw-gold from another, pale ice-blue from a third. This property is called pleochroism, from the Greek for “more colors.”
The Vikings may have used iolite, one of the strongest pleochroic minerals, as a “sunstone” to navigate on overcast days. The crystal’s color shift revealed the sun’s hidden direction when clouds obscured it. A piece of rock that knows where the light is coming from.
The human truth underneath: you never see all of something at once. A pleochroic crystal contains three colors, but you can only ever see one or two from any single viewpoint. There is no position where all three are visible simultaneously. The crystal’s full identity is fundamentally distributed across perspectives — to know it completely, you must orbit it.
The Take
The experience places a single massive gemstone in near-total darkness. Your cursor orbits the crystal, and as your perspective shifts, the gem transforms — from deep violet-indigo to warm straw-gold to cold ice-blue. The transitions aren’t switches; they flow through rich intermediate zones where two colors blend at axis boundaries.
The interaction is simple but the discovery is layered. First: the crystal changes color. Then: you try to find the angle where all three are visible. You can’t. At most, two blend at the boundaries between zones. The impossibility of a complete view becomes the point — every angle reveals something true, no angle reveals everything.
The Tech
Raymarched SDF Gemstone
The crystal is a brilliant-cut gemstone constructed entirely from half-plane intersections in a signed distance field. The shape uses 48 planar cuts: an octagonal girdle (8 sides), crown facets (8 angled cuts), star facets (8 steeper cuts), pavilion facets (8), lower pavilion facets (8), a flat table on top, and a culet at the bottom. Each cut is a simple max(d, dot(p, normal) - offset) operation — the beauty of SDF geometry is that complex shapes emerge from trivially simple operations.
The entire gemstone is raymarched in the fragment shader — 80 steps maximum, with a surface threshold of 0.0005 for crisp facet edges. Normals are computed from the SDF gradient using central differences at 0.0005 epsilon.
Anisotropic Absorption (Trichroism)
Three crystal axes are defined as unit vectors, spaced 120° apart in azimuth and tilted 20° from horizontal. Each axis transmits a different color: violet-indigo (axis A), straw-gold (axis B), and ice-blue (axis C). The absorption model computes abs(dot(viewDirection, axis)) for each axis, raises it to a sharpness power of 4.0 (so the dominant axis wins strongly rather than producing muddy blends), and uses the weighted sum to determine the transmitted color.
This is physically motivated — in real pleochroic crystals, light polarized along different crystal axes experiences different absorption spectra. The sharpness exponent simulates the nonlinear nature of polarization alignment.
Internal Refraction
After computing the surface hit, the shader fires a second ray into the crystal using refract() with IOR 1.54 (cordierite’s refractive index). This internal ray marches through the crystal interior, accumulating path length. Longer internal paths produce more saturated colors — the same deepening effect you see in real gemstones when light travels further through the material.
Specular Fire
Three light sources create the “fire” — the characteristic flashes of white light that make gemstones sparkle. Blinn-Phong specular with exponents of 256, 128, and 96 produce pinpoint highlights that snap between facets as the crystal rotates. An additional cubic power of the primary specular creates intense facet flashes — moments where a face catches the light perfectly.
Facet Edge Detection
Edges between facets are detected by sampling normals at nearby points and measuring their divergence. Where two flat faces meet, the normals change abruptly, producing a bright edge line (the arris) that defines the gemstone’s geometry.
Interaction
Cursor position maps to spherical orbit coordinates through critically-damped springs (ω=6, ζ=1) for smooth, weighty camera movement. Idle auto-orbit follows a Lissajous path that naturally cycles through all three color zones over ~25 seconds.
This blog post was AI generated with Claude Code. Authored by Artificial Noodles.