The challenge of communicating complex technical concepts like serverless infrastructure for Artificial Intelligence has long been a hurdle for many organizations. Instead of relying on abstract diagrams or lengthy textual explanations, the team behind Cerebrium embarked on an ambitious project to allow users to intuitively experience how the technology functions. This approach positioned design not merely as a supporting element, but as the core narrative, with every interaction meticulously crafted to mirror the product’s inherent qualities: speed, precision, modularity, and scalability.
This innovative approach, spearheaded by the agency KOKI-KIKO, aimed to demystify the intricacies of AI infrastructure by translating its operational characteristics into a tangible, interactive web experience. The project’s development journey involved significant technical exploration, particularly in leveraging cutting-edge web technologies like WebGPU, and detailed refinement of 3D rendering and animation techniques.
The Genesis of an Experiential Narrative
The core objective was to transcend traditional methods of technical explanation. Recognizing that abstract concepts are often best understood through direct engagement, the Cerebrium project’s design philosophy centered on creating an immersive demonstration. This meant that the user interface and interactive elements were not just visually appealing but were designed to be functional metaphors for the underlying serverless AI infrastructure. The speed of animations, the responsiveness to user input, and the modularity of visual elements were all intended to echo the performance and architecture of the Cerebrium platform.
Mathis Biabiany, a key developer on the project, initially explored the potential of WebGPU, a modern graphics API designed for high-performance graphics and computation on the GPU. His early work utilized Three.js’s new WebGPURenderer alongside TSL (Three.js Shading Language). This combination offered a powerful and flexible way to define complex visual effects and computations through composable JavaScript node graphs, which Three.js would then translate into appropriate shaders for the rendering backend.
"TSL was honestly a joy to work with," Biabiany noted. "Instead of maintaining multiple GLSL files, materials, GPU computations, and post-processing effects, everything could be described as composable JavaScript node graphs. Three.js would then generate the appropriate shaders depending on the rendering backend." This approach promised a cleaner architecture and allowed for pushing the boundaries of what was possible with WebGPU in a production environment.
Navigating Technical Hurdles: The Pivot to WebGL
As the project progressed and the scope expanded, the team encountered significant challenges related to initial loading times. The complexity of Cerebrium, involving multiple dynamic environments, each with its own intricate materials, particle systems, lighting, and post-processing pipelines, began to strain the WebGPU rendering approach. A critical requirement was to ensure seamless page transitions without user-perceptible loading screens.
The bottleneck emerged not in the rendering performance once the scene was active, but in the initialization phase. The process of traversing TSL node graphs, generating shaders, and compiling GPU pipelines for each environment was taking an unacceptably long time. On their reference machines, this crucial startup phase could extend to nearly twenty seconds.
While later versions of Three.js have significantly improved shader compilation times, with benchmarks indicating performance improvements of up to three times faster due to enhanced node-type caching—a development largely credited to Renaud Rohlinger—these advancements were not available at the time of Cerebrium’s critical development window. The inability to justify a twenty-second wait before the first frame rendered necessitated a strategic pivot.
"Waiting nearly twenty seconds before rendering the first frame wasn’t something we could justify," Biabiany explained. "So I made the decision to migrate the entire rendering layer back to WebGLRenderer." This decision, though a step back from the bleeding edge of WebGPU, was a pragmatic production choice driven by the maturity of available tooling and the imperative to deliver a responsive user experience.
Rebuilding the Visual Experience with WebGL
The migration back to WebGL involved a substantial refactoring of the rendering pipeline. While the fundamental rendering logic remained largely consistent, the implementation became more explicit. Three.js’s TSL Node Materials were replaced with traditional Three.js materials, augmented with custom GLSL code injected via the onBeforeCompile() function. The complex compute shaders responsible for particle simulations were re-engineered as a ping-pong GPGPU system utilizing floating-point textures. Similarly, the node-based post-processing graph was rebuilt using Three.js’s EffectComposer, incorporating several custom GLSL passes.
This transition highlighted a subtle yet significant aspect of graphics programming: even identical visual concepts implemented with different shader languages or through different pipelines rarely produce identical visual outputs. Small discrepancies in bloom intensity, fog density, gradient calculations, and material colors accumulated, necessitating careful recalibration to precisely match the original artistic vision. This meticulous fine-tuning ensured that the visual fidelity established with the WebGPU prototype was faithfully reproduced within the WebGL framework.
Crafting the 3D and WebGL Pipeline
The visual richness of the Cerebrium experience was achieved through a combination of sophisticated 3D modeling, precise lighting, and intricate shader programming.
Recreating Immersive Lighting
Celia Lopez, responsible for the 3D aspects of the project, faced the challenge of recreating dynamic lighting setups. Since many scenes featured animated objects, traditional light baking techniques were not viable. Consequently, all lighting had to be implemented directly within Three.js. To facilitate accurate placement and orientation of lights, Lopez exported simple helper cubes from Cinema 4D. These cubes served as precise markers, preserving the positional and rotational data of each light source, thereby simplifying the recreation of complex lighting environments within the engine. "Sometimes the simplest debugging tools end up saving the most time," Lopez commented on the efficacy of this method.
Animating the Network’s Ethereal Glow
A particularly captivating element of the Cerebrium experience is the animated network of glowing paths. Mathiase Biabiany revealed that this illusion of motion is entirely shader-driven, with the underlying paths being static meshes. The animation is achieved by UV-unwrapping each path such that the Y-axis runs continuously along its length. The shader then employs a moving opacity mask along this UV axis, creating a pulsating effect that travels through the network. The width and falloff of this mask dictate whether the pulse appears as a sharp signal or a softer energy trail.
To prevent the animation from appearing synchronized and robotic, each path is rendered with slightly varied parameters. This subtle randomization injects an organic quality into the network’s movement. Furthermore, the visibility of each path is dynamically controlled based on its proximity to the camera. This progressive revelation of the network as the user navigates the scene enhances the sense of depth and exploration.
During development, an extensive inspector provided control over nearly every parameter, allowing for precise adjustments to the visual output. A key challenge involved balancing the brightness of the glowing lines to emit light convincingly without allowing the bloom effect to overpower finer details. This delicate balance was crucial for maintaining the desired aesthetic.
A Unified Visual Environment
To reinforce the project’s distinctive purple ambiance, a custom purple HDRI (High Dynamic Range Image) sourced from Poly Haven was employed as the environment map. This not only added subtle reflections to the scenes but also served to unify the color palette across diverse environments. Lopez emphasized the importance of this consistency: "Sometimes, lighting consistency is what makes completely different environments feel like they belong to the same product."
Optimizing for Performance Without Sacrificing Quality
Despite their seemingly lightweight appearance, the 3D scenes were computationally intensive. Achieving perfectly smooth curves in the network paths required highly subdivided geometry, particularly in the rounded segments. This presented a performance challenge that required careful optimization.
When delivering 3D models for web integration, optimization passes are standard practice. However, initial attempts to optimize the entire scene using tools like Draco or the Babylon.js Sandbox resulted in a reduction of polygon count that led to visible faceting along the curved paths, undermining the polished aesthetic.
The solution involved a nuanced approach: splitting the model into two distinct parts. This allowed for independent optimization of each mesh without compromising the smoothness of the curves. The split point was strategically chosen to be visually imperceptible, enabling more efficient asset streaming and management while preserving the geometric integrity of the design. This technique ensured that the visual quality remained high while mitigating performance issues.
Baking Camera Animation for Precision
All camera movements were meticulously baked directly from Cinema 4D. This process provided granular control over timing, framing, easing, and synchronization with other experiential elements. It also eliminated potential interpolation discrepancies that could arise from translating animations between different software applications, ensuring a seamless and precise camera path throughout the user’s journey.
Designing Security as an Interactive Experience
The Cerebrium website also features a section dedicated to illustrating the platform’s security. Moving beyond static icons, the design aimed to convey a tangible sense of protection. The central object is enveloped by a subtly rendered spherical shield. Its visual appearance is primarily driven by a Fresnel effect, where surfaces facing the camera remain subdued, while those at grazing angles become significantly brighter.
This Fresnel effect is further modulated by animated procedural noise, preventing the shield from appearing static and lending it a dynamic, almost living quality. A projected hexagonal grid is blended additively with the Fresnel effect, and in conjunction with bloom, creates the impression that the shield is actively generating energy.
The interactive element of the security shield is particularly innovative. 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. This creates a subtle persistence effect, where the shield "remembers" interactions, reinforcing the illusion that the force field absorbs, diffuses, and dissipates energy across its surface. This design choice transforms a passive security feature into an active, responsive element of the user experience.
Credits and Project Leadership
The Cerebrium project was a collaborative effort, with significant contributions from a talented team:
- Agency: KOKI-KIKO
- Strategy & PO: Kim Levan
- Creative Direction & Design: Louis Paquet
- 3D: Célia Lopez
- Development: Deven Caron, Pier-Luc Cossette
- WebGL: Mathis Biabiany
The success of the Cerebrium project lies not only in its technical execution but in its profound understanding of user engagement. By translating abstract technical concepts into a visually compelling and interactive experience, the team has set a new standard for how complex B2B technologies can be effectively communicated and appreciated. The project demonstrates a powerful synergy between innovative design, cutting-edge web technologies, and a clear strategic vision, ultimately making the intangible world of serverless AI infrastructure accessible and understandable to a broader audience.
