The Architect of Atmosphere: Inside Filip Zrnzević’s Three.js Digital Lab

In the modern digital landscape, the intersection of audio-visual artistry and high-performance web engineering is a burgeoning frontier. For developer and musician Filip Zrnzević, the browser is not merely a document viewer; it is a canvas for cinematic, real-time immersion. Through his specialized lab, Zrnzević has bridged the gap between his two musical personas—the dark, atmospheric LXSTNGHT and the aggressive, high-energy F/MEMORY—and the rigorous constraints of Three.js.

The resulting project is an ongoing exploration of what it means to host a "mood" within a browser. By treating the browser as a hardware-limited theater, Zrnzević has successfully transformed the technical tax of 3D rendering into a creative asset, pushing the boundaries of what is possible within a 60-frames-per-second (fps) frame budget.

The Genesis of the Lab: Music as a Technical Constraint

The core philosophy driving Zrnzević’s work is that a release must hold a consistent emotional weight for the duration of a track—typically three and a half minutes—regardless of the user’s hardware. This objective demands a meticulous approach to performance. A demo can afford to be a superficial tech showcase, but a musical experience requires a reliable, uninterrupted performance loop.

Zrnzević’s "lab" functions as an interrogation chamber for the Three.js renderer. Every piece is an exercise in resource management, questioning why a frame might fail, what an effect actually costs in terms of GPU time, and how to maintain visual fidelity while respecting the limitations of a web-based environment. The geometry is exclusively modeled in Blender, adhering to a "no-primitive" rule that insists on handcrafted detail rather than shader-based shortcuts.

Chronology of Development: From Arcade to Architecture

The evolution of Zrnzević’s work can be tracked across three distinct bodies of work, each refining his mastery of the Three.js ecosystem.

FRONTIER: The Space Invaders Reimagined

FRONTIER serves as the centerpiece of this journey. It is a 3D reinterpretation of the classic Space Invaders, staged as a cinematic broadcast. The game features a voxel fleet, an open deck dissolving into fog, and a sophisticated lighting rig.

The technical hurdles faced during the development of FRONTIER were significant. Most notably, the ground plane underwent four complete iterations before Zrnzević settled on an analytic ShaderMaterial. By moving away from traditional textures—which suffered from mip-chain issues and lighting artifacts—and toward a hexagonal lattice computed via fwidth() anti-aliasing, he achieved a crisp, responsive surface that interacts dynamically with the gameplay.

The LXSTNGHT Series: A Unified Engine

The LXSTNGHT series comprises seven distinct fly-through worlds, including Longeron, Flue, and Ambit. While each environment offers a unique aesthetic, they share a singular, robust engine. This "contract-based" architecture allows Zrnzević to swap geometry and environment assets while retaining the same camera rigs, post-processing stacks, and audio mapping.

This series highlights the transition from "drawing calls" as a bottleneck to an understanding of frustum culling. By re-merging geometry per material and per spatial segment, Zrnzević optimized the rendering pipeline to ensure that only the relevant sections of the environment are processed, significantly reducing the load on the GPU.

/fm: The CRT Wall

The F/MEMORY project, or /fm, represents his most experimental phase. It features a wall of twenty-four decaying CRT monitors, each functioning as a live canvas texture. The piece abandons traditional UI; instead, the user interacts with the environment physically, dragging the glass to scrub through the record or tapping screens to force them into static. This project showcases a sophisticated use of staggered 24Hz repainting, which manages to provide a complex visual density while maintaining a lower overhead than a full 60fps refresh rate.

Supporting Data: The Cost of Performance

Zrnzević’s work is defined by a data-driven approach to optimization. His findings provide a roadmap for other web developers struggling with the "hidden" costs of WebGL.

Pixel Budgets vs. Device-Pixel-Ratio (DPR)

One of the most critical realizations in the FRONTIER project was the danger of high-DPR settings on large displays. By capping the draw buffer at an absolute pixel budget (5.2 megapixels) rather than relying on a global dpr=2 setting, Zrnzević achieved identical visual output while cutting fill-rate requirements by half.

The Hidden Cost of DOM Compositing

A major breakthrough occurred when Zrnzević identified the performance impact of mix-blend-mode over the WebGL canvas. A "death flash" effect using a fullscreen DOM veil caused the browser’s GPU process to hang, despite the in-page profiler showing idle main threads. By moving this effect into the canvas as a custom GLSL composer pass, he eliminated the hitch entirely, proving that grading should always happen within the canvas.

The "Light Intensity" Fallacy

Perhaps the most counterintuitive discovery involved Three.js’s light management. By toggling the visible property of light groups, Zrnzević was inadvertently triggering constant shader recompilation, which resulted in micro-stutters during intense scenes. He discovered that setting a light’s intensity to 0 keeps it within the program cache, preventing the mid-fight stalls that plagued early builds.

Official Technical Perspectives and Methodology

Zrnzević’s methodology is rooted in the belief that "the soundtrack is the product, and the sound effects are punctuation." This hierarchy dictates every technical decision.

• Offline Choreography: He argues that live FFT (Fast Fourier Transform) detection is inherently flawed for professional music production. Instead, he uses offline analysis to bake beat grids and spectral data into JSON files, allowing the runtime to perform precise lookups. This ensures that visual reactions to the music are perfectly synced rather than approximated.
• HDR Discipline: Through several cycles of trial and error, he established that the composer buffer must be set to THREE.HalfFloatType to avoid clipping. Furthermore, he discovered that additive blending is the only way to avoid the "black-halo" artifacts common when emissive values exceed 1.0.

Implications for Web-Based Immersive Experiences

The implications of Zrnzević’s work are profound for the future of the web. By proving that high-fidelity, cinematic experiences can be sustained within a browser—even on mobile-class hardware—he challenges the industry standard of relying on heavy, non-portable software for visual expression.

His "lab" is not just a personal portfolio; it is a blueprint for a new medium. The shift toward "measure, don’t theorize" highlights a growing maturity in web development, where developers are increasingly moving beyond high-level abstractions to understand the underlying GPU state.

Zrnzević’s future projects promise to further deconstruct the pipeline, with upcoming reports expected to detail the "detective story" of his profiling process. As he continues to refine his tools, the line between traditional gaming, browser-based applications, and musical art continues to blur, offering a glimpse into a more immersive, performant, and artistic digital future.

For those looking to replicate his success, the core takeaway is clear: performance is not a task to be completed at the end of a project; it is the fundamental architectural constraint that should guide the creative process from the very first line of code.