The Sleepers, a compact WebGL experience developed by creative developer Thibaut Foussard, serves as a high-performance case study in digital atmosphere and technical optimization. Created as a submission for the renowned Three.js challenge hosted by Bruno Simon, the project emphasizes a "performance-first" philosophy, demonstrating how sophisticated visual storytelling can be achieved without the overhead of heavy computational assets. In an era where web-based 3D content often struggles with high bounce rates due to long loading times and hardware limitations, Foussard’s work highlights a strategic shift toward lightweight, shader-driven techniques that prioritize efficiency and visual impact.
Context and the Bruno Simon Three.js Challenge
The development of The Sleepers occurred within the framework of a creative coding competition organized by Bruno Simon, a leading figure in the Three.js community and the creator of the widely acclaimed "Three.js Journey" course. These challenges are designed to push the boundaries of what is possible within the browser, often setting tight deadlines and specific thematic constraints. For developers like Foussard, these competitions necessitate a workflow that balances artistic ambition with the practicalities of time management and resource allocation.
Building for such a challenge requires developers to work independently and often under significant time pressure. This environment naturally favors efficiency over complexity. The objective of The Sleepers was not to pioneer the most technically intricate simulation but to leverage simple, elegant solutions to create a cohesive and immersive environment. This approach is increasingly relevant as the industry moves toward WebGPU, where the demand for optimized shaders and efficient rendering pipelines continues to grow.
Technical Methodology: The Swirling Transition
The experience opens with a distinctive swirling transition that bridges the gap between a grayscale introduction and the fully colored environment. This effect is achieved through a post-processing shader that utilizes a black-and-white texture as a logic map.
The core of this transition lies in the use of a uProgress uniform, which acts as a global trigger for the reveal. By utilizing the red channel of a custom swirl texture, the shader establishes a per-pixel threshold. As the progress value increases from 0 to 1, different fragments of the screen are triggered to transition from their grayscale state to their original RGB values.
The shader logic employs a greyscale function that calculates the dot product of the input color to determine luminance, which is then mixed with a deep blue hue to provide a stylized, cinematic look during the transition. The use of the step function in GLSL allows for a clean, sharp reveal based on the texture’s luminance values. This technique is computationally inexpensive compared to complex geometry-based transitions, as it operates entirely within a single post-processing pass.
Environmental Design: Noise-Driven Vertical Fog
Atmosphere in The Sleepers is largely defined by its fog system. Rather than utilizing expensive volumetric lighting—which can significantly degrade performance on mobile devices and integrated GPUs—Foussard implemented a "color-trick" fog applied directly to the scene’s materials.
The implementation utilizes the onBeforeCompile method in Three.js, a powerful hook that allows developers to inject custom GLSL code into existing Three.js materials like MeshStandardMaterial. This approach avoids the need to write entirely new shaders while still providing the flexibility of custom vertex and fragment manipulation.
The fog system is built in two primary stages:
- Linear Vertical Gradient: The shader retrieves the world position of each fragment. Fragments located below a specific Y-axis threshold are blended toward the fog color using a
smoothstepfunction, while those above remain unaffected. This creates a grounded, low-lying mist effect. - Noise-Driven Animation: To simulate the organic movement of real fog, Foussard integrated a seamless noise texture. By sampling this texture and adding its values to the vertical gradient logic, the "height" of the fog appears to fluctuate dynamically. This creates a sense of life and movement without the need for complex fluid simulations.
To further enhance the sense of scale, the entire scene is enclosed within a large sphere. This sphere is shaded with the same fog logic—opaque at the horizon and transparent toward the zenith—to create a seamless transition between the ground and the sky.
Stylistic Rendering: The Inverted Hull Outline
A key visual element of The Sleepers is its use of mesh outlines, which provide a "cell-shaded" or illustrative quality to the 3D models, such as the train and architectural elements. The technique used is often referred to as the "inverted hull" or "backface outline" method.
This process begins in Blender, where a secondary material slot is created for the outline, typically assigned a black color. The "Solidify" modifier is then applied with specific settings: a negative thickness (which pushes the geometry outward) and flipped normals. By enabling backface culling in the material settings, the original geometry remains visible, while the slightly larger, inverted geometry appears only as a border around the edges of the object.
When exported via glTF, these modifiers are applied to the mesh data. In the Three.js environment, the developer can then programmatically reassign the outline material to a MeshBasicMaterial. This ensures that the outlines are not affected by scene lighting, maintaining a consistent, flat aesthetic that emphasizes the silhouettes of the objects.
Structural Efficiency: The Infinite Scrolling City
The environment of The Sleepers is designed to feel vast and unending, yet it is constructed from a single, repeatable "chunk." To manage memory consumption and maintain high frame rates, Foussard utilized a dynamic 3×3 grid system centered on the camera.
As the camera moves through the scene, tiles are repositioned based on their distance from the viewer. When a tile falls behind the camera’s field of view, it is seamlessly moved to the front of the grid. This "treadmill" approach allows for the illusion of an infinite city while keeping the total number of active draw calls and geometries to a minimum. This technique is a staple of "endless runner" games and open-world optimization, ensuring that the experience remains accessible even on devices with limited RAM.
Lighting Workflow and Three.js LightKit
Lighting a WebGL scene is often one of the most time-consuming aspects of development, requiring a balance between aesthetic mood and technical constraints like exposure and tone mapping. For this project, Foussard utilized "Three.js LightKit," a specialized tool he developed to streamline the lighting process.
LightKit allows developers to rapidly test hundreds of High Dynamic Range (HDR) environments from libraries like Polyhaven. It provides a real-time interface for adjusting exposure, tone mapping (such as ACES or Filmic), and environment intensity. Once the desired look is achieved, the settings are exported as a JSON file and loaded into the project. This workflow eliminates the need for manual trial-and-error in the code, allowing the developer to focus on the creative direction of the scene.
Implications and Performance Analysis
The Sleepers serves as a reminder that the quality of a WebGL experience is not solely dependent on the complexity of its geometry or the realism of its textures. Instead, the success of the project lies in its "perceived complexity"—the ability to convince the viewer of a deep, atmospheric world through clever shader manipulation and efficient asset management.
From a performance standpoint, the techniques used in The Sleepers are highly optimized for modern web standards. By favoring textures and shaders over high-polygon counts and volumetric effects, the project ensures a low "Time to Interactive" (TTI) and high "Frames Per Second" (FPS). This is critical for meeting Google’s Core Web Vitals, which increasingly factor loading performance and visual stability into search rankings.
Furthermore, the project highlights the importance of the "Blender-to-Web" pipeline. By leveraging Blender’s modifiers and material slots effectively, developers can offload much of the visual logic to the asset creation phase, resulting in cleaner, more maintainable codebases.
Conclusion
The Sleepers stands as a testament to the power of digital minimalism in the field of creative coding. By focusing on lightweight techniques—such as texture-based transitions, noise-driven fog, and inverted hull outlines—Thibaut Foussard has created an evocative experience that remains technically accessible across a wide range of hardware. As the web becomes an increasingly visual medium, the strategies employed in The Sleepers offer a blueprint for developers seeking to create high-impact 3D content without sacrificing performance or user experience. The project not only fulfills the requirements of the Three.js challenge but also contributes to the broader conversation regarding the future of efficient, atmospheric web design.
