Eigen toepassing · Live 3D in de browser
Het retro pompeiland van Porsche Classic Center Gelderland, nagebouwd op schaal 1:18 met een 911 GT3 RS en een 718 Spyder RS. Geen video en geen plug-in: u draait er zelf omheen, zoomt in tot op de remklauwen en start een montage die op de beat van de muziek is geknipt.
De demo laadt zodra hij in beeld komt (ongeveer 15 MB) en start met de rondrit. De pagina blijft gewoon scrollen; klik op Zelf besturen om te slepen, te zoomen en rond te kijken.
Camerarit
De camerarit is in Blender uitgezet als vloeiende spline langs het diorama. De viewer krijgt die rit mee als 160 cameraframes — positie, kijkrichting en lens — en speelt hem eindeloos heen en weer af, met een zachte aanloop en uitloop.
Kiest u in de demo een standpunt, dan vliegt de camera er in anderhalve seconde met een kleine boog naartoe. Twee seconden later cirkelt hij als een drone langzaam rond, tot u zelf het stuur overneemt.
Licht en schaduw
Rond het diorama ligt de binnenplaats van Porsche Classic Center Gelderland zoals die er bij bewolkt weer uitziet. Uit foto’s van die plek heb ik een eigen HDR-panorama samengesteld. Dat panorama geeft het licht, de reflecties in de lak en de achtergrond: 8K op grote schermen, 4K op mobiel.
Gevels die kloppen. Een panorama hangt oneindig ver weg, maar de gevels staan vlak naast het pompeiland. Een eigen shader projecteert het panorama daarom op de gevels vanuit de plek waar de foto’s zijn genomen, op 1,70 meter ooghoogte. Zo blijven perspectief en aansluiting kloppen als u rondkijkt.
Schaduw vooraf berekend. De zachte schaduw onder de auto’s, in de hoeken van de kiosk en tussen de tegels is vooraf berekend in Blender Cycles en in een textuur ‘gebakken’. De browser hoeft die dure lichtberekening dus niet live te doen — en het diorama staat toch stevig op de grond.
Showtime
Showtime is een montage van ruim twee minuten: 36 shots, strak op de beat. Geen video, maar elke keer opnieuw live gerenderd — dus scherp op elk scherm, en op de maat van twee verschillende nummers.
Het beeld volgt de afspeeltijd van de muziek. Loopt het meer dan een kwart seconde uit de pas, dan springt het terug; kleinere verschillen worden per frame voor 8% bijgestuurd. Zo blijft elke cut op de tel, ook op een trage telefoon.
Van beide nummers is elke tel vastgelegd: 423 en 459 beats. Op elke tel knijpt de beeldhoek 1,6% in, sterker op de eerste tel van de maat. Tik tijdens Showtime op 2 en dezelfde montage loopt op het andere nummer.
Scherptediepte met bokeh uit de dieptebuffer (24 samples in een gouden-hoekspiraal), tilt-shift voor het miniatuureffect, whip-pans, lichtlekken, filmkorrel en balken op 2,2:1 — allemaal in één eigen pass.
Shots volgen vloeiende Catmull-Rom-curves met vijf soorten easing, met orbits, rolls en een dolly-zoom. De shaders worden vooraf gecompileerd, zodat de eerste cut niet hapert.
Schaal en detail
Het hele diorama is op schaal gebouwd: één eenheid in de scène is één millimeter op het 1:18-model. De 911 GT3 RS meet 254,6 mm — de echte auto is 4,57 meter, gedeeld door 18 is dat 254 mm. De bodemplaat is 611 bij 517 mm.
Detail dat u kunt aanraken. Er draaien 809.000 driehoeken live in de browser: de 911 GT3 RS alleen al 405.000, de 718 Spyder RS 170.000 en het pompeiland 233.000. Lak met clearcoat, glas met lichtbreking, en velgen tot in de remklauwen. Zoom gerust in.
Een drone die vooruitkijkt. Na het kiezen van een standpunt cirkelt de camera langzaam rond, 55 seconden per rondje. Vooraf berekent de viewer rond die cirkel een hoogteprofiel over kiosk, pompen en auto’s — verbreed en gladgestreken — zodat de drone er soepel overheen stijgt in plaats van erdoorheen te vliegen.
Van foto tot browser
De binnenplaats gefotografeerd, als basis voor licht, achtergrond en gevels.
Eigen panorama uit die foto’s: 2K voor het licht, 4K en 8K als achtergrond.
Parametrisch gemodelleerd op schaal: kiosk, pompen, rooster en de twee auto’s.
Schaduw en ambient occlusion vooraf berekend en in texturen gebakken.
glTF met WebP-texturen en 16-bits posities, gecomprimeerd tot 12,9 MB.
Live weergave in WebGL met eigen shaders, ook op mobiel.
De viewer draait onder dezelfde strenge Content-Security-Policy als de rest van mahieu.nl: geen WebAssembly, geen blob-URL’s, geen inline scripts. De browser pakt de scène zelf uit met zijn ingebouwde gzip-decoder, terwijl de voortgangsbalk echt meeloopt.
Een 8K-achtergrond alleen op grote schermen, 4K op mobiel. De viewer meet per 30 frames hoe snel het toestel is en schaalt de resolutie op of af. Staat het beeld stil, dan tekent hij niets opnieuw.
Elk standpunt staat in de adresbalk, bijvoorbeeld ?view=kiosk. Een gedeelde link opent dus precies hetzelfde beeld.
Via het webmanifest opent het diorama vanaf het beginscherm schermvullend, ook op een iPhone. Wie minder beweging wil, krijgt geen automatische camerabewegingen.
Waarom dit telt
Wat het laat zien. Dat een fysieke plek of een product in de browser te beleven is zoals foto’s en video dat niet kunnen — en dat zo’n beleving snel, veilig en op elk toestel kan werken. Het is een eigen initiatief: gebouwd om te laten zien wat er met Blender en WebGL kan, met een plek die het verdient als onderwerp.
Aansluiting op het aanbod. Dit is wat van idee naar werkend bewijs betekent: niet vertellen dat iets kan, maar het bouwen en laten draaien.
Controleerbaar bewijs
Veelgestelde vragen
Nee. Pompeiland 1:18 is een eigen initiatief: het retro pompeiland van Porsche Classic Center Gelderland in Heteren is het onderwerp, niet de opdrachtgever.
Ja. De viewer kiest op mobiel een lichtere achtergrond en past de resolutie aan de snelheid van het toestel aan. Op een iPhone opent het diorama schermvullend via ‘Zet op beginscherm’.
Het diorama is ongeveer 15 MB. Door pas te laden als u bij de demo bent, blijft deze pagina snel. Staat databesparing aan, dan start de demo alleen als u erom vraagt.
Ja. Dezelfde aanpak werkt voor een product, showroom, gebouw of maquette: van foto’s en maten naar een interactief model dat in elke moderne browser draait, zonder app of plug-in.
Contact
Vertel kort wat u wilt laten zien en voor wie. U krijgt binnen één werkdag een persoonlijke reactie — geen accountmanager, geen nieuwsbrief.
Liever direct? Bel +31 6 1400 2312 of mail mwd@mahieu.nl.