jeonghopark/collective-trajectories

Collective Trajectories is a real-time 3D visual art piece made with Three.js using a WebGPU renderer. It shows a sphere with hundreds of glowing filaments growing from its center outward to its surface. Each filament curves through space using curl noise, and a brightness pulse flows along each strand from center to tip. When a pulse reaches the surface, it triggers ripple rings that spread outward across the sphere. The outer shell of dots expands and contracts in response to a background audio track. The project uses WebGPU compute shaders through Three.js's experimental WebGPU renderer and TSL node system to calculate each filament's position and brightness directly on the GPU every frame. Rather than animating strands on the CPU, it writes to storage buffers on the GPU and reads them back for rendering. The project falls back to WebGL2 on browsers without WebGPU support. Visual layers are broken into modules: the line strands, soft glow halos using additive blending, surface ripples, a static dot shell suggesting the sphere's surface, and an opaque core sphere at the center. The core sphere blocks filaments behind it for genuine depth. Fog and fake depth-of-field effects add further depth cues, since glowing additive lines cannot grow physically thicker. The animation starts after clicking a button in the center of the screen, which also starts the original audio track included in the repository. An orbit control lets you drag to rotate the sphere. A debug GUI, disabled by default, exposes dozens of parameters for tweaking strand count, curl noise, pulse speed, ripple spread, glow intensity, and more. This is a creative coding project, not a reusable library or tool. It uses pnpm and Vite for development. Both the code and the audio are original works by the artist, released under CC BY-NC 4.0, which allows free non-commercial use with attribution.