AETHERIA // Chronos Nova

🚀 Short Tagline "Command the cosmos: An interactive 3D multiverse observatory and real-time terraforming experience in your browser."

Comment

💡 Inspiration

🌌 We’ve always been fascinated by space exploration, astronomy, and sci-fi films like Interstellar. We wanted to build a web experience that lets anyone explore and reshape alien worlds in real time.

⚡ Instead of building a typical website that requires large 3D file downloads, our goal was to create a lightweight, instant-loading 3D universe that generates everything procedurally in the browser using math and code.

🪐 What it does

✨ AETHERIA // Chronos Nova is an interactive 3D space observatory with four unique worlds to explore:

  1. 🌍 Nova Prime: A living alien planet where you can terraform oceans, greenery, atmospheres, city lights, and magma in real time.
  2. 🔷 Quantum Core: A 4D rotating hypercube singularity surrounded by 15,000+ swirling quantum particles.
  3. 🪼 Abyssal Nexus: A glowing bioluminescent alien organism drifting through deep-space ocean depths.
  4. 🏛️ Chrono-Spire: Ancient floating monoliths beneath dynamic procedural aurora borealis skies.

🌟 Key Features:

  • 🎛️ Interactive Sci-Fi HUD: Click on 3D holographic beacons to view planetary diagnostics and lore.
  • 🎥 Cinematic Autopilot: Sit back and enjoy automated camera tours around each celestial realm.
  • 📸 Photo Mode & Filters: Capture 4K screenshots with custom bloom and visual effects.
  • 🎵 Built-in Audio Synth: Generates ambient space music and sound effects on the fly without any audio files.

🛠️ How we built it

💻 We built the project using modern web technologies:

  • ⚛️ Frontend & UI: React, TypeScript, Vite, Tailwind CSS, and Framer Motion for smooth animations.
  • 🎨 3D Graphics: Three.js and React Three Fiber (@react-three/fiber, @react-three/drei).
  • 🔮 Procedural Shaders: Custom GLSL shaders for terrain generation, ocean waves, glowing atmospheres, and auroras:
    • Multi-octave noise formulas for dynamic planetary elevation: $$h(\mathbf{p}) = \sum_{i=0}^{N-1} A_i \cdot \text{noise}(f_i \mathbf{p})$$
    • Fresnel rim lighting for realistic glowing atmospheres: $$I_{\text{Fresnel}} = (1.0 - \mathbf{n} \cdot \mathbf{v})^\gamma$$
  • 🎶 Sound Engine: Native Web Audio API to synthesize ambient space drones and UI clicks directly in code.

⚡ Challenges we ran into

  • 🚀 Performance Optimization: Keeping smooth 60 FPS while rendering 20,000+ particles, post-processing bloom, and complex shaders simultaneously. We solved this using GPU instancing and vertex shader calculations.
  • 🎯 3D UI Tracking: Accurately projecting 3D marker coordinates onto the 2D screen so HUD overlays follow moving planets smoothly.
  • 🎼 Procedural Audio: Designing pleasing, relaxing space synth music purely through code and mathematical oscillators without using pre-recorded MP3 files.

🏆 Accomplishments that we're proud of

  • ⚡ Instant Load Time: Loads in under a second because there are no heavy 3D models or audio tracks to download.
  • 🎮 Smooth 60 FPS: High visual quality and fluid performance on both laptops and mobile devices.
  • 🎛️ Real-Time Interactivity: Every slider and button immediately updates the 3D world in real time.

📚 What we learned

  • 🧠 How to write custom GLSL vertex and fragment shaders for procedural world generation.
  • 🔊 How to connect Web Audio API nodes with Three.js graphics to create audio-reactive visuals.
  • 💎 Techniques for building responsive glassmorphic UI designs that work seamlessly with interactive 3D canvases.

🚀 What's next for AETHERIA // Chronos Nova

  • 🥽 VR / AR Support: Adding WebXR support for Meta Quest and Apple Vision Pro.
  • 🌐 Multiplayer Mode: Allowing multiple people to explore and terraform planets together in real time.
  • 🧪 Custom Shader Sandbox: A built-in editor where users can write their own shader worlds and share them.

Built With

Share this project:

Updates

Submission history