A crystal hall rendered live in the browser — then profiled until it ran everywhere

Client: GrN.dk — demo shelf (demo.grn.dk)
Sector: 3D on the web / product presentation
Period: August 2026

demo.grn.dk/kristallsaal

At a glance

Kristallsaal is a walk-through jewellery hall that runs entirely in the browser: six vitrines of cut-crystal pieces under museum lighting, a mirror-polished floor, and light that actually splits into colour inside the stones. There is no engine download and no build pipeline — one HTML file, one JavaScript module and Three.js, served as static files. It exists to answer a client question with a demo instead of a slide: what does "3D product presentation on the web" feel like at the high end?

Real dispersion — light splits into colour inside the cut stones (Three.js r185)

GPU-profiled performance tiers: the mirror floor goes first, the crystal goes last

Static deploy: one HTML file + ~90 KB of app JS, no build step, no engine download

The challenge

Real-time crystal is one of the hardest materials the browser can be asked to draw. Faceted refraction, dispersion (the rainbow fire inside a cut stone) and a mirror floor are all expensive effects, and the audience for a piece like this — a jeweller's customers — will open it on whatever device they happen to hold. A demo that is beautiful on a gaming PC and a slideshow on a mid-range phone would prove the opposite of what it is meant to prove.

The solution

A vanilla Three.js (r185) build: physically-based crystal with real dispersion, an HDRI-lit hall, post-processing bloom, and a guided walk between vitrines — around 90 KB of application JavaScript on top of the library, loaded through an import map. No bundler, no framework; the whole piece deploys as static files like the rest of the demo shelf.

Then the unglamorous half: the scene was GPU-profiled and given explicit performance tiers. The renderer measures what the device can sustain and degrades in a chosen order — the mirror floor is the first luxury to go, the crystal itself is the last — so a phone gets a simpler hall rather than a broken one. The tier logic was tuned against measured frame rates, not guesses.

The results

The hall runs from desktop workstations down to modest phones, holding its look where the GPU allows and degrading in the intended order where it does not. It shipped through the same card-driven AI delivery loop as everything else here — wow-factor pass, accessibility pass (44 px touch targets), and a cache-busted version badge for every deploy.

As a sales artefact it does its job in the first five seconds: instead of describing what browser 3D could do for a product, it hands the client a URL.