Aetheris: The Story of a Quantum Nebula & Soundscape Generator Welcome to Aetheris, an interactive 3D digital art experience and futuristic laboratory dashboard designed to blend real-time GPU particle simulation with procedurally synthesized audio environments. This document tells the story of Aetheris: what inspired it, the mathematical principles governing it, the modular architecture behind it, and the engineering challenges overcome to bring it to life.
🌌 The Inspiration: Simulating the Sublime Aetheris was inspired by the intersection of cosmology and cyberpunk interfaces. We wanted to create a site that didn't feel like a static page but rather a living, breathing laboratory instrument. The goal was to simulate the sublime scale of stellar objects (like nebulae and black holes) while giving users direct tactile control over their physical constants (gravity, density, turbulence) and hearing those changes reflected instantly as audio.
We drew inspiration from:
Holographic Sci-Fi HUDs: High-tech diagnostics, pulsing matrix feeds, and glassmorphic telemetry panels seen in classic sci-fi cinema. Physical Sandbox Simulations: Allowing users to manipulate physical vectors and experience immediate visual and audial feedback. Web Audio Synths: Translating geometric relationships (like mouse distance or speed) directly into wave frequencies to make the visual art literally "playable." 📐 How We Built It: Architecture & Mathematics Aetheris is built modularly using Vite, Three.js, GSAP, and the native browser Web Audio API. By avoiding heavy client frameworks, we achieved a lightweight build footprint (~600 kB) that runs at a locked 60 frames per second.
The project is structured around three core engines coordinated by an orchestrator:
Mermaid diagram
- The Particle Dynamics Engine The 3D canvas renders up to 150 , 000 150,000 particles. To distribute particles uniformly in three-dimensional space, we utilize spherical coordinates. Let u , v , w u,v,w be independent random variables uniformly distributed on the interval [ 0 , 1 ] [0,1]. We calculate the angles and radius as:
θ
2 π u θ=2πu
ϕ
arccos ( 2 v − 1 ) ϕ=arccos(2v−1)
r
w 3 ⋅ R r= 3
w ⋅R
where R R is the maximum radius. The cube root of w w ensures that particles are distributed evenly throughout the volume of the sphere rather than clustering at the center. The Cartesian coordinates are then derived:
x
r sin ϕ cos θ x=rsinϕcosθ
y
r sin ϕ sin θ y=rsinϕsinθ
z
r cos ϕ ⋅ z flat z=rcosϕ⋅z flat
We set the flattening factor z
flat
0.4 z flat =0.4 to compress the nebula into a galaxian disk shape.
- Interactive Gravitational Deformation When the user moves their cursor over the canvas, the coordinates are projected into the 3D scene. For each particle at position p = ( x , y , z ) p=(x,y,z) and the projected mouse cursor at position m = ( m x , m y , m z ) m=(m x ,m y ,m z ), the distance is:
d
∥ m − p
∥
( m x − x ) 2 + ( m y − y ) 2 + ( m z − z ) 2 d=∥m−p∥= (m x −x) 2 +(m y −y) 2 +(m z −z) 2
If the distance is less than the influence radius ( d < 8.0 d<8.0), we apply an attractive force F F shifting the particle toward the mouse cursor:
F
( 8.0 − d ) ⋅ g ⋅ k ⋅ ( m − p ) F=(8.0−d)⋅g⋅k⋅(m−p) where g g represents the user-controlled gravity intensity slider, and
k
0.08 k=0.08 is a dampening coefficient that maintains simulation stability.
- Turbulence Calculations For the Quantum Chaos preset, we introduce micro-turbulence using coordinate-coupled sinusoidal perturbations. At each frame step t t, the position is perturbed:
x
t
x t − 1 + A sin ( ω t + γ y ) x t =x t−1 +Asin(ωt+γy) y
t
y t − 1 + A cos ( ω t + γ x ) y t =y t−1 +Acos(ωt+γx)
where A A represents the turbulence amplitude, ω ω is the temporal speed coefficient, and γ γ is the spatial noise frequency.
- Audio Synthesizer Graph The sound engine generates audio entirely procedurally. It connects two low-frequency oscillators ( 110 Hz 110 Hz sawtooth and 165 Hz 165 Hz triangle waves) detuned by + 1.2 Hz +1.2 Hz to create a beating effect. These oscillators pass through a resonant low-pass filter and feed into a delay feedback loop:
Delay Line → Feedback Gain ( 0.4 ) → Delay Line Delay Line→Feedback Gain (0.4)→Delay Line High-frequency chime notes are generated dynamically using frequency modulation (FM synthesis) to create metallic bell timbres when dragging across the screen.
🎓 What We Learned During the development of Aetheris, we gained valuable insights into optimizing high-performance web graphics:
Procedural Asset Generation: Instead of loading static image files for the glowing stars (which increases network latency and risks layout shifts), we drew radial gradients on an offscreen 2D canvas and fed it directly into Three.js as a CanvasTexture. Web Audio Lifecycle: Modern browsers block Audio Contexts until a user gesture is captured. Designing a gamified "Initiate Core Synapse" splash screen resolved this restriction elegantly while allowing us to queue asset initialization. GPU-Safe Animations: Rather than using GSAP to animate 70 , 000 70,000 individual coordinate objects (which would freeze the CPU main thread), we animated abstract state properties (like expansion, speed, and swirl parameters) and let the render loop update particle buffers using typed arrays on the GPU. ⚠️ Challenges & Solutions
- Asset 404s on Subpath Deployments Challenge: Standard Vite builds bundle assets using absolute paths (e.g. /assets/index.js), which break when hosted under repository subpaths like https://username.github.io/repo-name/. Solution: We created a custom vite.config.js specifying base: './'. This builds all assets relative to the root file, making the bundle fully host-agnostic.
- Particle Shimmering and Clipping Challenge: Zooming in on the particle cloud caused particles to clip through the camera lens or overlap in opaque rectangles. Solution: We disabled depth-writing (depthWrite: false) on the PointsMaterial and enabled additive blending (blending: THREE.AdditiveBlending). This causes overlapping particles to brighten rather than clip, creating an organic glowing nebulous volume.
Log in or sign up for Devpost to join the conversation.