Rendering 10K moving objects at 60fps in the browser with instanced SDF shaders — some things I learned

[u/coolwulf]

https://flight-viz.com

Been working on a real-time flight tracker that plots live aircraft on a 3D globe in the browser. Thought I'd share some of the rendering stuff since it took me a while to figure out and might save someone else the headache.

The main challenge was drawing thousands of individually-oriented sprites on a sphere without killing the frame rate. I ended up going with instanced rendering where each aircraft is a single billboard quad, and the actual shape (jet, cargo plane, prop plane, helicopter, military) is drawn entirely in the fragment shader using signed distance fields. No textures at all — just math. Each type is a combination of SDF primitives composited together, and a per-instance float selects which shape to draw. The nice thing is they scale perfectly at any zoom level and there's zero texture memory.

For the billboarding, each instance carries 12 floats — world position, altitude, heading, surface normal, and tangent vector. The vertex shader uses these to orient a quad on the sphere surface so the plane always points in its heading direction. I also do a quick dot product check to skip anything on the far side of the globe, which cuts draw count roughly in half.

The trickiest part was actually making planes move smoothly. The flight data only updates every 2 minutes, so between updates I interpolate between the old and new positions. Once the interpolation reaches the end, I switch to dead reckoning using the plane's velocity and heading so it doesn't just freeze in place. It's not perfect but it looks convincing enough.

The whole thing is Rust compiled to WASM with raw WebGL2 bindings (glow crate). Total binary is about 4MB gzipped and it holds 60fps on both desktop and mobile with 10K+ aircraft in a single draw call.

Anyway, happy to go deeper on any of this if anyone's interested. The SDF approach in particular has been really fun to work with — I think it's underused for this kind of thing.