Eigen toepassing · Live 3D in de browser

Retro tankstation 1:18: een diorama dat live in de browser draait

Het retro tankstation van Porsche Classic Center Gelderland, nagebouwd op schaal 1:18 en tot leven gebracht in de browser. Draai er zelf omheen of start een van de twee montages op muziek. De viewer spreekt Nederlands, Engels en Duits — een voorbeeld van hoe ook uw pand of product interactief te beleven wordt.

  • ViewerNederlands · English · Deutsch
  • Statuseigen initiatief, publiek te bekijken
  • TechniekBlender, Cycles en three.js (WebGL)
Naar de live demo Open de 3D-viewer
Beeld uit Up we go: de kiosk met PORSCHE-lichtbak tussen de twee rode pompen, filmisch in beeld met balken op 2,2:1
Het pompeiland op schaal 1:18 vanaf de binnenplaats: kiosk met PORSCHE-lichtbak, twee rode pompen, een zilveren 911 GT3 RS en een 718 Spyder RS
Live 3D Open het diorama in 3D Open het diorama in een eigen venster
Open schermvullend

De demo laadt zodra hij in beeld komt en bouwt het detail geleidelijk op. Met Zelf besturen kunt u slepen en zoomen. Pauze en geluid staan boven in de viewer. Rondrit, Up we go en Valet run starten met muziek; er zijn drie tracks. Zet u het geluid zelf uit, dan blijft het bij handmatig rondkijken stil. Een afspeelknop, trackkeuze of Geluid aan zet de muziek weer aan.

1,01 mlndriehoeken, livede complete scène in uw browser
1:18op de millimeter1 eenheid is 1 mm op het model
8KHDR van de echte binnenplaatsuit eigen foto’s samengesteld
3talen, dezelfde scèneNederlands, Engels en Duits
De camerarit uit Blender: de camera draait laag over de binnenplaats om het pompeiland heen
Scroll en u vliegt mee: dezelfde camerarit, frame voor frame uit de viewer.

Camerarit

De rondrit komt rechtstreeks uit Blender

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. Een halve seconde na aankomst cirkelt hij als een drone langzaam rond, tot u zelf het stuur overneemt.

Start de rondrit in de demo
Het pompeiland zonder gebakken schaduw: de objecten lijken los op de vloer te staan Hetzelfde beeld met de in Blender Cycles gebakken schaduw: zachte contactschaduw onder auto’s, pompen en kiosk
Schuif over het beeld: links met, rechts zonder de schaduw uit Blender Cycles.

Licht en schaduw

Belicht met de echte binnenplaats

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.

Bekijk de binnenplaats in de demo

Twee montages op muziek

Up we go en Valet run: elk een eigen ritme

Up we go neemt u in 2:05 minuten mee langs 36 shots. Valet run pakt uit met 136 shots in 3:26 minuten. Beide montages worden live in 3D gerenderd, met cuts op de muziek en titelkaarten in de gekozen taal.

Up we go en Valet run: twee eigen montages Elke oranje lijn is het begin van een shot. Up we go telt 36 shots in 125 seconden; Valet run telt 136 shots in 206 seconden. Paarse stroken geven de titelkaarten aan. Beide rijen gebruiken dezelfde tijdschaal. Up we go · 36 shots · 2:05 Shot 1 · 0.00 s Shot 2 · 9.91 s Shot 3 · 17.64 s Shot 4 · 25.37 s Shot 5 · 33.11 s Shot 6 · 36.96 s Shot 7 · 40.82 s Shot 8 · 44.68 s Shot 9 · 48.53 s Shot 10 · 52.38 s Shot 11 · 56.23 s Shot 12 · 58.16 s Shot 13 · 58.64 s Shot 14 · 59.12 s Shot 15 · 59.60 s Shot 16 · 60.08 s Shot 17 · 63.93 s Shot 18 · 67.77 s Shot 19 · 71.61 s Shot 20 · 72.09 s Shot 21 · 72.57 s Shot 22 · 73.05 s Shot 23 · 73.53 s Shot 24 · 75.46 s Shot 25 · 79.29 s Shot 26 · 83.14 s Shot 27 · 86.97 s Shot 28 · 87.45 s Shot 29 · 87.94 s Shot 30 · 88.41 s Shot 31 · 88.89 s Shot 32 · 90.82 s Shot 33 · 94.65 s Shot 34 · 102.33 s Shot 35 · 109.98 s Shot 36 · 117.64 s Retro tankstation 911 GT3 RS Retro pompen 718 Spyder RS Schaal 1:18 Retro tankstation 1:18 Valet run · 136 shots · 3:26 Shot 1 · 0.00 s Shot 2 · 3.93 s Shot 3 · 7.74 s Shot 4 · 11.55 s Shot 5 · 15.36 s Shot 6 · 19.16 s Shot 7 · 21.07 s Shot 8 · 22.98 s Shot 9 · 24.88 s Shot 10 · 26.78 s Shot 11 · 27.74 s Shot 12 · 28.69 s Shot 13 · 29.64 s Shot 14 · 30.59 s Shot 15 · 31.07 s Shot 16 · 31.54 s Shot 17 · 32.02 s Shot 18 · 32.50 s Shot 19 · 32.97 s Shot 20 · 33.45 s Shot 21 · 33.92 s Shot 22 · 34.40 s Shot 23 · 38.19 s Shot 24 · 40.09 s Shot 25 · 41.05 s Shot 26 · 42.01 s Shot 27 · 43.91 s Shot 28 · 44.38 s Shot 29 · 44.85 s Shot 30 · 45.33 s Shot 31 · 45.81 s Shot 32 · 47.72 s Shot 33 · 49.63 s Shot 34 · 53.43 s Shot 35 · 55.33 s Shot 36 · 55.80 s Shot 37 · 56.28 s Shot 38 · 56.76 s Shot 39 · 57.24 s Shot 40 · 61.05 s Shot 41 · 64.85 s Shot 42 · 65.79 s Shot 43 · 66.75 s Shot 44 · 67.70 s Shot 45 · 68.65 s Shot 46 · 69.13 s Shot 47 · 69.60 s Shot 48 · 70.08 s Shot 49 · 70.55 s Shot 50 · 72.46 s Shot 51 · 76.28 s Shot 52 · 77.22 s Shot 53 · 78.18 s Shot 54 · 79.60 s Shot 55 · 80.07 s Shot 56 · 83.88 s Shot 57 · 85.78 s Shot 58 · 87.68 s Shot 59 · 91.49 s Shot 60 · 92.44 s Shot 61 · 93.39 s Shot 62 · 94.34 s Shot 63 · 95.30 s Shot 64 · 99.10 s Shot 65 · 99.57 s Shot 66 · 100.05 s Shot 67 · 100.53 s Shot 68 · 101.00 s Shot 69 · 102.90 s Shot 70 · 106.71 s Shot 71 · 110.51 s Shot 72 · 116.22 s Shot 73 · 121.91 s Shot 74 · 125.70 s Shot 75 · 127.60 s Shot 76 · 129.49 s Shot 77 · 130.44 s Shot 78 · 131.40 s Shot 79 · 132.34 s Shot 80 · 133.29 s Shot 81 · 133.76 s Shot 82 · 134.24 s Shot 83 · 134.72 s Shot 84 · 135.19 s Shot 85 · 135.66 s Shot 86 · 136.14 s Shot 87 · 136.62 s Shot 88 · 137.09 s Shot 89 · 140.41 s Shot 90 · 140.89 s Shot 91 · 144.68 s Shot 92 · 148.48 s Shot 93 · 152.27 s Shot 94 · 152.75 s Shot 95 · 153.22 s Shot 96 · 153.69 s Shot 97 · 154.17 s Shot 98 · 154.65 s Shot 99 · 155.12 s Shot 100 · 155.60 s Shot 101 · 156.07 s Shot 102 · 159.86 s Shot 103 · 160.82 s Shot 104 · 161.76 s Shot 105 · 162.71 s Shot 106 · 163.66 s Shot 107 · 167.46 s Shot 108 · 167.93 s Shot 109 · 168.40 s Shot 110 · 168.88 s Shot 111 · 169.35 s Shot 112 · 169.82 s Shot 113 · 170.30 s Shot 114 · 170.77 s Shot 115 · 171.25 s Shot 116 · 175.04 s Shot 117 · 178.84 s Shot 118 · 182.64 s Shot 119 · 183.59 s Shot 120 · 184.53 s Shot 121 · 185.00 s Shot 122 · 185.48 s Shot 123 · 185.96 s Shot 124 · 186.43 s Shot 125 · 190.22 s Shot 126 · 190.69 s Shot 127 · 191.16 s Shot 128 · 191.64 s Shot 129 · 192.12 s Shot 130 · 194.01 s Shot 131 · 195.91 s Shot 132 · 196.38 s Shot 133 · 196.86 s Shot 134 · 197.34 s Shot 135 · 197.81 s Shot 136 · 201.61 s Retro tankstation 911 GT3 RS 718 Spyder RS Schaal 1:18 Retro tankstation 1:18 0 s 30 s 60 s 90 s 120 s 150 s 180 s 210 s
  • begin van een shot
  • titelkaart in de gekozen taal

De muziek is de klok

Het beeld volgt de afspeeltijd van de muziek. Zo blijven cuts en camerabewegingen op de maat, ook als een toestel een frame overslaat. Pauzeren stopt de montage én de muziek.

Drie tracks, twee montages

Track 1 is Up we go, track 2 Broken umbrella en track 3 Valet run. De rondrit opent met Broken umbrella. De montages kiezen hun eigen nummer en hun eigen camerashots.

Filmische nabewerking

Scherptediepte met bokeh, tilt-shift voor het miniatuureffect, snelle cameravegen, lichtlekken, filmkorrel en brede filmbalken geven de live scène het karakter van een gemonteerde film.

Dezelfde ervaring in drie talen

Knoppen, uitleg, meldingen en titelkaarten zijn vertaald. Wisselt u tussen Nederlands, Engels en Duits, dan blijft het gekozen standpunt of de gekozen montage in de link bewaard.

De koplamp van de 718 Spyder RS in close-up tijdens Up we go
Up we go: dichtbij de 718 Spyder RS, met scherptediepte uit de live scène.
Een beeld uit de montage Valet run, live gerenderd in de 3D-viewer
Valet run: een tweede montage, met een eigen ritme en 136 camerashots.
Titelkaart ‘Schaal 1:18’ boven het retro tankstation, met tilt-shift voor het miniatuureffect
Tilt-shift maakt het diorama zichtbaar tot wat het is: een miniatuur.
Start Up we go Start Valet run

Schaal en detail

Op de millimeter: één eenheid is één millimeter op het model

De zilveren 911 GT3 RS met rode velgen en GT3 RS-belettering, schuin van voren
911 GT3 RS — bestaand 3D-model via Blendkit.
De 718 Spyder RS in Nordic Gold Metallic met zwarte velgen, schuin van achteren bij de pomp
718 Spyder RS — bestaand 3D-model via Blendkit.

Het pompeiland is op schaal gebouwd: één eenheid in de scène is één millimeter op het 1:18-model. De bodemplaat is 611 bij 517 mm. Van de kiosk tot de pompen en het rooster: de verhoudingen vormen de basis voor een geloofwaardige miniatuur.

Eigen werk en gebruikte modellen. Mijn werk zit in het pompeiland, de belichting, de camerabewegingen en de interactieve webpresentatie. De twee auto’s zijn bestaande 3D-modellen van andere makers, verkregen via Blendkit; die heb ik niet zelf gemodelleerd.

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.

Bekijk de GT3 RS Bekijk de 718 Spyder RS

Van foto tot browser

Zes stappen van binnenplaats naar beeldscherm

  1. Foto’s

    De binnenplaats gefotografeerd, als basis voor licht, achtergrond en gevels.

  2. HDR-panorama

    Eigen panorama uit die foto’s: 2K voor het licht, 4K en 8K als achtergrond.

  3. Blender

    Kiosk, pompen en rooster op schaal gemodelleerd; bestaande automodellen via Blendkit toegevoegd.

  4. Cycles-bake

    Schaduw en ambient occlusion vooraf berekend en in texturen gebakken.

  5. Export

    Een lichte scène van 3,8 MB en een volledige scène van 15,5 MB, als gecomprimeerde glTF met WebP-texturen.

  6. three.js

    Live weergave in WebGL met eigen shaders, ook op mobiel.

Strikte beveiliging, geen omwegen

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.

Kwaliteit die zich aanpast

Een lichte scène verschijnt terwijl de volledige scène op de achtergrond laadt. Op snelle verbindingen staat de volledige versie er meteen. De achtergrond is 8K op grote schermen en 4K op mobiel; de renderresolutie past zich aan het toestel aan. Staat het beeld stil, dan tekent de viewer niets opnieuw.

Deelbare standpunten

Elk standpunt staat in de adresbalk, bijvoorbeeld ?view=kiosk. Een gedeelde link opent dus precies hetzelfde beeld.

Als app op het beginscherm

Via het webmanifest opent het diorama vanaf het beginscherm schermvullend, ook op een iPhone. Met ‘verminderde beweging’ start geen automatische rondrit en worden vluchten tussen standpunten overgeslagen. De rustige drone blijft beschikbaar; met Pauze stopt u alle automatische beweging.

Waarom dit telt

Een plek of product beleven, zonder app of plug-in

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

Wat Retro tankstation 1:18 aantoonbaar doet

Probleem
Een fysieke plek of een product laat zich met foto’s en video maar half zien; 3D in de browser is vaak zwaar, onscherp of afhankelijk van plug-ins en externe diensten.
Aanpak
Een zelf gemodelleerd pompeiland op schaal 1:18 in Blender, aangevuld met bestaande automodellen via Blendkit. Licht uit een eigen HDR van de echte locatie, schaduw vooraf gebakken in Cycles en een eigen three.js-viewer met filmische nabewerking.
Status
Live en publiek te bekijken op www.mahieu.nl/pcg. Eigen initiatief, niet in opdracht gemaakt.
Aantoonbaar resultaat
De volledige scène bevat 1,01 miljoen driehoeken. De viewer werkt in Nederlands, Engels en Duits, met twee montages en drie tracks, ook op mobiel. Standpunten en montages zijn te delen via de adresbalk.
Beperkingen
De lichte scène is 3,8 MB en de volledige scène 15,5 MB; achtergronden, schaduwtexturen en muziek komen daar nog bij. Muziek vereist een tik of toets. Op een iPhone gebruikt u ‘Zet op beginscherm’ voor schermvullende weergave.
Peildatum

Veelgestelde vragen

Goed om te weten over Retro tankstation 1:18

Is dit een opdracht van Porsche Classic Center Gelderland?

Nee. Retro tankstation 1:18 is een eigen initiatief: het retro tankstation van Porsche Classic Center Gelderland in Heteren is het onderwerp, niet de opdrachtgever.

Welke talen zijn beschikbaar?

De viewer is beschikbaar in het Nederlands, Engels en Duits. De bediening, uitleg, meldingen en titelkaarten zijn vertaald. Bij een taalwissel blijft het gekozen standpunt of de gekozen montage behouden.

Wat is het verschil tussen Up we go en Valet run?

Het zijn twee montages met elk eigen muziek en camerashots. Up we go duurt 2:05 minuten en telt 36 shots; Valet run duurt 3:26 minuten en telt 136 shots. Beide worden live in 3D gerenderd.

Werkt het ook op een telefoon of tablet?

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’.

Waarom laadt de demo pas als hij in beeld komt?

Zo blijft de pagina bij het openen licht. De viewer laadt een lichte scène van 3,8 MB en bouwt die op naar de volledige scène van 15,5 MB, met achtergronden en schaduwtexturen apart. Staat databesparing aan, dan start de demo alleen als u erom vraagt.

Kan ik zoiets laten maken voor een product of locatie?

Ja. Dezelfde aanpak werkt voor een product, showroom, gebouw of maquette: van foto’s en maten naar een interactief model voor moderne browsers, zonder app of plug-in.

Contact

Een product of plek interactief laten zien?

Vertel kort wat u wilt laten zien en voor wie. U krijgt binnen één werkdag een persoonlijke reactie — geen accountmanager, geen nieuwsbrief.

Leg uw vraag voor Plan een kennismaking

Liever direct? Bel +31 6 1400 2312 of mail mwd@mahieu.nl.