Side project - a 3D satellite tracker

https://satellitetracker3d.com/ It’s a 3D web app that displays positions of 24k+ satellites in real-time. It’s a side project I have been working on. It uses three.js as a renderer. Most 3D satellite tracking sites i have seen run badly, because a lot of data needs to be processed every frame, but I am using point cloud to save gpu respurces and multithreading to free up the main thread, while keeping memmory allocation on the minimum resulting in a really smooth experience, max fps on all the devices i have tested. You can explore the satellites and play around :slight_smile:

15 Likes

Really nice and a bit scary to see how much satelites are currently above our heads as well as the amount of starlink.

Ideas of improvement: ability to filter satelites by type (GPS, Starlink,…) and launch year to get an idea of how many have been added in the last decades.

1 Like

Thank you for the feedback!
Yeah, search is a priority to implement, as soon as i find some time!

So, here are some tehnical aspects.

I have used javascript for this, the rendering engine is three.js.

The data is publicly available satellite tle data from space-track.org which is refreshed once a day.

I use satellite.js library which implements sgp4 calculations for predicting a satellite position at a given time.

So each fraction of a second the positions of all 24k+ the satellites are calculated.
This is the biggest bottleneck and the reason most other apps fail to deliver such smooth performance.
I split the data between multiple background threads to solve this. And the geomatry is updated on the main thread after the calculation is finished, the next frame.

That was the cpu bottleneck, the gpu one was rendering all the meshes. For this I use point cloud tehnique which draws satellites as 2D billboards instead of expensive 3D objects with lots of vertices to update each frame.

I purpesfully wanted to do a project in three.js in order to learn a bit about the framework, so I didn’t consider anything else, but I thought about what would be a cool use case for three.js, and what is doable (what I can finish and won’t go out of scope).

The main benefit of three.js over other 3D rendering engines is that it is web based unlike Unity for example, so it doesn’t require any installation, runs on any device and can be hosted on the web for the widest reach. Which is such huge + that it outweights any performance or ease of development benefits other more mature tools like Unity offer.

1 Like

Good work!

Some satellites have strange trajectories. BTW it is hard to click on a satellite that is too far away. I tried to see what is this satellite (see the yellow arrow), but did not manage to click on the pixel after many attempts.

It might be possible to render in real-time 24k+ 3D models via instancing. Have you tried it?

1 Like

Thanks!

Some trajectories may look strange because they are relative to Earth’s crust, which is moving relative to the satellites.

Yeah, I’ll have to make it easier to click on the far away satellites.

I have tried rendering 3D models but it greatly impacts performance especially since the geometry has to be updated at frame rate more or less.
I could add a bit of shading to the circles to make them look a bit more 3D ish tho.

1 Like

Hm. Why?!?

1 Like

Because the satellites move.

I like the concept, there is a lot of room for improvement, but for a side project it’s already looking good

1 Like

Does this work well on your machine? There are 25K spaceships orbiting and spinning.

https://codepen.io/boytchev/full/rNZNmmo

image

2 Likes

Nope sorry, it’s super laggy on my phone, while Satellite Tracker 3D runs smoothly at 90fps which is the limit.

Edit: From design perspective, also I prefer simple dots because a more complex 3D model doesn’t add any valuable data, and is would represent visual clutter.

1 Like

Points are good and universal. This is a solid argument and I agree with you.

(What if only the currently selected satellite is shown in 3D?)

Great suggestion! That would be cool if there was a way to fetch its model. Or maybe only for well known ones. I do plan on expanding the info panel to include some more valuable info :slight_smile:

1 Like

Can you expand this example to include high-flying balloons? :grinning:

4 Likes

@phil_crowther I think this hidden Easter egg perfectly answers your question :laughing:

5 Likes

You’re giving me ideas :rofl: :rofl: :shushing_face:

A small improvement is live - highlighted satellite text is now displayed above the mouse!
Btw, I have created a discord chanel for the project, feel free to join here: Satellite Tracker 3D

image

1 Like

I would like to get option, even if hidden one, to change the satellites size to real scale or at least somewhat real scale. I always find these clutter displays misleading altho I understand why it’s done way, it has to be done like this. It just would be nice to be actually to see the dots turn to real size and see if it’s possible to find even one sattelite.

1 Like

I may try it locally at evening and post a pic here :smiley:

1 Like

really nice! Shocking how much is up there, and I assume that’s only the operational stuff amongst all the space junk?

1 Like