Bluestone Lane

Description

Bluestone Lane is a real-time piece, three to four minutes long, that runs in the browser. It’s dusk on an old street waiting for demolition: across the road every shutter is down, the walls carry the character 拆 (“demolish”) in painted circles, and one building is already half torn down. Only one shutter is still half open — a small appliance repair shop, where the robot an old repairman pieced together from a radio cabinet, a camera lens and plumbing pipe still sits on a stool beside the workbench.

Click to begin, and the camera walks in off the street and round to the robot’s face. Hold the left mouse button or the space bar to open the iris of its lens — the first try always fails, so let go and hold again. Keep holding and move the mouse: its head follows, and wherever its light falls, the past comes back.

Act one is the shop. Outside the beam is the present: everything dusty and faded, cobwebs on the shelves, flakes of plaster and broken glass on the floor, and the TV on the carton, the wall clock, the desk fan and the valve radio all broken. Where the light falls, things are as they were: the TV shows its programmes, the radio’s dial glows and plays a tune, and the clock swings.

After a while the same tune drifts faintly from across the road. The robot turns its head to listen as the view draws back to the doorway; its light falters, static creeps into the song, the picture keeps losing lock, and on one last tear it cuts to act two.

Act two is the street. Whichever of the five shops across the road the beam lands on goes back to an evening in the mid-1990s — lights on inside, laundry on the balconies, neighbours on low stools by the door — and you hear that shop’s sounds. Shops you’ve found stay lit; the ones you haven’t call to you with their signs and sounds. The power drains as you look. Its last look goes back to the electronics shop the tune comes from, and the whole street lights up for a moment; then the power runs out, the beam stutters and dies, the song stops mid-phrase, and the street is what it is now. The ending looks out from inside the shop: the robot still faces the dark street, a lamp comes on across the road, and the last line reads: “It remembers the street with its lights on.”

Click after the end card to watch it again. The interface is in English by default, with a link on the title screen to switch to Chinese; on a phone, press and hold the screen and slide your finger. Headphones are recommended, as is a browser with WebGPU such as a recent Chrome or Edge; browsers without it fall back to WebGL2 automatically. The first load takes a little while to download the models and precompile the shaders.

How Tripo was used

Tripo generated more than twenty objects in the repair shop: the robot, two valve radios (one opened up for repair, one closed), two CRT televisions, a desk fan, a wall clock, an alarm clock, a cassette recorder, a desk lamp, a soldering iron, a magnifier, a toolbox, a parts cabinet, the workbench, a 28-inch roadster bicycle, a thermos flask, an enamel mug, and the spare arm, leg and torso — plus four broken versions made specially. The room’s walls and floor, the shelving and the cartons on it, the cables, the tool wall and the small things on the bench are geometry built in code; the row of shops across the road is two generated photographs (“now” and “then”), not models.

• From reference to model: each object starts as a product render on a plain light-grey background, which then goes to Tripo. Before modelling, three approaches were compared on the opened-up radio — straight image-to-3D, image to multiview to 3D, and a hand-assembled four-view sheet to 3D — and most models went the image → multiview → 3D route, with detailed geometry and textures, PBR maps, and the baked lighting taken out of the textures so the desk lamp, the dusk outside and the robot’s beam do the lighting.
• The robot: Tripo delivered it as one mesh — head, body and stool fused together. Rather than cut the head off, the author gave it a “soft neck” in the vertex shader: a weight computed from position is 1 in the radio-cabinet head, 0 in the body and shoulders, and ramps through the neck and the cables around it, so turning the head twists each vertex about the neck by its share of the angle. Nothing is cut, so no seam can open, and the cables wind round the neck as it turns. The stool was split off with a Blender script, so in act two the whole robot turns on it to face the street. The chrome “上海” (Shanghai) badge on its face and the “人民电器” (People’s Electric) plate on its chest are geometry in the model itself, and the same design produced the spare arm, leg and torso hanging on the wall hooks and propped by the bench.
• Broken versions: so the present outside the beam and the past inside it would match, the TV on the carton, the wall clock, the desk fan and the valve radio each got a second, broken-down version — the reference image was reworked to look damaged, then modelled with the same Tripo settings. Both versions sit in the same spot: pixels the beam touches show the intact one, the rest show the broken one.
• Raw meshes on the web: each raw Tripo model has about 1.9 million triangles and 4K textures (8K for the robot). Rather than decimate them in Blender — which tears the texture seams and leaves white cracks up close — the author simplified them with meshopt while keeping the seams, into several levels of detail, each with its measured error. At runtime every object shows only the level whose error stays under one screen pixel and whose texture is no coarser than the screen: simpler levels far away, finer ones as you come close. On the live site the finest level is within a fraction of a millimetre of the raw mesh. The coarser levels load first and the rest stream in as needed, released again when video memory runs past its budget.
• Model viewer: add ?review to the address for the inspection mode, with bright inspection lighting; drag to orbit, scroll to zoom and press 1–8 for preset views. Double-click any model and the camera glides up to it, with its name and its raw Tripo triangle count in the bottom-left corner.

How it runs in the browser

There’s no game engine: it’s built directly on three.js’s WebGPU renderer with Vite, and browsers without WebGPU fall back to WebGL2 automatically.

The past is worked out pixel by pixel. The robot’s eye casts a cone of light, and every pixel is tested against it as it renders: inside the cone you get the intact models, the TVs switched on and a warmer grade; outside, the dusty, faded present — and the broken and intact versions swap on that same mask. The two photographs across the road switch between now and then the same way, and the electronics shop’s window is a real little 3D shop, its TVs showing programmes too.

It opens fast and plays smoothly thanks to three things. Every shader compiles asynchronously and in parallel, and an object whose shader isn’t ready yet is simply skipped for that frame instead of holding it up. The loading screen draws every object once in every pass (depth prepass, main pass and each shadow map), so once you click to begin nothing compiles mid-story. And rendering is capped at about 2.1 million pixels (roughly 1080p), with the resolution dropping automatically when frames run long. When a model changes level, both levels draw at once on complementary sets of random pixels and cross-fade over 0.35 seconds, smoothed out by temporal anti-aliasing, so nothing “pops” up close. Add ?q=low for a low-quality mode (no ambient occlusion or screen-space reflections, half-size shadow maps).

The sound layers CC0 field recordings with Web Audio synthesis: the street at dusk outside, the hum of the strip light and the mains, the tick of the pendulum, a TV test tone, the robot’s servos and the sound of its eye opening — and the tune on the radio is an original pentatonic melody. In act two each shop across the road has its own sound.

Along the way the author also fixed a bug in three.js r186’s WebGPU renderer: when two models differ only in how their normals are stored (Int8 versus Int16), the renderer lets them share one pipeline, so whichever draws second reads its vertices in the wrong format and its surface lights up in a camouflage-like mess. WebGL2 isn’t affected.