The evolution of cloud computing has reached a critical juncture with the rise of artificial intelligence, demanding a new breed of infrastructure that is both invisible and hyper-efficient. Cerebrium, a platform specializing in serverless infrastructure for AI, recently sought to bridge the gap between abstract technical architecture and user experience through a high-fidelity interactive digital environment. By moving away from traditional diagrams and static documentation, the project aimed to allow users to intuitively grasp the concepts of speed, precision, and modular scaling. The development of this digital experience, led by the creative agency KOKI-KIKO, serves as a significant case study in the current limitations and future potential of web-based graphics, particularly regarding the transition between the legacy WebGL standard and the emerging WebGPU framework.
The Challenge of Visualizing AI Infrastructure
In the competitive landscape of AI development, companies like Cerebrium provide the backend muscle required to run large language models (LLMs) and diffusion models without the overhead of manual server management. Communicating the value of "serverless" technology is notoriously difficult, as the primary benefit is the absence of visible hardware. To address this, the design team focused on a visual language that emphasized fluid motion, glowing data paths, and reactive environments. The goal was to transform technical specifications into a "tangible" sensation of performance.
The project’s creative direction, spearheaded by Louis Paquet, dictated that every interaction must reflect the product’s core attributes: modularity and scale. This required a robust 3D engine capable of handling complex particle systems, dynamic lighting, and seamless transitions. However, as the development team discovered, the pursuit of cutting-edge performance often clashes with the practical realities of cross-platform web stability and initial load times.
The WebGPU Experiment and Technical Bottlenecks
At the onset of the project, WebGL developer Mathis Biabiany opted to utilize WebGPU, the successor to WebGL. WebGPU is designed to provide more direct access to GPU hardware, offering reduced CPU overhead and better support for modern rendering techniques. Using Three.js and the new Three.js Shading Language (TSL), the team initially built a sophisticated rendering layer. TSL allowed the developers to move away from maintaining disparate GLSL (OpenGL Shading Language) files, instead using composable JavaScript node graphs that could theoretically generate shaders for any rendering backend.
The initial development phase demonstrated the architectural elegance of TSL. It streamlined the creation of materials, GPU-based computations, and post-processing effects. However, as the complexity of the Cerebrium environment grew—incorporating multiple 3D scenes, intricate particle simulations, and layered lighting—the team encountered a significant performance hurdle. While the runtime rendering was fluid, the initialization phase was not.
On standard reference hardware, the time required for Three.js to traverse the TSL node graphs, generate the necessary shaders, and compile the GPU pipelines approached twenty seconds. In the context of modern web performance, where user retention drops significantly after a three-second delay, a twenty-second loading screen was deemed unacceptable for a commercial product launch. Although later iterations of Three.js (specifically those involving contributions from developers like Renaud Rohlinger) have since improved shader compilation speeds by up to 300% through node-type caching, these optimizations were not available during the project’s critical production window.
The Strategic Reversion to WebGL
Faced with the prospect of alienating users through excessive load times, the development team made the pragmatic decision to migrate the entire project back to WebGL. This transition highlights a common dilemma in high-end web development: the choice between using the most advanced technology available and ensuring a reliable user experience across all devices.
Rebuilding the experience in WebGL required a shift from implicit node-based logic to explicit GLSL coding. The team replaced TSL Node Materials with traditional Three.js materials, utilizing the onBeforeCompile() method to inject custom logic. The particle systems, which had functioned as compute shaders in WebGPU, were redesigned as a GPGPU (General-Purpose Computing on Graphics Processing Units) system using a "ping-pong" method with floating-point textures.
This migration was not merely a copy-paste operation. The developers noted that identical mathematical logic in WebGPU and WebGL often yielded different visual results. Discrepancies in bloom intensity, fog density, and color gradients required a meticulous recalibration phase to maintain the artistic integrity of the original design. This phase underscored the fact that while WebGPU offers superior modularity, WebGL remains the industry standard for predictable startup performance.
3D Pipeline and Lighting Synchronization
While the rendering engine underwent a major overhaul, the 3D asset pipeline remained a cornerstone of the project’s visual success. 3D artist Célia Lopez focused on creating an environment that felt unified despite the variety of scenes. Because the project featured numerous animated objects, "baking" the lighting (calculating static shadows and highlights into textures) was not a viable option.
To ensure that the lighting in the Three.js engine matched the original vision created in Cinema 4D, Lopez utilized a system of "helper cubes." These simple geometric markers were exported alongside the models to preserve the exact spatial coordinates and orientations of light sources. This allowed the developers to recreate complex lighting setups within the web environment with mathematical precision, saving dozens of hours of manual adjustment.
To further unify the aesthetic, a custom purple High Dynamic Range Image (HDRI) from Poly Haven was used as the environment map. This provided subtle, consistent reflections across all metallic and glass surfaces, reinforcing the "Cerebrium Purple" brand identity throughout the interactive journey.
Animating the Data Network
One of the most praised elements of the Cerebrium site is the "living" network of glowing data paths. Contrary to appearances, these paths are not composed of moving geometry. Instead, they are static meshes with specialized UV unwrapping. By ensuring the Y-axis of the UV map ran continuously from one end of a path to the other, the developers could use a shader to move an opacity mask along that axis.
This technique created the illusion of a pulse or signal traveling through the network. To prevent the animation from appearing mechanical or repetitive, the team introduced several layers of randomization:
- Variable Pulse Width: Different paths featured sharper or softer signals.
- Speed Offsets: Signals traveled at varying velocities to mimic real-world data fluctuations.
- Timing Offsets: Staggered start times ensured that the entire network did not "blink" in unison.
- Proximity Reveal: The visibility of the paths was linked to the camera’s position, causing the network to emerge organically as the user navigated the site.
Optimization and Geometry Management
The visual fidelity of the site posed a risk to performance, particularly regarding the smooth, curved segments of the data network. High-quality curves require high polygon counts, which can lead to large file sizes and sluggish frame rates on mobile devices.
To mitigate this, the team employed Draco compression, a library for compressing and decompressing 3D geometric meshes and point clouds. However, standard optimization tools often decimated the geometry too aggressively, creating "faceting" (visible flat edges) on the curves. The solution involved a strategic split of the 3D models. By separating the network into two distinct meshes and optimizing them independently based on their proximity to the camera and their structural importance, the team maintained the "polished" aesthetic without exceeding the performance budget.
Interaction Design: The Security Shield
A pivotal section of the website focuses on infrastructure security. Rather than using a conventional lock icon, the team developed an interactive "spherical shield" to represent protection. The shield utilized a Fresnel effect—where the edges of the sphere appear brighter than the center relative to the camera—combined with procedural noise to create a shimmering, energetic feel.
The interaction was deepened through the use of a raycaster that tracked the user’s mouse position. As the mouse moved over the shield, the coordinates were written into a temporary texture, which the shader then sampled to illuminate a hexagonal grid locally. By incorporating a "persistence" factor, where the hexagons faded slowly rather than disappearing instantly, the team successfully simulated the behavior of a force field absorbing and dissipating energy.
Broader Implications for the Tech Industry
The Cerebrium project serves as a barometer for the current state of web technology in the AI sector. As AI companies proliferate, the need for distinctive, high-performance branding has never been higher. The transition from WebGPU back to WebGL highlights the "bleeding edge" risks that developers face when attempting to implement nascent standards before they are fully optimized for production environments.
Furthermore, the project demonstrates that the future of technical communication lies in "sensory" storytelling. By allowing potential clients to interact with the concepts of serverless scaling and security, Cerebrium has moved beyond the "black box" perception of AI infrastructure.
The successful launch of the site, despite the technical pivots required, emphasizes the importance of a multidisciplinary approach involving creative directors, 3D artists, and specialized WebGL developers. As WebGPU continues to mature and shader compilation times decrease, the industry is likely to see a return to the node-based workflows that were pioneered during this project, eventually fulfilling the promise of a more modular and powerful web.
Project Credits
The realization of the Cerebrium digital experience was a collaborative effort involving a diverse team of specialists:
- Agency: KOKI-KIKO
- Strategy & Product Ownership: Kim Levan
- Creative Direction & Design: Louis Paquet
- 3D Artistry: Célia Lopez
- General Development: Deven Caron, Pier-Luc Cossette
- WebGL Development: Mathis Biabiany
This project stands as a testament to the fact that in the world of high-tech infrastructure, the medium is often the message; a fast, responsive, and beautiful website is the best proof of a fast, responsive, and powerful backend.
Related posts:
