The Vision
Technical Deep Dive
1. Earth's Atmospheric Multi-Layering
- Surface Layer: Utilizes 10k high-resolution diffuse, bump, and specular maps for detailed terrain and ocean reflections.
- Night Lights: A separate mesh with an additive material that reveals city lights on the "dark side" of the planet.
- Cloud System: A floating sphere layer with 8k textures that drifts independently from the surface, creating parallax depth.
- Fresnel Atmosphere: A custom GLSL shader that simulates atmospheric scattering (the blue rim glow) based on the camera's viewing angle.
2. Procedural Starfield & Custom Shaders
- Stellar Classification: Stars are color-coded based on real stellar temperatures (O-type blue, G-type yellow, M-type red).
- Shader-Based Twinkling: Instead of updating every point via CPU, I wrote a vertex shader that uses each star's coordinates as a seed for a sine-wave opacity oscillation, creating a performance-efficient "twinkling" effect.
- Radial Glow: To avoid "square pixels," a fragment shader renders soft radial gradients with power-function falloffs for each star.
3. Orchestrated Cinematics with GSAP
- Intercepts wheel and touch events to trigger discrete transitions.
- Uses GSAP to animate the earthGroup rotation, position, and the PerspectiveCamera zoom simultaneously.
- Locks interactions during animations to ensure the user doesn't break the cinematic flow.
4. Audio-Visual Narrative
- Spatial Audio: Ambient music fades in, enhancing the sense of isolation and wonder.
- Typewriter Narrative: A custom Framer Motion implementation slowly reveals Sagan's words, synchronized with the camera's slow drift into the deep void.
Technologies Used
- Three.js & WebGL: Core 3D rendering and scene management.
- GLSL Shaders: Custom atmospheric Fresnel and starfield GPU programs.
- GSAP (GreenSock): Orchestration of complex, multi-variable animations.
- Framer Motion: UI transitions and narrative text animations.
- AgX Tone Mapping: Used for filmic color reproduction and handling high-dynamic-range light.
