r/JavaScriptTips • • 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!

36 Upvotes

Duplicates