Paper Trains
Paper Trains is a model railway I’m building for the browser. You can shape the terrain, lay tracks and switches, then drive through the layout you just made. A curve that looks gentle from above can feel very different from the cab.
The part I find most interesting is making the editor, physics, and renderer work with the same layout. Move a section of track uphill and you’ve changed both the shape of the diorama and the way the train climbs and brakes.
One track model for editing and driving
Track segments are stored as cubic Bézier curves joined at switches. The simulation samples the curves by distance along the track. It also records which branch the locomotive took at each switch so the carriages follow the same path and the whole train can retrace it in reverse.
From rail guidance to rigid bodies
The train simulation advances in fixed steps of 1/240 of a second. During normal driving the track guides each car, while its mass and the slope beneath it affect how the train moves. If the train derails, cannon-es takes over. Each car keeps its position, orientation, and motion at the moment it leaves the rails, and the couplings stay connected.
Keeping a detailed scene editable
Three.js renders nearby pieces of static scenery in batches to cut down on draw calls. The editor still treats each tree, building, or prop as a separate object. Moving an object can rebuild the affected batches while reusing the rest.
Designing for two scales
From above, the exposed layers at the edge of the terrain make the whole landscape read as a tabletop model. From the cab, smaller details carry the scene. The folds in the trees, the lit carriage windows, and the light along a platform all have to hold up when the camera drops to rail height.
