Devlog 4 - 3D GLOBE!?!

Overview
ITS LIVE FOR DEMO!, avishgoyal.pythonanywhere.com
This session was all about finally implementing the 3D globe for the Satellite Pass Predictor. The goal was to create an interactive Earth that users can rotate around while viewing satellites orbiting in real time, kind of like a mini Google Earth for satellite tracking. To make this work, I used Globe.gl for visualization and Skyfield on the backend to generate future orbital positions from TLE data. Instead of constantly requesting new coordinates from the server, the backend pre-calculates future positions and sends them to the client, which then smoothly animates the satellite between those points.

What’s New!

• Added an interactive 3D Earth using Globe.gl.
• Implemented future trajectory generation using Skyfield and TLE data.
• Added a new Flask API endpoint for orbit predictions.
• Generated 2 hours of future satellite positions at 1-minute intervals.
• Added real-time satellite animation using interpolation.
• Implemented automatic trajectory refreshes every 2 hours.
• Added orbit path visualization around the Earth.
• Fixed International Date Line wrap-around issues.
• Improved rendering performance by reducing unnecessary updates.
• Fixed Celestrak parsing issues caused by hidden characters.

Challenges

• The globe rendered perfectly, the backend returned valid coordinates, and the animation logic was running, yet the satellite simply refused to appear. There were no useful errors either, which made debugging much more painful.
• Whenever the satellite crossed ±180° longitude, the orbit path would suddenly draw giant lines across the globe, making the orbit look completely broken.
• Valid satellites occasionally weren’t being found despite existing in the TLE files.
• Performance became a problem because I was accidentally rebuilding parts of the globe every frame.

Approach

• My first assumption was that the rendering system itself was broken. I experimented with custom Three.js objects, custom spheres, imported raw Three.js alongside Globe.gl, and tried multiple rendering approaches.
• When none of those worked, I traced the entire pipeline, checking API responses, coordinate generation, interpolation calculations, altitude scaling, and orbit path generation.
• For the orbit issue, I compared coordinate transitions between consecutive points and investigated what happened when satellites crossed specific regions of the globe.
• For performance issues, I profiled the update loop and monitored how often rendering updates were occurring.

Solutions

• The rendering issue turned out to be much simpler than expected. I was fighting Globe.gl instead of using the tools it already provided. Once I switched to its built-in object plotting system, the satellite immediately appeared.
• The orbit path issue was caused by longitude wrap-around at the International Date Line. Adding logic to detect large longitude jumps and split orbit segments fixed the problem.
• The backend lookup issue was traced back to hidden non-breaking spaces (\xa0) inside Celestrak TLE files. Sanitizing satellite names fixed the issue.
• Performance improved significantly after I stopped rebuilding globe geometry every frame and throttled rendering updates.

Next Steps

• Add support for multiple satellites.
• Improve orbit path visualization.
• Add satellite labels and information overlays.
• Improve camera controls and globe interaction.
• Display upcoming passes directly on the globe.
• Continue optimizing animation performance.

Overall, despite the suffering involved, this was one of the biggest milestones in the project so far. The globe is rendering, satellites are moving around the Earth, orbit paths are displaying correctly, and the project is finally starting to look like the thing I originally imagined instead of a collection of APIs and tables stitched together. See you in Devlog #5!