++++IMPORTANT: Activate Advanced Mode in OBJKT++++
AETHER is a cinematic, interactive WebGL simulation that invites users to explore the cosmic remnants of a dying starβa singularity. Blending deep space aesthetics, generative audio, and artificial intelligence, the project serves as both a technical showcase and a philosophical interactive art piece. Inspired by the existential thoughts of Martin Heidegger, the experience features an integrated AI narration that reflects on the fleeting nature of time, existence, and the immense scale of the cosmos.
The simulation operates on several simultaneous interactive layers:
AI Hand Tracking Interaction: Using a webcam, the system detects the user's hand in real-time. By opening their palm, the user triggers a mathematical Bezier-curve dispersion, tearing the 3D model's particles apart and causing the central shader core to glow and emit radiation. Closing the hand into a fist clusters the singularity back into its original solid shape.
Dual-Scene Rendering: The visual engine renders two distinct scenes combined into one. The background is a purely math-driven GLSL shader featuring a procedural retro-grid ocean, volumetric clouds, and complex lens flares. The foreground is a 3D environment containing the interactive particle system, orbiting background planets, and a dynamic light swarm.
Procedural Swarm: An autonomous swarm of 2,000 instanced light particles dynamically orbits the center, reacting to gravity physics and tracking the user's mouse position with dynamic blue and orange point lights.
Cinematic Camera & Post-Processing: The camera automatically drifts with a slow, swaying orbital motion to simulate zero gravity. The scene is filtered through a custom post-processing pipeline that applies Bloom, Film Grain, Radial Depth of Field (DoF), and Peripheral Chromatic Aberration to mimic the lens of a high-tech space telescope.
Generative Space Audio: A dynamic, procedural audio engine generates a cosmic "drone" soundscape (in C minor) using oscillators, lowpass filters, LFO-modulated space wind, and a massive algorithmic convolution reverb.
The project is built entirely on web standards using Vanilla JavaScript, requiring no heavy frontend frameworks like React or Vue. It heavily utilizes the following libraries and APIs:
Three.js (WebGL): The core 3D rendering engine. It handles the cameras, scenes, lighting, and InstancedMesh for the high-performance particle swarms.
GLTFLoader & DRACOLoader: Used within Three.js to parse and decompress the local supernova_remnant.glb 3D model efficiently.
Google MediaPipe (Hands): A machine learning library used for real-time skeletal hand tracking and gesture recognition via the user's webcam. It calculates the distances between finger joints to detect "open" and "closed" hand states.
Web Audio API: A native browser API used to synthesize the generative ambient soundtrack and organic space wind entirely from code, without relying on external MP3/WAV files.
Web Speech API: A native browser API utilized to synthesize the philosophical voice narration, complete with synced on-screen subtitles.
GLSL (OpenGL Shading Language): Used extensively for writing custom Vertex and Fragment shaders. This powers the background environment, the glowing fractal math in the central core (inspired by Shadertoy), and the custom cinematic post-processing passes.
Key Features:
Performance Toggle: An integrated UI toggle allows users to disable heavy post-processing and drop the pixel ratio, making the experience accessible on low-end mobile devices and older PCs.
Dynamic Color Palettes: Users can seamlessly switch between 5 distinct cosmic color themes (Deep Space, Crimson Void, Emerald Nebula, Golden Horizon, Abyssal Violet), which dynamically alter the sky, lighting, and 3D materials.
Immersive Auto-hide UI: To maintain the cinematic feel, the UI controls and cursor gracefully fade out after 4 seconds of inactivity.
Responsive Design: Fully adapted for mobile, tablet, and desktop screens with touch-gesture support for rotating the 3D model.