What's Over Head

I made this busy animation while trying to learn how satellites look from a perspective camera projection.


I utilized a Points Material to render the 25k+ satellites. The positions, colors, etc. are updated in the animation loop, and then the points instance is updated.

I’m surprised by how efficient it is to use points versus many separate sprites! Although I’ve seen a similar project here that I believe is better than mine, I still wanted to share this one.

For the details:

  • I utilize the Python Skyfield library and data from https://www.space-track.org to obtain all the current state vectors. This is why the site takes a few seconds to load.
  • I implemented my own JavaScript propagator using a Runge–Kutta 2 method (see sats.js for the propagator).
  • With every render loop, the real-time delta value propagates the 25k+ positions and then updates the GPU instance. The satellites have real-time ~accurate propagation (enough for this visualization). Then, I utilize Three.js’s perspective camera to project the overhead satellites onto the top-right screen.

Another project I want to mention integrates some fun shaders I found on Shadertoy with a 3D globe.


Thank you, Three.js, for enabling me to build such fun projects!