> Canonical page: https://www.mahieu.nl/en/applications/retro-petrol-station/ - [Home](https://www.mahieu.nl/en/) - [My applications](https://www.mahieu.nl/en/applications/) - Retro petrol station 1:18 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. - Status personal project, publicly available - Technology Blender, Cycles and three.js (WebGL) [Try the live demo](#demo) [Open the 3D viewer ↗ ](https://www.mahieu.nl/pcg/) [ ![A still from Up we go: the kiosk and its illuminated PORSCHE sign between two red pumps, framed in a cinematic 2.2:1 aspect ratio](https://www.mahieu.nl/assets/img/retro-tankstation/retro-tankstation-kiosk-20261008-1200.webp) ](https://www.mahieu.nl/assets/img/retro-tankstation/retro-tankstation-kiosk-20261008-1600.webp) [ ![The 1:18-scale petrol station seen from the courtyard: a kiosk with an illuminated PORSCHE sign, two red pumps, a silver 911 GT3 RS and a 718 Spyder RS](https://www.mahieu.nl/assets/img/retro-tankstation/retro-tankstation-poster-20261008-1600.webp) ](https://www.mahieu.nl/pcg/) Live 3D Explore the diorama in 3D [Open the diorama in a separate window](https://www.mahieu.nl/pcg/) Start live 3D Take control Finish exploring [Up we go](https://www.mahieu.nl/pcg/?view=upwego) [Valet run](https://www.mahieu.nl/pcg/?view=valetrun) [Camera tour](https://www.mahieu.nl/pcg/?view=rondrit) [Drone view](https://www.mahieu.nl/pcg/?view=droneshot) [From above](https://www.mahieu.nl/pcg/?view=boven) [Front](https://www.mahieu.nl/pcg/?view=voor) [Kiosk](https://www.mahieu.nl/pcg/?view=kiosk) [911 GT3 RS](https://www.mahieu.nl/pcg/?view=gt3) [718 Spyder RS](https://www.mahieu.nl/pcg/?view=spyder) [Open full screen ↗ ](https://www.mahieu.nl/pcg/) 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. [ ![Front](https://www.mahieu.nl/assets/img/retro-tankstation/bronfotos-20261012/voorkant-900.webp) ](https://www.mahieu.nl/assets/img/retro-tankstation/bronfotos-20261012/voorkant-1600.webp) Front [ ![Rear view 1](https://www.mahieu.nl/assets/img/retro-tankstation/bronfotos-20261012/achterkant-1-900.webp) ](https://www.mahieu.nl/assets/img/retro-tankstation/bronfotos-20261012/achterkant-1-1600.webp) Rear view 1 [ ![Rear view 2](https://www.mahieu.nl/assets/img/retro-tankstation/bronfotos-20261012/achterkant-2-900.webp) ](https://www.mahieu.nl/assets/img/retro-tankstation/bronfotos-20261012/achterkant-2-1600.webp) Rear view 2 [ ![Side view 1](https://www.mahieu.nl/assets/img/retro-tankstation/bronfotos-20261012/zijkant-1-900.webp) ](https://www.mahieu.nl/assets/img/retro-tankstation/bronfotos-20261012/zijkant-1-1600.webp) Side view 1 [ ![Side view 2](https://www.mahieu.nl/assets/img/retro-tankstation/bronfotos-20261012/zijkant-2-900.webp) ](https://www.mahieu.nl/assets/img/retro-tankstation/bronfotos-20261012/zijkant-2-1600.webp) Side view 2 **1.01m** triangles, rendered live the complete scene in your browser **1:18** to the millimetre one unit equals 1 mm on the model **8K** HDR of the real courtyard assembled from my own photographs **3** languages, one scene Dutch, English and German ![The camera path from Blender, travelling low across the courtyard and around the petrol station](https://www.mahieu.nl/assets/img/retro-tankstation/retro-tankstation-rondrit-20261008-1200.webp) Scroll to join the flight: the same camera path, frame by frame from the viewer. 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. [Start the camera tour](https://www.mahieu.nl/pcg/?view=rondrit) ![The petrol station without baked shadows, making the objects appear detached from the ground](https://www.mahieu.nl/assets/img/retro-tankstation/retro-tankstation-ao-uit-20261008-1200.webp) ![The same view with shadows baked in Blender Cycles: soft contact shadows beneath the cars, pumps and kiosk](https://www.mahieu.nl/assets/img/retro-tankstation/retro-tankstation-ao-aan-20261008-1200.webp) With shadows Without Drag across the image: shadows from Blender Cycles on the left, no shadows on the right. 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. [Explore the courtyard](https://www.mahieu.nl/pcg/?view=droneshot) 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 ### 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. ### 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. ![A close-up of the 718 Spyder RS headlight during Up we go](https://www.mahieu.nl/assets/img/retro-tankstation/retro-tankstation-showtime-koplamp-20261008-1200.webp) Up we go: close to the 718 Spyder RS, with depth of field rendered live. ![A still from Valet run, rendered live in the 3D viewer](https://www.mahieu.nl/assets/img/retro-tankstation/retro-tankstation-valetrun-20261008-1200.webp) Valet run: a second sequence with its own rhythm and 136 camera shots. ![The title card ‘1:18 scale’ above the retro petrol station, with tilt-shift emphasising the miniature effect](https://www.mahieu.nl/assets/img/retro-tankstation/retro-tankstation-showtime-schaal-20261008-1200.webp) Tilt-shift brings out the diorama’s miniature scale. [Start Up we go](https://www.mahieu.nl/pcg/?view=upwego) [Start Valet run](https://www.mahieu.nl/pcg/?view=valetrun) Scale and detail ## To the millimetre: one unit equals one millimetre on the model ![The silver 911 GT3 RS with red wheels and GT3 RS lettering, seen from the front quarter](https://www.mahieu.nl/assets/img/retro-tankstation/retro-tankstation-gt3-20261008-1200.webp) 911 GT3 RS — an existing 3D model sourced through Blendkit. ![The 718 Spyder RS in Nordic Gold Metallic with black wheels, seen from the rear quarter beside a pump](https://www.mahieu.nl/assets/img/retro-tankstation/retro-tankstation-spyder-20261008-1200.webp) 718 Spyder RS — an existing 3D model sourced through Blendkit. 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](https://www.blendkit.com/); 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. [Explore the GT3 RS](https://www.mahieu.nl/pcg/?view=gt3) [Explore the 718 Spyder RS](https://www.mahieu.nl/pcg/?view=spyder) 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](https://www.mahieu.nl/pcg/?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](https://www.mahieu.nl/en/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](https://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:** October 2026 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. [Get in touch](https://www.mahieu.nl/en/contact/) Prefer to contact me directly? Call [+31 6 1400 2312](tel:+31614002312) or email [mwd@mahieu.nl](mailto:mwd@mahieu.nl). Last updated: 2026-10-14.