The music sets the timing
The visuals follow the music’s playback position, keeping cuts and camera movement on the beat even if a device drops a frame. Pausing stops both the sequence and the music.
My application · Live 3D in your browser
Retro petrol station 1:18: from five iPhone photos to live 3D
Five ordinary iPhone photographs provided all the photographic reference for this interactive recreation of the retro petrol station at Porsche Classic Center Gelderland. Explore the scale model yourself, or start one of two sequences set to music.
A personal making project.
- Statuspersonal project, publicly available
- TechnologyBlender, Cycles and three.js (WebGL)
The demo loads when it comes into view, adding detail as it goes. Choose Take control to drag and zoom. Pause and sound controls are at the top of the viewer. Camera tour, Up we go and Valet run start with music; there are three tracks. If you mute the sound, it stays muted while you explore manually. A play button, a track selection or Sound on turns the music back on.
Five iPhone photos. A complete 3D experience.
These are all five source photographs: the front, two views of the back and two of the sides. No other photographs of the location were used. They provided the basis for recreating the petrol station and its surroundings as an interactive presentation. The two cars were added as existing 3D models.
1.01mtriangles, rendered livethe complete scene in your browser
1:18to the millimetreone unit equals 1 mm on the model
8KHDR of the real courtyardassembled from my own photographs
3languages, one sceneDutch, English and German
Camera movement
The camera tour comes straight from Blender
The camera path was laid out in Blender as a smooth spline around the diorama. The viewer receives 160 camera frames, each defining position, viewing direction and lens, and plays them back and forth with gentle acceleration and deceleration.
Choose a viewpoint and the camera flies to it along a slight arc in one and a half seconds. Half a second after arriving, it begins a slow drone-like orbit until you take control.
Light and shadow
Lit by the real courtyard
The diorama sits within the courtyard of Porsche Classic Center Gelderland as it appears on an overcast day. I assembled a custom HDR panorama from photographs taken there. It supplies the lighting, reflections in the paintwork and background, at 8K on large screens and 4K on mobile.
Buildings in the right perspective. A panorama normally appears infinitely far away, but the buildings stand close to the petrol station. A custom shader projects the panorama onto those façades from the position where the photographs were taken, at an eye level of 1.70 metres. This keeps the perspective and alignment consistent as you look around.
Shadows calculated in advance. The soft shadows beneath the cars, in the kiosk’s corners and between the paving stones are calculated in Blender Cycles and baked into textures. The browser can display a convincingly grounded scene without performing those expensive lighting calculations live.
Two sequences set to music
Up we go and Valet run: each with its own rhythm
Up we go takes you through 36 shots in 2:05. Valet run features 136 shots in 3:26. Both sequences are rendered live in 3D, with cuts timed to the music and title cards in your chosen language.
- start of a shot
- title card in the chosen language
Three tracks, two sequences
Track 1 is Up we go, track 2 is Broken umbrella and track 3 is Valet run. The camera tour opens with Broken umbrella. Each sequence uses its own track and camera shots.
Cinematic post-processing
Depth of field with bokeh, tilt-shift to emphasise the miniature scale, whip pans, light leaks, film grain and widescreen framing give the live scene the feel of an edited film.
The same experience in three languages
Controls, explanations, messages and title cards are translated. Switching between Dutch, English and German preserves the chosen viewpoint or sequence in the link.
Scale and detail
To the millimetre: one unit equals one millimetre on the model
The petrol station is built to scale: one scene unit represents one millimetre on the 1:18 model. The base measures 611 by 517 mm. Accurate proportions, from the kiosk to the pumps and grating, make the miniature convincing.
My work and the models used. My work covers the petrol station, lighting, camera movement and interactive web presentation. The two cars are existing 3D models by other creators, obtained through Blendkit; I did not model them myself.
A drone that looks ahead. After you choose a viewpoint, the camera makes a slow orbit lasting 55 seconds. The viewer first calculates a height profile around that circle over the kiosk, pumps and cars, widening and smoothing it so the camera rises gently over them rather than flying through them.
From photograph to browser
Six steps from courtyard to screen
Five iPhone photographs
Photographs of the courtyard provide the lighting, background and building reference.
HDR panorama
A custom panorama made from those photographs: 2K for lighting, 4K and 8K for backgrounds.
Blender
The kiosk, pumps and grating modelled to scale, with existing car models added through Blendkit.
Cycles baking
Shadows and ambient occlusion calculated in advance and baked into textures.
Export
A light 3.8 MB scene and a full 15.5 MB scene, exported as compressed glTF with WebP textures.
three.js
Live WebGL rendering with custom shaders, including on mobile.
Built within strict security rules
The viewer runs under the same strict Content Security Policy as the rest of mahieu.nl, without WebAssembly, blob URLs or inline scripts. The browser unpacks the scene using its built-in gzip decoder, with a progress bar that reflects the actual download.
Quality that adapts
A lighter scene appears while the full scene loads in the background. On fast connections, the full version is available straight away. Backgrounds use 8K on large screens and 4K on mobile, while rendering resolution adjusts to the device. When nothing is moving, the viewer does not redraw the scene.
Shareable viewpoints
Each viewpoint appears in the address bar, for example ?view=kiosk. A shared link opens the same view.
Add it to your home screen
The web manifest lets the diorama open full screen from the home screen, including on an iPhone. With reduced motion enabled, the automatic camera tour does not start and flights between viewpoints are skipped. The gentle drone orbit remains available; Pause stops all automatic movement.
Why it matters
Explore a place or product in your browser
What this demonstrates. It shows how a physical place or product can be explored in ways that photographs and video cannot offer, through an experience that works quickly and securely across devices. This is a personal project, built to demonstrate the possibilities of Blender and WebGL using a location worth exploring.
How it relates to my services. This shows what taking an idea to a proof of concept means in practice: building an idea and letting people try it for themselves.
Verifiable evidence
What you can verify in Retro petrol station 1:18
- Problem
- Photographs and video only show part of a place or product. Browser-based 3D can be slow, indistinct or dependent on plug-ins and external services.
- Approach
- A petrol station modelled at 1:18 scale in Blender, combined with existing car models from Blendkit. Lighting comes from a custom HDR of the real location, shadows are baked in Cycles, and a custom three.js viewer adds cinematic post-processing.
- Status
- Live and publicly available at www.mahieu.nl/pcg. A personal project, not a commission.
- Demonstrable result
- The full scene contains 1.01 million triangles. The viewer works in Dutch, English and German, with two sequences and three music tracks, including on mobile. Viewpoints and sequences can be shared through the address bar.
- Limitations
- The light scene is 3.8 MB and the full scene 15.5 MB, with backgrounds, shadow textures and music loaded separately. Music requires a tap or key press. On an iPhone, use Add to Home Screen for full-screen viewing.
- Last reviewed
Frequently asked questions
About Retro petrol station 1:18
Was this commissioned by Porsche Classic Center Gelderland?
No. Retro petrol station 1:18 is a personal project. The retro petrol station at Porsche Classic Center Gelderland in Heteren is its subject, not its client.
Which languages are available?
The viewer is available in Dutch, English and German. Controls, explanations, messages and title cards are translated. Switching language preserves your chosen viewpoint or sequence.
What is the difference between Up we go and Valet run?
They are two sequences with their own music and camera shots. Up we go runs for 2:05 and has 36 shots; Valet run runs for 3:26 with 136 shots. Both are rendered live in 3D.
Does it work on a phone or tablet?
Yes. On mobile, the viewer uses a lighter background and adjusts the resolution to the device’s performance. On an iPhone, use Add to Home Screen to open the diorama full screen.
Why does the demo only load when it comes into view?
This keeps the initial page load light. The viewer loads a 3.8 MB scene first, then builds up to the full 15.5 MB scene, with backgrounds and shadow textures loaded separately. If data saving is enabled, the demo only starts when you ask it to.
Could you make something like this for a product or location?
Yes. The same approach can be used for a product, showroom, building or scale model, turning photographs and measurements into an interactive model for modern browsers without an app or plug-in.
Contact
Questions about this project or the technology behind it?
You’re welcome to get in touch.
Prefer to contact me directly? Call +31 6 1400 2312 or email mwd@mahieu.nl.