This browser cannot run WebGL, so the world is a still here. On a current phone or laptop it reshapes in front of you.
How it is built
A room, a house with a yard, a forest of a few hundred trees, and an office floor. Every plank, picket, canopy and monitor is drawn from code when the page loads, out of boxes, cylinders and a few spheres. Drag to orbit, scroll or pinch to zoom, and switch the light off for the evening.
Each world is a set of clusters: the sofa, the porch, the fence, a row of desks. Everything inside a cluster that shares a material is welded into one buffer at load, so the yard fence, 57 pickets and 110 rail sections, costs two draws instead of 167.
Anything that appears more than a handful of times is an instanced mesh: one geometry, one material, a matrix per copy. The forest is 210 trees on a laptop and 130 on a phone, drawn three times. During a reshape each copy gets its own start time, so the trees grow outward from the path.
A change of world is a staggered tween per cluster. The old one shrinks and sinks, the new one rises into place with a short overshoot, and the ground blends between planks, lawn, leaf litter and carpet in one shader so the floor never cuts.
Ronin, a friendly pit bull, is the one thing here that is not drawn from code. He was generated, rigged and animated in Blender through its MCP server, then exported as one small glTF. He follows a curve per world: around the yard, along the forest path, down the office aisle, turning to face the way he is going, with a soft shadow under him. When the world reshapes he fades out and picks the new path up at its start.
Counted at rest with Ronin and his shadow on screen, 1440 by 900, one directional shadow. A reshape peaks near 156 for the two seconds both worlds are on screen at once.
The sky, the brass turntable and the staggered-morph idea come from my earlier morphing rooms demo, which adapts home-sweet-home by Techartist under the MIT licence. That page draws every object separately and pays about 1,700 draws a frame for it. This one merges and instances instead, which is the whole point of the rebuild. Three.js r185.
Want a hero like this on your own site, drawn to your brand?
Book a call