In a significant stride towards demystifying complex technological infrastructure, Cerebrium.ai, a prominent provider of serverless AI solutions, has launched an immersive and highly interactive web experience designed by the creative agency KOKI-KIKO. The project, lauded for its innovative approach to technical communication, utilized sophisticated 3D web graphics to allow users to "feel" how serverless AI operates, rather than merely explaining it through conventional diagrams and text. This ambitious undertaking, however, presented a series of intricate technical challenges, most notably a strategic pivot from the nascent WebGPU API back to the more mature WebGL due to critical performance considerations during development.
A Tangible Vision for Serverless AI
Serverless infrastructure for artificial intelligence represents a paradigm shift in how developers deploy and manage AI models, offering scalability, efficiency, and reduced operational overhead. However, the abstract nature of "serverless" and the underlying complexities of AI model deployment can be challenging to convey to a broad audience. Cerebrium.ai’s objective was to transcend traditional explanations, aiming for an experience that was "fast, precise, modular, and built to scale"—qualities that mirror the very product it represents. KOKI-KIKO’s creative director, Louis Paquet, championed a design philosophy where "design wasn’t just supporting the story—it was the story," transforming the website into a dynamic demonstration of Cerebrium’s capabilities. This approach is increasingly vital in the competitive tech landscape, where engaging user experiences can significantly differentiate a product. The global serverless architecture market, valued at over $7 billion in 2020, is projected to grow at a compound annual growth rate (CAGR) exceeding 20% through 2028, underscoring the importance of accessible communication in this rapidly expanding sector.
The WebGPU Promise and Its Early Hurdles
The initial development phase, spearheaded by WebGL developer Mathis Biabiany, saw an enthusiastic adoption of Three.js’s then-new WebGPURenderer coupled with the Three.js Shading Language (TSL). WebGPU, an emerging web graphics API, promised a more modern, lower-level interface to GPU hardware, aiming to unlock greater performance and capabilities akin to native graphics APIs like Vulkan, Metal, and DirectX 12. TSL, in particular, was hailed for its innovative approach to shader development. Instead of managing disparate GLSL files, materials, and post-processing effects, TSL allowed developers to describe complex visual elements as composable JavaScript node graphs. Three.js would then dynamically generate optimized shaders based on the chosen rendering backend. Biabiany noted that TSL was "a joy to work with," offering a cleaner architecture and the exciting prospect of shipping a real client project with WebGPU.
At the time of implementation, Three.js r183.2 was the latest stable release. The project’s ambitions quickly expanded, evolving beyond a single isolated 3D scene into a complex canvas featuring multiple environments, each with unique materials, particle systems, lighting setups, and post-processing pipelines. The design mandate also included seamless page transitions without disruptive loading screens, a critical factor for maintaining user engagement.
However, as the project scaled, a significant performance bottleneck emerged. While WebGPU offered excellent rendering performance once the scenes were fully loaded, the initial setup phase proved problematic. During this crucial initialization, Three.js had to traverse every TSL node graph, generate the corresponding shaders, and compile the GPU pipelines. On the team’s reference development machine, this process could consume nearly twenty seconds before the first frame was rendered. This extended startup time posed an unacceptable barrier to user experience, directly contradicting the project’s goal of a "fast" and "precise" interaction.
It is worth noting that the WebGPU ecosystem, including Three.js’s implementation, has seen rapid advancements since this project’s initial development. Later versions of Three.js, notably through contributions from developers like Renaud Rohlinger, have dramatically improved shader compilation times, with benchmarks showing roughly a threefold increase in speed due largely to enhanced node-type caching. However, these crucial optimizations were not available when the Cerebrium.ai experience needed to ship, forcing the team to make a pragmatic decision.
The Pragmatic Pivot: Rebuilding with WebGL
Faced with the imperative to deliver a high-performance, production-ready website, Mathis Biabiany made the difficult but necessary decision to migrate the entire rendering layer back to WebGLRenderer. This involved a substantial refactoring effort, replacing the modern, node-based TSL system with more traditional WebGL techniques.
The core rendering logic remained surprisingly consistent, but the implementation became far more explicit. TSL Node Materials were painstakingly converted into standard Three.js materials, with custom GLSL code injected using the onBeforeCompile() hook. The sophisticated compute shaders responsible for particle simulations were rebuilt as a ping-pong GPGPU (General-Purpose computing on Graphics Processing Units) system, leveraging floating-point textures for data storage and manipulation. Similarly, the node-based post-processing graph, which allowed for flexible effects chaining in TSL, was meticulously re-engineered using Three.js’s EffectComposer alongside several custom GLSL passes.
This migration highlighted a key challenge in graphics development: achieving visual parity across different rendering pipelines. Biabiany observed that "two shaders implementing exactly the same idea rarely produce identical images." Subtle differences accumulated, affecting bloom intensity, fog density, gradients, and various material colors. The team meticulously recalibrated these parameters to ensure the final WebGL rendition accurately captured the original artistic direction. This intensive process underscored the maturity and predictability of WebGL as a production-ready solution, even as WebGPU continued its journey toward widespread adoption. While WebGPU and TSL offered a more modular and potentially futuristic way to build visual effects, WebGL provided the immediate, predictable startup times essential for shipping the project on schedule.
Crafting the Visual Narrative: 3D and WebGL Pipeline Deep Dive
The artistic and technical execution of the Cerebrium.ai website required meticulous attention to detail across several critical areas.
-
Dynamic Lighting and Environment: Célia Lopez, the 3D artist on the project, faced the challenge of lighting scenes with animated objects, which precluded the use of static light baking. Every light source had to be recreated dynamically within Three.js. To facilitate precise placement and orientation, simple helper cubes were exported from Cinema 4D alongside the main models. These seemingly rudimentary debugging tools proved invaluable, streamlining the complex process of mirroring the artistic lighting setup within the engine. To further unify the visual aesthetic, a custom purple High Dynamic Range Image (HDRI) from Poly Haven was utilized as an environment map. This not only provided subtle, realistic reflections but also infused every scene with Cerebrium’s signature purple hue, ensuring visual consistency across diverse environments.
-
Animating the Invisible Network: One of the most captivating effects is the animated network of glowing paths, an illusion masterfully crafted by Mathis Biabiany. Intriguingly, the paths themselves are static meshes. The perception of motion is generated entirely within the shader. Each path was UV-unwrapped such that the Y-axis ran continuously along its length. The shader then moves a narrow opacity mask along this UV axis, creating a pulsing effect that appears to travel through the network. The width and falloff of this mask were critical, allowing the team to fine-tune whether the pulse resembled a sharp, distinct signal or a softer, energetic trail. To imbue the system with a sense of organic movement, each path received slightly randomized parameters for its animation, preventing a monotonous, synchronized appearance. Furthermore, path visibility was dynamically controlled based on camera distance, progressively revealing the network as the user navigates the scene. This layered approach ensured a continuously engaging and visually rich experience.
-
Optimizing for Seamless Performance: Despite their seemingly minimalist appearance, the scenes contained surprisingly complex geometry. Maintaining perfectly smooth curves in the network paths, especially around rounded segments, necessitated highly subdivided meshes. This presented a significant optimization challenge for Célia Lopez. Typically, 3D models are optimized using tools like Draco compression (which can reduce file sizes by up to 90%) or dedicated 3D optimizers such as David Ronai’s tool or the Babylon.js Sandbox. However, a blanket polygon reduction across the entire scene led to visible faceting on the curved paths, compromising the website’s polished aesthetic. The innovative solution involved strategically splitting the main 3D model into two separate parts. Each mesh could then be optimized independently, allowing the team to reduce file size without sacrificing the smoothness of critical curved elements. The split was carefully placed to be visually imperceptible, enabling more efficient asset streaming and management while preserving geometric quality.
-
Precision in Motion: Baked Camera Animations: Every camera movement and transition throughout the Cerebrium.ai experience was meticulously baked directly within Cinema 4D. This technique ensured absolute control over timing, framing, easing, and precise synchronization with other interactive elements. By baking the animations, the team avoided potential interpolation discrepancies between different software applications, guaranteeing a consistent and fluid user journey that perfectly aligned with the creative vision.
Designing Security Through Interaction
Beyond mere aesthetics, the Cerebrium.ai website leverages interaction to communicate abstract concepts. A particularly innovative section focuses on security, moving beyond the ubiquitous lock icon to evoke a palpable sense of protection. The central object in this scene is enveloped by an almost invisible spherical shield, its presence primarily defined by a classic Fresnel effect. This optical phenomenon dictates that surfaces facing the camera appear subtle, while those at grazing angles become significantly brighter, creating a shimmering, ethereal boundary.
The visual complexity is further enhanced by a layer of animated procedural noise, subtly modulating the Fresnel intensity to prevent the shield from appearing static. A hexagonal grid, projected onto the sphere and additively blended with the Fresnel effect, combined with bloom, creates the impression of an energy-generating force field. The interaction deepens with a raycaster that continuously tracks the 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" allows the shield to briefly "remember" user interactions, selling the illusion that the force field absorbs, diffuses, and dissipates energy across its surface, thus embodying the concept of dynamic protection.
Credits and Collaboration: The Team Behind the Experience
The Cerebrium.ai project stands as a testament to collaborative innovation, bringing together diverse talents from KOKI-KIKO. The core team included Kim Levan (Strategy & PO), Louis Paquet (Creative Direction & Design), Célia Lopez (3D), Deven Caron and Pier-Luc Cossette (Development), and Mathis Biabiany (WebGL). This multidisciplinary approach, combining strategic vision, artistic prowess, and technical expertise, was crucial in navigating the project’s inherent complexities and delivering a groundbreaking digital experience.
Broader Implications: Lessons for Web Development and UX
The development journey of Cerebrium.ai offers valuable insights for the broader web development community. It underscores the critical balance between embracing cutting-edge technologies and ensuring production readiness. While WebGPU holds immense promise for the future of web graphics, offering powerful, native-like GPU access, its early-stage maturity can present significant challenges for projects with immediate shipping deadlines. The decision to pivot back to WebGL, though a step away from the absolute bleeding edge, was a pragmatic choice that prioritized user experience and project delivery.
This case also highlights the growing importance of design-led development, particularly for B2B tech companies seeking to differentiate themselves in a crowded market. By transforming abstract technical concepts into engaging, interactive narratives, Cerebrium.ai has set a new standard for communicating complex infrastructure. The project demonstrates that immersive, visually rich web experiences are not just for consumer brands but are increasingly vital for making enterprise-level technology accessible and appealing. The relentless focus on optimizing performance, from initial load times to intricate shader effects and 3D asset management, reaffirms that a superior user experience remains paramount, driving adoption and engagement in an increasingly digital world. As WebGPU continues to mature and gain wider browser support, such challenges will diminish, but the lessons learned about balancing innovation with practical constraints will remain invaluable for future projects.
