Flight Path: 30,000 GPU-Instanced Flights on a Photorealistic Earth

Spin a photorealistic Earth, dim the lights past the terminator, and watch thousands of tiny planes trace parabolas between cities while the atmosphere does its soft blue scatter around the limb. That's Flight Path, Yong Su's Three.js demo, and the flight counter goes up to 30,000. Drag the slider and the framerate mostly shrugs.

The trick is that nothing is drawn the naive way. Every plane lives in a single instanced mesh, and the motion happens on the GPU, with custom shaders computing per-frame position and rotation along each curve instead of the CPU pushing transforms for every sprite. Paths render as dashed lines with tunable gaps, color-coded by region so whole continents bloom into gradients when you pull the camera back. There's a real-time sun mode that pins lighting to current UTC, or you can scrub a 24-hour slider and watch the day/night terminator crawl across the Pacific. SVG plane glyphs, an atmosphere pass, a starfield. Not much wasted.

Open the GUI panel and prod the knobs: flight count, dash gap, plane elevation, day and night brightness, plane style, all live. The repo is TypeScript, Vite, MIT, and small enough to read in one sitting, with the interesting bits sitting in src/PanesShader.js and src/Curves.js if you want to see exactly how the instancing is wired. Fork it, swap in your own OpenFlights routes, or follow Yong for more work in this vein.