Inspiration
The concept for Aetheria was inspired by the minimalist, atmospheric aesthetics of speculative science fiction films such as Interstellar and Dune, alongside the mechanical and spatial mystery found in titles like Control.
A significant portion of modern 3D web design relies on high-contrast neon palettes, crowded user interfaces, and constant visual stimuli. The goal for this project was to establish the opposite: a highly polished, atmospheric, and minimalist cinematic experience. The interface guides the user down a vertical shaft within an abandoned observatory structure, culminating in an interactive sequence where they reawaken a dormant quantum reactor core.
What it does
Aetheria is an interactive 3D WebGL experience that takes users on a cinematic journey down a deep space observatory shaft.
- Cinematic Camera Path: Users scroll to descend smoothly through the chamber while the HUD tracks real-time telemetry like depth, frequency, and reactor status.
- Interactive Reactor Forge: At the bottom of the shaft, users click to awaken a dormant quantum reactor. This triggers a 10-second multi-phase activation sequence, opening the reactor's outer shell and unleashing glowing Voronoi energy cracks.
- Lab Studio Controls: Users can customize the reactor's geometry (Dodecahedron, Octahedron, Torus Knot, Icosahedron, Orb), choose from 6 color harmonics, and adjust pulse frequency or light intensity in real time.
- Warp and zero-G Mechanics: Users can trigger a speed-of-light Hyperspace Warp starfield effect, blast floating space debris into orbital chaos using zero-G controls, or capture a high-resolution 4K wallpaper snapshot of the canvas.
- Harmonic Synthesizer: Features an interactive synthesizer keyboard that allows users to play musical notes directly on the core, or toggle an Autopilot melody sequence that synchronizes audio with visual energy pulses.
How we built it
Aetheria was built programmatically from the ground up without relying on pre-packaged 3D models or external image textures. This procedural design approach ensures that the application compiles in real time and loads in less than 100 milliseconds.
WebGL and Procedural Geometry:
- The Outer Shell: A cylinder modeled with back-side rendering to isolate the interior lighting environment and reduce draw calls.
- Instanced Columns and Walkways: Symmetrical structural pillars line the interior perimeter, accompanied by walkway platforms generated through ring geometries to depict structural wear and decay.
Custom GLSL Shader Design:
- The Reactor Core: The central dodecahedron is wrapped in a fragment shader that renders a dynamic 3D Voronoi cell network. The core glow scales based on the mathematical distance to the nearest cell node: d(p) = min || p - (p_i + hash(p_i)) ||
- Volumetric Light Shafts: Modeled using cylindrical geometries utilizing custom edge-fresnel and depth-fading equations.
- Dust Particle System: A vertex shader animates 3,000 instanced dust particles using simplex noise algorithms directly on the GPU.
Procedural Audio Synthesis:
- Sub-Bass Ambient Drone: A 42 Hz sine wave modulated by a Low Frequency Oscillator (LFO) cycling at 0.125 Hz: f(t) = 42 * (1 + A * sin(2 * pi * t / 8))
- Resonant Winds: White noise buffers passed through a dynamic bandpass filter sweep.
- Interactive Synthesizer Keyboard: An interactive synthesizer pad utilizing triangle waves and exponential envelope decay curves for musical note triggering and interface feedback.
Challenges we ran into
- Frustum Clipping and Screen-Filling Glitches: Early iterations utilized large horizontal planes for volumetric fog layers. When the camera descended through these planes, it caused severe near-plane clipping anomalies. This was resolved by shifting the ambient fog to a unified particle system and positioning light-shaft geometries away from the central vertical camera trajectory.
- Camera Spline Trajectory Calculations: The camera moves along a smooth Catmull-Rom spline. The control points had to be calculated to keep the camera within the physical boundary of the cylinder radius (R = 40), ensuring the camera did not clip the structural columns or pass through solid geometry: x^2 + z^2 < R_safe^2 (where R_safe = 28)
- Browser Autoplay Policies: Modern web browsers restrict audio execution until an explicit user interaction occurs. To address this, the Web Audio graph initialization was routed through a gesture utility that instantiated the AudioContext only after the first mouse click, scroll, or touch event.
- Input Delta Normalization: Different input hardware (such as smooth trackpads versus mechanical scroll wheels) produces vastly different scroll delta increments. We implemented a delta normalization factor to ensure a consistent, cinematic camera speed regardless of the input device: Normalized Step = sign(deltaY) * 0.04
Accomplishments that we're proud of
- Performance Optimization: Achieving a consistent 60 FPS on both desktop systems and mobile devices while rendering real-time procedurally generated geometries, particles, and custom shaders.
- Lightweight Asset Footprint: Packaging a highly atmospheric, cinematic 3D world with real-time audio synthesis inside a code-only bundle that downloads almost instantaneously.
- Harmonic Real-Time Audio Binding: Connecting the Web Audio pitch multipliers directly to the custom shader colors, ensuring the synthesized audio drone changes key automatically when a user switches the color of the reactor core.
What we learned
- Diegetic UI Integration: Placing telemetry indicators (such as Depth, Frequency, and System Status) directly into a minimalist HUD enhanced spatial immersion.
- GPU Thread Optimization: Moving calculations for complex animations (like particle drift and shader noise) to GLSL vertex and fragment shaders significantly reduced CPU overhead, keeping the application locked at 60 FPS.
- High-Fidelity Procedural Design: Designing with mathematical procedural geometry rather than static files demonstrates that premium web aesthetics can be achieved with exceptionally low initial asset payloads.
What's next for Aetheria
- Multiplayer Synchronization: Utilizing WebSockets to synchronize the reactor forge configurations (geometry shape, colors, and shockwave pulses) in real time between multiple concurrent visitors.
- Virtual Reality Support: Implementing WebXR to allow users to step inside the deep space observatory and interact with the reactor core in a fully immersive VR environment.
- Advanced Post-Processing: Adding customizable camera lens filters, bloom threshold adjustments, and chromatic aberration sliders directly to the Lab Studio panel.
Log in or sign up for Devpost to join the conversation.