Sixty Frames for the Record: A Three.js Game, Seven Fly-Throughs, and a Wall of CRTs

An experimental digital space where music and interactive graphics converge has emerged from the efforts of a developer and musician working under the monikers LXSTNGHT and F/MEMORY. This creator has constructed a specialized Three.js and React Three Fiber lab designed to serve as a dynamic vessel for his music, transforming static audio releases into fully immersive visual environments.

The lab is not merely a gallery; it is a testing ground where the complexities of WebGL rendering are dissected and optimized to maintain cinematic quality at a consistent 60 frames per second, regardless of user hardware. This commitment to performance is crucial given the dual nature of the project: delivering a three-and-a-half-minute audiovisual experience that harmonizes mood and motion seamlessly in a browser context.

Three principal projects illustrate the lab’s evolution and the technical insights gleaned throughout development. The first, FRONTIER, reimagines Space Invaders as a 3D broadcast spectacle featuring a voxel-crafted fleet and a layered soundscape sourced from the F/MEMORY record. CENTRAL to FRONTIER’s design is a custom ShaderMaterial ground shader that replaces traditional textures with a mathematically computed hexagonal lattice, enhancing visual coherence with scene fog and lighting while minimizing rendering errors.

This shader-based approach to the terrain also enabled innovative gameplay elements, such as dynamic lighting effects from spacecraft and projectiles that physically influence the ground’s appearance. A distinctive gameplay mechanic integrates upgrade choices into the live action, allowing players to interact with hexagonal gates that serve as both visual and functional extensions of the game’s environment. AUDIO mixing prioritizes the music as the core product, with sound effects acting as subtle accents beneath the tracks.

Performance profiling on high-end hardware revealed that GPU time per frame remained impressively low, underscoring the importance of pixel budgeting over device pixel ratio. This insight led to capped buffer sizes and a derived device pixel ratio to optimize rendering load uniformly across disparate displays. Additional discoveries addressed costly compositing effects caused by CSS blend modes layered over the canvas and the need to toggle light intensities rather than visibility to avoid expensive shader recompilations during gameplay.

The second body of work, the LXSTNGHT series, consists of seven distinct fly-through environments crafted to promote the LXSTNGHT record. These include architectural spaces ranging from industrial corridors to vast halls, each accompanied by synchronized music. The series exemplifies modular engine design, reusing a shared rendering pipeline and camera controls while swapping GLB models to create unique scenes.

Optimization challenges surfaced prominently in this series, particularly related to draw call counts and frustum culling. A corridor environment originally suffering from excessive draw calls and disabled culling was refined by merging geometries per material and spatial segments, restoring culling effectiveness and reducing rendering overhead significantly. Additionally, vertex attributes were employed to preserve object-specific animation data within merged meshes, enabling detailed light effects on individual architectural panels.

Color grading and high dynamic range (HDR) rendering introduced further complexities. Default 8-bit frame buffers limited emissive intensities, causing premature clipping and visual artifacts. Transitioning to half-float buffers allowed for accurate HDR representation but necessitated corrections to postprocessing steps, including bloom blending modes and brightness-contrast adjustments, to prevent inverted colors and NaN rendering errors.

A hallmark of the LXSTNGHT series is the depiction of light traveling through architectural elements as discrete pulses rather than continuous modulations, achieved by carefully timed additive brightness peaks that trigger on audio beat data baked offline from the music tracks. This approach avoids the pitfalls of real-time audio analysis, which can misinterpret sustained bass notes as rhythmic kicks, and ensures that visual effects maintain synchronization with the music’s intended structure.

The most recent installment underwent a rigorous performance audit revealing hidden inefficiencies in geometry detail. A subtle bevel modifier applied to thousands of greeble boxes contributed disproportionately to the triangle count without visible benefit, and removing this feature resulted in dramatic frame time reductions and smoother playback.

Collectively, these projects demonstrate a sophisticated fusion of musical narrative and WebGL technical mastery, pushing the boundaries of what browser-based audiovisual art can achieve. The lab’s ongoing development promises further innovations in balancing artistic vision with the practical constraints of real-time rendering, offering valuable lessons for creators seeking to integrate sound and 3D graphics into unified, high-performance experiences.