r/JavaScriptTips • u/Ok-Entertainment1592 • Oct 14 '25
Improved the Flight Path Simulation with GPU Instanced Rendering - 30,000 planes at 60fps!
Just finished improving this interactive flight tracker that renders thousands of flights around a 3D Earth. The key breakthrough was implementing GPU instanced mesh rendering:
Performance Stats:
30,000+ aircraft: Single GPU draw call
Instanced geometry batching for both planes and flight paths
Custom GLSL shaders handle all animation on GPU
~1000x performance improvement over traditional rendering
Consistent 60fps even with maximum flights
Tech Stack:
Three.js + WebGL 2.0
Custom vertex/fragment shaders
Instanced mesh geometry
The GUI is organized into 5 control panels (Flight Controls, Flight Path, Plane Controls, Earth Controls, Brightness) for easy experimentation.
Live Demo: https://jeantimex.github.io/flight-path/ Source: https://github.com/jeantimex/flight-path
Would love feedback on the performance optimizations or any suggestions for improvements!