Building Cerebrium: Making Serverless Infrastructure Tangible Through Innovative Design
The intricate nature of serverless infrastructure, particularly when applied to the rapidly evolving field of artificial intelligence, presents a significant challenge in effective communication. Recognizing this hurdle, the team behind Cerebrium embarked on a project to translate complex technical concepts into a tangible, experiential design. Rather than relying on static diagrams or lengthy textual explanations, their objective was to allow users to “feel” how the system operates. This ambitious undertaking resulted in a digital experience where every interaction was meticulously crafted to mirror the core attributes of the Cerebrium product: speed, precision, modularity, and scalability. This project transcended conventional design roles, with the visual and interactive elements becoming the primary narrative vehicle.
The genesis of this innovative approach can be traced back to the initial development phase, spearheaded by Mathis Biabiany. His early work involved constructing the entire rendering layer using Three.js’s nascent WebGPU Renderer, coupled with the Three.js Shading Language (TSL). At the time of implementation, Three.js version r183.2 represented the latest stable release. TSL proved to be a powerful tool, enabling a more streamlined workflow by consolidating shader development, material definitions, GPU computations, and post-processing effects into composable JavaScript node graphs. This approach offered a significant architectural advantage over managing disparate GLSL files. For Biabiany, this project also marked a significant milestone: his first opportunity to deploy a real-world client project utilizing WebGPU, prompting an effort to push the boundaries of its capabilities.
However, as the project’s scope expanded, practical considerations began to influence the technical direction. Cerebrium’s architecture is not confined to a singular, isolated 3D scene. Instead, it encompasses multiple distinct environments within a single interactive canvas, each featuring its own unique materials, particle systems, lighting configurations, and post-processing pipelines. Furthermore, a critical requirement was the implementation of seamless page transitions, eliminating the need for users to endure loading screens during navigation.
The primary challenge emerged not from the rendering performance once the experience was active, but from the initial loading phase. The process required Three.js to parse every TSL node graph, generate corresponding shaders, and compile the necessary GPU pipelines. On their reference testing machines, this initialization sequence could extend to nearly twenty seconds. While subsequent versions of Three.js have since introduced significant optimizations, notably improving shader compilation speeds by an estimated factor of three through enhanced node-type caching—a development largely attributed to the work of Renaud Rohlinger—these advancements were not available during the project’s critical development window. A startup time approaching twenty seconds was deemed unacceptable for a user-facing product. Consequently, a strategic decision was made to migrate the entire rendering layer back to the more established WebGLRenderer.
Rebuilding the Visual Experience with WebGL
The transition back to WebGL necessitated a fundamental restructuring of the rendering pipeline, although the core rendering logic remained remarkably similar. The shift demanded a more explicit definition of every component. TSL Node Materials were replaced with conventional Three.js materials. Custom GLSL code was integrated through the onBeforeCompile() function, allowing for fine-grained shader manipulation. Compute shaders previously used for particle simulations were re-engineered as a ping-pong GPGPU system employing floating-point textures. The node-based post-processing graph was rebuilt utilizing the EffectComposer utility, augmented with custom GLSL passes.
This migration highlighted a subtle but significant reality of 3D rendering: even two shaders designed to achieve identical visual outcomes rarely produce precisely the same image. Seemingly minor discrepancies in implementation across various parameters, such as bloom intensity, fog density, gradient calculations, and material color values, accumulated to create noticeable visual deviations. The development team had to meticulously recalibrate these elements to faithfully restore the original artistic vision. The decision to revert to WebGL was not a dismissal of WebGPU’s potential, but rather a pragmatic production choice dictated by the maturity of the available tooling at the time of shipping. WebGPU and TSL offered a more modular framework for building visual effects, while WebGL provided the predictable startup times necessary for a successful product launch.
The 3D and WebGL Pipeline in Detail
Recreating Complex Lighting Environments
Célia Lopez played a pivotal role in reconstructing the intricate lighting schemes for the Cerebrium experience. Given that many scenes featured animated objects, pre-baking lighting was not a viable option. Consequently, each light source had to be meticulously recreated directly within Three.js. To facilitate precise placement and orientation, Lopez exported simple helper cubes from Cinema 4D. These geometric aids served as crucial anchors, preserving the exact position and orientation of every light, thereby significantly simplifying the process of replicating the lighting setup within the engine. This approach underscores the value of straightforward debugging tools in accelerating complex development workflows.
Animating the Network: An Illusion of Motion
One of the standout visual elements within the Cerebrium project is the dynamic animation of the glowing network paths. Intriguingly, this perceived motion is entirely an illusion created within the shader. The paths themselves are static meshes. The animation is achieved through UV unwrapping, where the Y-axis of each path extends continuously from one end to the other. The shader then employs a narrowly defined opacity mask that travels along this UV axis, generating the visual effect of a pulsing signal traversing the network. The width and falloff of this mask determine whether the pulse appears as a sharp, digital signal or a softer energy trail.
To prevent all paths from animating in perfect unison, introducing a sense of organic randomness, each path is assigned slightly varied animation parameters. This subtle deviation ensures that the overall system appears more dynamic and lifelike. Additionally, the visibility of each path is dynamically controlled based on its proximity to the camera. This progressively reveals the network as the user navigates through the scene. During the development phase, an inspector tool provided granular control over nearly every animation parameter, allowing for extensive fine-tuning. A key challenge in this process was identifying the optimal balance between the brightness of the emitting lines and the intensity of the bloom effect, ensuring that the details remained visible without being entirely washed out.
A Unified Visual Atmosphere: The Shared Environment
To reinforce the project’s signature purple aesthetic, the team utilized a custom purple High Dynamic Range Image (HDRI) from Poly Haven as the environment map. This element served a dual purpose: it introduced subtle reflections, enhancing the realism of the rendered scenes, and crucially, it helped to unify the overall color palette across all disparate environments. This consistency in lighting and color helped to create a cohesive user experience, making distinct environments feel intrinsically connected to the Cerebrium brand.
Optimizing for Performance: Preserving Detail and Smoothness
While the Cerebrium scenes possess a visually lightweight appearance, their underlying geometry is complex. Maintaining the perfectly smooth curves of the network paths necessitated highly subdivided geometry, particularly in the rounded segments. Typically, 3D models are optimized using compression techniques like Draco, which reduce polygon counts to minimize file sizes. This process can, however, introduce visible faceting along curved surfaces, compromising the polished aesthetic.
To circumvent this issue, the team adopted a dual-model strategy. Instead of indiscriminately reducing geometry quality, they split the model into two distinct parts. This division was carefully executed at visually imperceptible seams, allowing for independent optimization of each mesh without sacrificing the smoothness of the curves. The first model incorporated helper objects, light paths, and a portion of the network, while the second contained the remaining path geometry. This approach enabled more efficient asset streaming and management while preserving the visual integrity of the complex geometry.
Baking Camera Animation for Precision
All camera movements were precisely animated and baked directly from Cinema 4D. This method afforded the team complete control over the timing, framing, easing, and synchronization of camera movements with other experiential elements. It also eliminated potential interpolation discrepancies that can arise when translating animations between different software applications, ensuring a seamless and predictable visual flow.
Designing Security as an Interactive Element
The security features of Cerebrium are not conveyed through conventional iconography like lock symbols. Instead, the design aims to immerse users in the concept of robust infrastructure protection. The central object is enveloped by a nearly invisible spherical shield. Its visual presence is primarily achieved through a sophisticated Fresnel effect: surfaces directly facing the camera remain subtle, while those viewed at grazing angles become significantly brighter.
A layer of animated procedural noise is subtly applied to modulate the Fresnel intensity, preventing the shield from appearing static. This dynamic element ensures a more organic and responsive feel. Overlaying this, a hexagonal grid is projected onto the sphere and blended additively with the Fresnel effect. Combined with bloom, this creates the impression that the shield is actively generating its own energy.
The interactive dimension of this security feature extends further. A raycaster continuously tracks the user’s mouse position on the sphere, writing this data into a temporary texture. The shader then samples this texture as a dynamic mask, locally illuminating nearby hexagons before gradually fading them over time. This subtle persistence, where the shield momentarily “remembers” interactions before dissipating the energy, reinforces the illusion that the force field actively absorbs, diffuses, and disperses energy across its surface, effectively communicating the concept of sophisticated security.
Project Credits
The development of the Cerebrium experience involved a collaborative effort across several specialized roles and an agency:
- Agency: KOKI-KIKO
- Strategy & PO: Kim Levan
- Creative Direction & Design: Louis Paquet
- 3D: Célia Lopez
- Development: Deven Caron, Pier-Luc Cossette
- WebGL Development: Mathis Biabiany
The project’s success lies not only in its innovative technical execution but also in its ability to translate complex serverless AI infrastructure concepts into an engaging and intuitive visual narrative, setting a new benchmark for how technology products can be presented digitally.
