06/32proof of conceptReal-Time 3D Rendering
ScenewrightReal-Time 3D Engine for Decks, Video and Games
One real-time 3D engine in the browser, used for presentations, video and a multiplayer game.
In motion
Screen recordings, no sound
Saadiyat Island
A descent to the beach promenade at dusk, the museums on the horizon. Recorded from the engine with the slides hidden.
Yas Island
From above the theme parks and the circuit to the arena across the bay, rendered by the engine in the browser.
A game
The same rendering techniques in a multiplayer browser game: a co-op convoy mission at dusk.
What it solves
Real-time 3D usually means a game engine, a download and a specialist for each new use. This is one rendering engine that runs in any browser and is reused for presentations, video and a game.
How it runs
Six steps, input to output
Goes inA scene: the world, its lighting, the camera path and the brand colours
- 01
World
Terrain, sky, water and buildings are built from data, with landmarks modelled in Blender by script and their light baked in Cycles.
- 02
Light
A time of day sets the sun, the sky and the colour grade, tinted from the brand.
- 03
Camera
Fixed stops with flights between them for a deck or a film, or a free camera for a game.
- 04
Render
three.js draws the frame, then bloom, ambient occlusion and light shafts finish it.
- 05
Quality
A short benchmark picks a quality level and steps down if the frame rate drops.
- 06
Output
One offline HTML deck, a recorded video or a live game in the browser, and the same assets carry into Unreal Engine 5 for photoreal fly-throughs.
Comes outReal-time 3D in a browser: behind a deck, recorded as video, or played as a game
What it does
A real-time 3D rendering engine that runs in any browser, with nothing to install.
Landmarks are modelled in Blender by script on real map footprints, with their light baked in Cycles, and the same assets carry into Unreal Engine 5 for photoreal fly-throughs.
The engine lights a world for a time of day, moves a camera through it and holds the frame rate by choosing its own quality level.
It is used four ways: as a live world behind a presentation, built into one offline file.
As video, recorded from those scenes.
In a multiplayer browser game, which shares its rendering techniques.
And for the 3D scenes on this website.
Three decisions
What shaped the build
One engine, several uses
The same rendering code sits behind a presentation, a video and a game, so work on the picture is done once.
It runs in a browser tab
Nothing is installed. A deck is a single file that opens offline by double-click, and the game is a web page.
Frame rate before detail
The engine measures the machine and chooses its own quality level, so motion stays smooth on a laptop and on a phone.
Built with
8 parts
- three.js
- the real-time renderer
- Post-processing
- bloom, ambient occlusion, light shafts
- Blender · Python
- models built by script, light baked in Cycles
- Unreal Engine 5
- photoreal fly-throughs of the same assets
- GSAP
- camera moves + slide builds
- Auto quality
- benchmarks, then holds the frame rate
- esbuild
- one offline HTML file
- Browser smoke test
- walks every stop