The challenge of marketing serverless infrastructure for artificial intelligence lies in its inherent invisibility. Unlike consumer hardware or tangible software interfaces, backend infrastructure exists as a series of abstract protocols, latency metrics, and scaling logic. To bridge this conceptual gap, Cerebrium, a leading platform in the AI deployment space, commissioned a high-fidelity digital experience designed to transform these abstract concepts into a visceral, interactive narrative. The project, a collaborative effort involving the agency KOKI-KIKO and a specialized team of creative developers, serves as a landmark case study in the intersection of high-performance web graphics and technical storytelling.
The primary objective was to move beyond traditional diagrams and technical documentation. By leveraging advanced 3D rendering and real-time interaction, the team sought to mirror the core attributes of the Cerebrium product: speed, precision, modularity, and scalability. This initiative comes at a critical time for the AI industry, where the race to provide efficient inference environments has led to a crowded market. Differentiation, therefore, is increasingly found in the quality of the developer experience and the clarity of the brand’s technological vision.
The Rise of AI Infrastructure and the Need for Visualization
As the global demand for Large Language Models (LLMs) and generative AI continues to surge, the underlying infrastructure has become the backbone of the modern economy. Serverless GPU computing allows developers to deploy models without the overhead of managing physical or virtual servers. However, for many stakeholders, the "black box" nature of these systems remains a hurdle.
Industry analysts suggest that the serverless architecture market is expected to grow significantly, with a compound annual growth rate (CAGR) exceeding 20% through 2030. In this high-stakes environment, Cerebrium’s decision to invest in a bespoke WebGL-driven experience reflects a broader trend among "AI-native" companies to adopt sophisticated design languages that resonate with a highly technical audience.
The Technical Ambition: The WebGPU Experiment
The development of the Cerebrium demo was marked by a bold technical experiment: the adoption of WebGPU. As the successor to WebGL, WebGPU offers lower-overhead access to modern GPU capabilities, allowing for more complex simulations and more efficient rendering. Lead developer Mathis Biabiany initially built the entire rendering layer using the Three.js WebGPURenderer and the Three.js Shading Language (TSL).
TSL represents a paradigm shift in web graphics, allowing developers to describe materials, GPU computations, and post-processing effects as composable JavaScript node graphs rather than maintaining disparate GLSL files. This modular architecture promised a cleaner codebase and the ability to push the boundaries of real-time web effects.
However, the implementation encountered a significant roadblock common in bleeding-edge web technology: shader compilation latency. While WebGPU offers superior performance once the application is running, the initialization phase—where the browser traverses node graphs and compiles GPU pipelines—proved prohibitive. On reference hardware, this process resulted in a startup delay of nearly twenty seconds.
In a professional production environment, where user retention is closely tied to page load speeds, a twenty-second delay was deemed unacceptable. Despite recent advancements in Three.js (notably version r183.2 and subsequent updates) that have tripled compilation speeds through better node-type caching, the team made the strategic decision to migrate the project back to the more mature WebGL framework to ensure a seamless user experience.
Re-engineering for WebGL Performance
The migration from WebGPU back to WebGL required a complete reconstruction of the rendering pipeline. While the underlying logic remained consistent, the implementation became significantly more explicit. The team replaced TSL Node Materials with traditional Three.js materials, utilizing the onBeforeCompile() method to inject custom GLSL code for specific visual effects.
One of the most complex aspects of this transition involved the particle simulation system. In the WebGPU version, this was handled via compute shaders; in the WebGL version, the team had to implement a "ping-pong" GPGPU (General-Purpose Computing on Graphics Processing Units) system. This method uses floating-point textures to store and update particle positions and velocities across successive frames.
The recalibration of visual assets was equally demanding. Technical analysis during the migration revealed that identical mathematical logic in WebGPU and WebGL does not always yield identical visual outputs. Differences in how the two APIs handle bloom intensity, fog density, and color gradients necessitated a frame-by-frame artistic review to recover the original creative direction. This phase of the project highlights the current "maturity gap" in web graphics tools, where WebGL remains the industry standard for production stability despite the theoretical advantages of newer APIs.
3D Pipeline and Architectural Optimization
The visual world of Cerebrium is defined by a signature purple atmosphere, intended to convey a sense of high-energy data processing. To achieve lighting consistency across diverse scenes, 3D artist Célia Lopez utilized a custom High Dynamic Range Image (HDRI) from Poly Haven. This environment map provided subtle reflections and a unified color palette, ensuring that disparate modules of the infrastructure felt like part of a single, cohesive ecosystem.
A significant challenge arose in the management of the 3D geometry. The demo features a complex network of glowing paths, which required highly subdivided geometry to maintain smooth curves. High polygon counts, however, pose a risk to web performance, particularly on mobile devices or machines with integrated graphics.
To resolve this, the team employed a multi-stage optimization strategy:
- Mesh Splitting: The 3D models were split into independent segments. This allowed the team to optimize specific parts of the network without introducing visible "faceting" on curved surfaces.
- Draco Compression: Using tools like the Babylon.js Sandbox and David Ronai’s 3D Optimizer, the team applied Draco compression to the geometry. This significantly reduced the file size for transmission without sacrificing the visual integrity of the shapes.
- Baked Animations: Rather than calculating camera movements in real-time, which can lead to interpolation errors between different browsers, every camera path was baked directly in Cinema 4D. This ensured that the timing, framing, and easing were frame-perfect and synchronized with the interactive elements of the site.
Designing Security Through Interaction
A standout feature of the Cerebrium demo is its representation of infrastructure security. Eschewing the cliché of a padlock icon, the team developed an interactive "force field" or spherical shield that surrounds central data objects. This shield serves as a metaphor for the platform’s protective layers.
The visual effect was achieved through a combination of Fresnel shaders and procedural noise. The Fresnel effect ensures that the shield appears transparent when viewed head-on but becomes brightly illuminated at the edges, creating a sense of volume. A hexagonal grid is then projected onto the sphere and blended additively.
To make the security "tangible," the team implemented a mouse-tracking raycaster. As a user moves their cursor over the shield, a temporary texture is updated with the mouse’s coordinates. The shader samples this texture to locally illuminate the hexagonal grid, creating a "ripple" effect that follows the user. Crucially, the team added a persistence factor to the shader, allowing the light to fade gradually rather than disappearing instantly. This subtle interaction sells the illusion that the shield is a reactive energy field capable of absorbing and diffusing external input.
Broader Impact and Industry Implications
The completion of the Cerebrium demo provides several key insights for the tech industry and the web development community. First, it demonstrates that for complex B2B products, high-end visual storytelling is no longer a luxury but a functional requirement for effective communication. By making the "serverless" experience feel fast and precise through design, Cerebrium reinforces its market position as a premium provider.
Second, the project serves as a cautionary tale regarding the adoption of nascent technologies like WebGPU in a production environment. While the industry is moving toward WebGPU, the Cerebrium project confirms that WebGL remains the reliable choice for projects where initial load time is a critical performance indicator.
Finally, the success of the project underscores the importance of a multidisciplinary approach. The seamless integration of 3D modeling, shader programming, and traditional web development was only possible through close collaboration between the agency, POs, and technical leads.
As AI infrastructure continues to evolve, the tools used to visualize it must keep pace. The Cerebrium demo stands as a testament to the fact that even the most abstract cloud services can be made tangible through the thoughtful application of real-time graphics and interactive design. The project’s credits include Agency KOKI-KIKO, with strategy by Kim Levan, creative direction by Louis Paquet, 3D by Célia Lopez, and development by Deven Caron, Pier-Luc Cossette, and Mathis Biabiany. Their collective work has set a new benchmark for how the "invisible" foundations of the AI era are presented to the world.
Related posts:
