An orbital visualization of live aircraft telemetry. Streams thousands of flights from ADS-B feeds onto a Three.js globe at interactive frame rates, with each track drawn in a custom shader and trajectory prediction running in a web worker.
Brief
The client had built the data pipeline — a Postgres-backed ingestion service chewing through ADS-B feeds — and needed a public-facing visualization that would do justice to it. The existing 2D map view was correct but unmoving. The new view had to feel like the data was alive without sacrificing accuracy or readability.
Approach
Three.js scene with a single textured sphere as the Earth, instanced meshes for aircraft positions, and a custom shader for the contrail trails. Live data arrives over a WebSocket connection. Heavy math (great-circle paths, trajectory prediction) runs in a dedicated web worker so the main thread stays at 60fps even at peak load.
Key decisions
Instanced rendering over individual meshes. At 2,000+ concurrent aircraft,
per-instance draw calls would have hit the main thread. One InstancedMesh
with per-instance position, heading, and altitude attributes drops the draw
call count to a single one. CPU cost stays linear in aircraft count;
GPU is the bottleneck, which is the right tradeoff.
Trajectory prediction (the colored projection ahead of each aircraft) runs
in a web worker that recomputes positions every 200ms. The main thread
reads a SharedArrayBuffer of precomputed positions, so there’s no JSON
serialization cost between worker and main.
Contrail shader is a single fragment program rendering an alpha-faded line behind each aircraft. Lifetime is encoded in vertex colors; the shader reads time-since-emission from a uniform and fades accordingly.
Mapbox GL serves as a fallback for users on WebGL-limited devices. The fallback view renders the same data on a 2D projection at the same update cadence — no feature parity loss, just visual ambition loss.
Outcome
Launched as the public-facing data exploration surface for the platform. Sustained 60fps with 3,000+ concurrent aircraft on a mid-tier laptop. Featured in two aviation-industry press pieces in the months following launch (client’s traction, not ours).
For your agency
White-label appropriate for: data-heavy visualization clients, real-time dashboards where the “real-time” actually matters, any product whose selling point is interactive depth on a continuous stream. The Three.js scene composes cleanly into existing React applications; the worker layer is generic enough to drop onto other live-data sources.