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.
Comments 0
No comments yet. Be the first!
Sign in to join the conversation.