AetherSphere 3D — The Infinite Dimensions

An interactive WebGL multiverse combining 5 procedural realms, 4D non-Euclidean shaders, dynamic drone physics, and 432Hz zero-asset spatial audio to redefine web immersion.

Comment

💡 Inspiration

For decades, the modern web has remained largely trapped inside flat, rectangular containers—dominated by vertical feeds, uniform grids, and repetitive scroll mechanics. When entering the 3D Websites Hackathon, our goal was to completely obliterate the 2D bounding box and create an experience that compels people to stop scrolling and say: *"Wow."*

We drew inspiration from:

  1. Duality in Speculative Architecture: Contemplating the contrast between hyper-dense cybernetic megalopolises (Neo-Tokyo Hyperdrive) and serene cosmic temples (Aetheria Sanctuary).
  2. Non-Euclidean Geometries: The hypnotic beauty of 4D hyper-torus manifolds, Klein bottles, and golden ratio spiral symmetries.
  3. Bioluminescence & Stellar Physics: The alien glow of deep-sea hydrothermal vents and the colossal scale of stellar Dyson swarms.
  4. Zero-Asset Procedural Audio: The philosophy that an entire auditory universe—ambient drones, chimes, sub-bass, and resonance pulses—can be synthesized mathematically in real-time without downloading megabytes of audio files.

🚀 What It Does

AetherSphere 3D delivers a high-performance, 60+ FPS multi-dimensional web application featuring:

  • 5 Procedural Dimensions:

    • 🏙️ Neo-Tokyo Hyperdrive: Dystopian cybernetic megastructures, vertical data monoliths, and quantum photon light streams.
    • 🔮 Aetheria Sanctuary: Levitation crystal spires, auroral canopies, and golden celestial rings suspended between twin stars.
    • 🌊 Abyssal Luminance: An alien ocean trench 12,000m deep with undulating bio-photonic jellyfish (Aurelia Prime) and hydrothermal coral chimneys.
    • ⏳ Chrono-Kinetic Art Sanctuary: A museum outside linear time featuring morphing 4D hyper-toruses, flowing liquid mercury, and brass Fibonacci gyroscopes.
    • ☀️ Solaris Dyson Core: A thermonuclear fusion singularity encircled by counter-rotating photovoltaic Dyson rings.

  • Fluid 3D Camera Systems:

    • Orbit Mode: 360° celestial arcball rotation with smooth zoom and auto-rotation.
    • Free Drone Flight: First-person WASD + Q/E 6-DOF flight engine with dynamic momentum damping.
    • Cinematic Waypoint Tour: Autonomous choreographed director cam with narrative captions.
    • Zen Immersion Mode: 1-click removal of all HUD chrome for pure visual meditation.

  • Tactile Raycasting & Quantum Lore:

    • Click on key artifacts to open the Inspect Dossier, examine telemetry, and trigger harmonic energy resonance waves.

  • Real-Time Engine & Shader Studio:

    • Live runtime control over simulation clock speed ((0.2\times) to (2.5\times)), flight thruster velocities ((5\text{ m/s}) to (35\text{ m/s})), wireframe rendering, and real-time GPU telemetry (FPS, frame deltas, triangle counts).

  • Integrated 1-Click Submission Suite:

    • Built-in lossless high-res WebGL screenshot generator allowing visitors and judges to capture presentation-ready stills.

🛠️ How We Built It

1. Mathematical Architecture & Procedural Generation

Instead of loading gigabytes of static 3D models, AetherSphere creates its worlds procedurally using geometric algorithms:

  • Fibonacci Golden Spiral Distribution: Particle swarms and celestial structures are positioned using the golden angle (\phi \approx 137.5077^\circ): $$\theta_n = n \times 137.5^\circ, \quad r_n = c \sqrt{n}$$ $$x_n = r_n \cos(\theta_n), \quad z_n = r_n \sin(\theta_n)$$

  • Parametric 4D Hyper-Torus Knot Manifold: $$x(u, v) = \left(R + r \cos v\right) \cos u$$ $$y(u, v) = \left(R + r \cos v\right) \sin u$$ $$z(u, v) = r \sin v + d \sin(2u)$$

  • Camera Physics & Exponential Smoothing: Smooth drone translation uses time-delta damped spring interpolation: $$\mathbf{P}{t+1} = \mathbf{P}_t + (\mathbf{P}{\text{target}} - \mathbf{P}_t) \cdot \left(1 - e^{-\lambda \Delta t}\right)$$

  • High Dynamic Range Tone Mapping: Shaders apply an ACES Filmic curve approximation for vivid neon bloom and contrast: $$f(x) = \frac{x(2.51x + 0.03)}{x(2.43x + 0.59) + 0.14}$$

2. Zero-Asset Procedural Web Audio Engine

We built a custom synthesizer directly on the browser Web Audio API:

  • Sub-bass and Harmonic Chords: Multiple OscillatorNode instances detuned by (\pm 0.4\text{ Hz}) create rich, undulating chorus textures.
  • Tuned to Universal 432 Hz Harmonics: $$f_n = 432 \times 2^{\frac{n}{12}}$$
  • Breathing LFO Filters: Low-frequency oscillators ((0.12\text{ Hz})) continuously modulate BiquadFilterNode cutoff frequencies to simulate ambient fluid breathing.

3. Modern Frontend Stack

  • Three.js & WebGL 2.0: Custom scene graphs, additive blending particle engines, and mesh materials.
  • React 19 & TypeScript 5.8: Strictly typed reactive state coordination.
  • Tailwind CSS v4 & Motion: Glassmorphism HUD, responsive layouts, and spring physics modals.
  • Vite 6: Instant HMR and optimized production bundling.

⚡ Challenges We Faced

  1. Maintaining 60+ FPS with Over 25,000 Dynamic Particles:

    • Problem: Individual matrix updates for thousands of animated meshes caused severe CPU-GPU bottlenecks.
    • Solution: Migrated to single-draw-call BufferGeometry point clouds with GPU-computed sinusoidal vertex offsets and dynamic color buffer attributes.

  2. Web Audio Context Autoplay Restrictions:

    • Problem: Modern browsers block audio context initialization prior to direct user interaction.
    • Solution: Implemented an on-demand audio pipeline that seamlessly initializes and fades in frequencies upon the first user interaction or dimension warp.

  3. Multi-Camera Coordinate Systems (Orbit vs. 6-DOF Drone Flight):

    • Problem: Switching between spherical orbit controls and free-flying first-person camera created jarring orientation jumps.
    • Solution: Engineered a seamless transition matrix that calculates the forward vector and quaternion orientation at the moment of mode switching.

🏆 Accomplishments We're Proud Of

  • Zero External 3D Models or Audio Assets: The entire multiverse—all 5 dimensions, structures, textures, and soundscapes—is generated purely via code.
  • Silky Smooth 60+ FPS Performance: Runs fluidly across desktop and mobile browsers without requiring high-end dedicated GPUs.
  • Sensory Cohesion: The lighting, color grading, particle dynamics, and audio frequencies shift harmoniously during every dimension warp.
  • Built-in Capture Suite: Judges and visitors can take instant high-resolution PNG snapshots with a single click.

📚 What We Learned

  • How to master WebGL 2.0 procedural mesh mathematics and lighting models without relying on external 3D modeling software.
  • The immense power of the native browser Web Audio API to construct dynamic, adaptive audio environments.
  • Techniques for balancing heavy post-processing effects with aggressive memory management in Three.js.

🔮 What's Next for AetherSphere 3D

  • 🥽 WebXR / VR Support: Step inside the realms with Meta Quest and Apple Vision Pro headsets.
  • 🤖 Gemini Multimodal AI Realm Generator: Natural language prompting to generate brand new procedural dimensions on the fly.
  • 👥 Multiplayer Spatial Presence: WebRTC spatial audio and multi-user avatars floating through shared cosmic realms.

Built With

Share this project:

Updates

Submission history