OrbitLens Devlog #6: Implemented Sun and the day night cycles + camera panning improvements

The core engine was working smoothly, so this session was focused on the ui and aesthetics and realism. Here are the changes i made, how i made them, and the challenges i faced:

Change 1: Implemented the Sun

The first major goal was replacing the static and boring lighting the 3D earth originally had with a Sun.

To do this, I wrote a custom Solar Ephemeris algorithm. Using the current Julian date, it calculates the sun’s exact Right Ascension, Declination, and Earth’s Greenwich Mean Sidereal Time (GMST) to pinpoint the real-time subsolar vector. Since this was some complicated math, i had to use some ai for this.

But in a WebGL engine, lights are purely mathematical vectors and there is no physical object in the sky. So when i first added a solid white sphere, it literally looked like a flat plastic toy and looked really ugly. To fix this, I abandoned the 3D ball and built a 2D Sprite using the HTML5 Canvas API to generate a radial gradient. By using Additive Blending to the material, I forced it to mathematically layer the light over the space, which created like this blinding, light that looked like the sun, which was good.

Change 2: The Day/Night City lights cycle:

To make the globe even more realistic, I wanted the night side of the Earth to have like the night time city lights rather than just a dark shadow.

To build this, I added an 8k night-map texture (from Solar System Scope) and implemented a WebGL fragment shader into the Three.js’s native MeshPhongMaterial using a compiler hook. But there was a problem, the free night map that i implemented had this blue tint to it, and when i tried to correct it, it literally turned to this muddy, polluted yellow.

To fix this, I programmed the shader to intercept the texture data, remove the color tint by calculating luminance, and pass it through a smoothstep noise gate. Anything below a 10% threshold was forced to pitch black, while populated areas were recolored with a warm golden orange hue. And it worked great!

Change 3: More camera improvements

Despite the previous session having to do with correcting the camera engine, there were still some stuff that i fixed here. The problem was since i removed OrbitControls in the last session (read previous devlog), once i had like hte earth upside, it was very hard to make it upright again. like at one point, i had the entire europe upside down and Africa was at the top of the globe but i couldnt get it back to normal.

To fix this I changed the code so that the panning controls thing swaps between OrbitControls (for the 3D globe) and TrackballControls (for the satellites/spacecrafts). But there were some more challenges:

• When a zoom-in animation (read previous devlogs) finished (after selecting e.g. a satellite), the camera would like glitch backward into a less zoomed in position which was kinds uncomfortable to look at.

• Because the satellites were moving a static transition speed couldn’t catch them before the animation finished, so the final frame was a bit glitchy and the screen like jumped a bit.

To fix all of these problems, I first made sure that disabled camera controls are completely turned off so they can’t fight the active zoom animations. I also made it that instead of moving at a steady speed, I added a speed-up effect as the camera gets closer to the target. This ensures that the camera glides smoothly into place right on time without any jerky jumps.