COSMOS 3D: An Interactive Universe

Explore the universe in stunning 3D — from the Sun's corona to Andromeda's stars, all in your browser

Comment

🌌 COSMOS 3D — Deep Space Realms

Inspiration

Space has always been humanity's greatest frontier — infinite, mysterious, and breathtaking. But most people never get to experience it beyond flat images and documentaries.

I wanted to change that.

COSMOS 3D was born from one question: What if you could explore the entire observable universe right in your browser? Not with static textures downloaded from NASA — but with procedurally generated, scientifically accurate planets, galaxies, and deep space objects rendered live, in real-time 3D.

🚀 What It Does

COSMOS 3D is an interactive 3D space exploration engine built entirely in the browser using React and Three.js. Users can:

  • 🌍 Fly through the Solar System — visit all 8 planets + Pluto, the Moon, Asteroid Belt, Kuiper Belt, ISS, and Voyager 1
  • ☀️ Explore The Sun — with volumetric corona plasma glow, solar prominence arcs, and 500 animated solar wind particles streaming outward
  • 🌋 Witness active phenomena — Jupiter's Jovian lightning storms flickering inside cloud bands, Earth's Aurora Borealis & Australis glowing at the poles
  • 🪐 Discover Saturn's hexagonal polar jet stream — a real Cassini-discovered atmospheric feature rendered in glowing teal
  • ❄️ See Pluto's heart — the iconic Tombaugh Regio nitrogen glacier with dual-lobe Sputnik Planitia and Hayabusa Terra
  • 🌌 Travel to Deep Space — visit the Milky Way Galaxy, Andromeda (M31) with dwarf companions M32 & M110, the Orion Nebula (M42), a Supermassive Black Hole with relativistic jets, and a comet
  • 🔭 Interact with every object — click any body for a detailed Codex panel with real scientific data, or trigger a 3D Cutaway view revealing internal planetary layers

🛠️ How It Was Built

Architecture

Layer Technology
UI Framework React 18 + Vite
3D Engine Three.js (WebGL)
Post-Processing Three.js EffectComposer + UnrealBloomPass
Styling Tailwind CSS
Audio Web Audio API (custom cosmic synth engine)

Procedural Texture Generation

Every planet surface is generated live in the browser using HTML5 Canvas 2D API — no image files downloaded:

  • Earth — 7 organic continent polygon regions, 5 ocean bodies, biome coloring (Amazon rainforest, Sahara desert, Antarctic ice sheet), separate cloud mesh layer, and a 3D internal cutaway (Crust, Mantle, Outer Core, Inner Core)
  • Mars — Iron oxide dust, dual polar ice caps, semi-transparent dust storm shell
  • Jupiter — Turbulent sine-wave cloud band system, Great Red Spot storm vortex
  • Saturn — Golden cloud bands, Cassini Division ring texture
  • Pluto — Reddish tholin terrain, dual-lobe nitrogen heart glacier (Tombaugh Regio)

Galaxy Physics

To render Andromeda without gimbal lock warping its disk as it spins:

  • Stars are generated symmetrically in local \(XZ\) space
  • The galaxy lies flat in its local group plane
  • Only androPoints.rotation.y increments in the render loop
  • Camera is angled \(15°\) above the plane, naturally rendering the disk as a tilted oval

Scientific Data

All orbital data, structural compositions, temperatures, and atmospheric details are sourced from real NASA, ESA, and IAU datasets — embedded in a structured spaceData.js file covering every object from Mercury to Voyager 1 (163.5 AU from Earth).

🧗 Challenges Faced

1. WebGL Particle Texture Artifacts

PointsMaterial without a texture map renders solid square pixels instead of round stars. Solution: Every particle system (nebula gas clouds, jet streams, solar wind) uses a procedurally generated soft radial gradient canvas texture with depthWrite: false.

2. Andromeda Disk Gimbal Lock

Applying rotation.x directly to a spinning galaxy mesh causes Euler axis gimbal lock — the disk stands face-on to the camera. Solution: Keep particles flat in local space, tilt via parent group or camera perspective angle.

3. Earth Continents in 3D

Drawing geographically accurate continent shapes on a sphere required building a full polygon node system for each landmass and biome region — North America, South America, Africa, Eurasia, Australia, and Antarctica — each with realistic color gradients (tropical green, desert tan, tundra grey, ice white).

4. Memory Management

Three.js WebGL contexts leak if geometries and materials aren't disposed on unmount. Solution: A trackResource() wrapper registers every geometry and material created, enabling full cleanup on React component unmount.

🌠 What I Learned

  • Advanced Three.js WebGL rendering: instanced geometry, additive blending, post-processing bloom
  • Real astronomical mechanics: axial tilts, orbital speeds, galactic rotation curves
  • Procedural texture generation entirely in JavaScript without any external assets
  • Performance optimization: zone-based culling, instanced asteroid belts, LOD-aware rendering
  • Scientific accuracy in visual representation: spectral star colors, atmospheric hazing, limb darkening shaders

🔭 What's Next

  • [ ] VR/WebXR support — walk on Mars and look up at Earth
  • [ ] Real-time NASA API integration — live solar flare data, asteroid close approaches
  • [ ] Multi-player co-exploration — share your position in the universe with others
  • [ ] Time travel — simulate planetary positions for any date in history

Built with ☕ and a deep fascination for the cosmos.

Built With

Share this project:

Updates

Submission history