Role: Individual Project
CELESTIAL LOOM // 浑天 is a browser-based audio-visual experience inspired by the mathematical elegance of ancient astronomical instruments and Chinese Cosmological Philosophy. The experience mirrors the cosmic genesis narrative, transitioning between Wuji (无极)—the formless, chaotic primordial state where particles drift freely in fluid motion—and Taiji (太极)—the structured state of reality where the core locks into a rigid, symmetrical lattice grid. By nesting three concentric rings around a unified core, the project visualises the Three Realms (三界): Heaven, Earth, and Humanity, exploring the delicate balance between structural order, human agency, and cosmic harmony.
The interaction design physically embeds this philosophical relationship into the user interface. Humanity acts as the active force, surrendering its rotation and velocity directly to the user’s mouse and high-frequency "treble" bursts. Humans cannot directly manipulate Earth; instead, the Earth ring deforms and ripples texturally via midrange frequencies only through its close spatial proximity to Humanity, reflecting our inability to control the planet, yet our constant influence over it. Heaven remains completely untouchable by the mouse, acting as a lung-like cosmic echo that breathes via low-frequency "bass" notes, sending a radiant alignment wavefront down through the entire system only when all elements achieve collective structural harmony.
Built with React Three Fiber and Three.js, the application streams real-time frequency spectrum data from the Web Audio API directly into custom GLSL Vertex and Fragment Shaders. The core engineering challenge was rendering the physical "fight" between order and chaos without breaking the strict performance constraints required for smooth, interactive 3D. This was solved by mapping all coordinate interpolations directly into native GLSL shaders, enabling the GPU to swizzle and mix positions instantly via frame-rate independent linear interpolation (lerp).