Bliv en del af mit community / gratis nyhedsbrev — tilmeld dig her
- Client
- GrN.dk — demohylde (demo.grn.dk)
- Sector
- 3D på nettet / produktpræsentation
- Periode
- august 2026
At a glance
Kristallsaal er en smykkesal, man går igennem, og som kører helt i browseren: seks vitriner med slebne krystalstykker under museumsbelysning, et spejlblankt gulv og lys, der faktisk spaltes i farver inde i stenene. Der er ingen engine-download og ingen build-pipeline — én HTML-fil, ét JavaScript-modul og Three.js, serveret som statiske filer. Den findes for at besvare et kundespørgsmål med en demo i stedet for et slide: hvordan føles »3D-produktpræsentation på nettet« i den høje ende?
Ægte dispersion — lyset spaltes i farver inde i de slebne sten (Three.js r185)
GPU-profilerede performance-tiers: spejlgulvet ryger først, krystallen sidst
Statisk deploy: én HTML-fil + ~90 KB app-JS, intet build-step, ingen engine-download
The challenge
Krystal i realtid er et af de sværeste materialer, man kan bede browseren tegne. Facetteret refraktion, dispersion (regnbueilden inde i en slebet sten) og et spejlgulv er alle dyre effekter, og publikummet for et stykke som dette — en guldsmeds kunder — åbner det på den enhed, de tilfældigvis står med. En demo, der er smuk på en gaming-pc og et diasshow på en mellemklassetelefon, ville bevise det modsatte af, hvad den skulle.
The solution
Et vanilla Three.js-build (r185): fysisk baseret krystal med ægte dispersion, en HDRI-belyst sal, post-processing-bloom og en guidet vandring mellem vitrinerne — omkring 90 KB applikations-JavaScript oven på biblioteket, indlæst via et import map. Ingen bundler, intet framework; hele stykket deployes som statiske filer ligesom resten af demohylden.
Og så den uglamourøse halvdel: scenen blev GPU-profileret og fik eksplicitte performance-tiers. Rendereren måler, hvad enheden kan holde til, og degraderer i en valgt rækkefølge — spejlgulvet er den første luksus, der ryger, selve krystallen den sidste — så en telefon får en enklere sal frem for en ødelagt. Tier-logikken er tunet mod målte framerates, ikke gæt.
The results
Salen kører fra desktop-workstations ned til beskedne telefoner, holder sit udtryk, hvor GPU'en tillader det, og degraderer i den tilsigtede rækkefølge, hvor den ikke gør. Den blev leveret gennem det samme kort-drevne AI-leveranceloop som alt andet her — wow-faktor-gennemgang, tilgængeligheds-gennemgang (44 px touch-mål) og et cache-bustet versionsbadge ved hvert deploy.
Som salgsartefakt gør den sit arbejde på de første fem sekunder: i stedet for at beskrive, hvad 3D i browseren kunne gøre for et produkt, rækker den kunden en URL.