Crafting an Immersive Serverless Experience with Cerebrium's 3D Design

Creating an effective representation of serverless infrastructure for AI can be challenging, given the complexity involved. The Cerebrium project tackled this issue by prioritizing user experience over traditional explanatory methods. The team's goal was to enable users not just to understand the technology but to feel how it operates through interactive design. Every component was crafted to reflect the core attributes of the product: speed, precision, modularity, and scalable functionality. In this undertaking, design wasn’t just an accessory; it became the narrative.

The Technical Foundation

• Cinema 4D / Redshift / Blender: Tools for crafting and animating 3D assets.
• Three.js r183.2: Framework for WebGL rendering.
• GSAP: Library for animations and transitions.
• Makio MeshLine: For rendering dynamic 3D pathways.

Exploring WebGPU Integration

By Mathis Biabiany

At the project’s onset, the rendering was entirely built using Three.js' WebGPURenderer alongside the newly introduced TSL (Three.js Shading Language). Working with TSL opened a new avenue for managing shaders and graphics processing through composable JavaScript node graphs, eliminating the need for multiple GLSL files. However, as the project expanded, complications arose. Cerebrium required multiple environments operating seamlessly within a single canvas, each with distinct materials and lighting configurations, demanding rapid transitions between scenes.

The initial loading phase became a bottleneck. On the reference machine, rendering the first frame could take as long as twenty seconds, hampering the user experience significantly. A shift back to WebGLRenderer became necessary to ensure timely rendering despite the architectural benefits offered by WebGPU.

Transitioning to WebGL

Despite the necessity of reverting to WebGL, the foundational rendering logic remained intact. One notable adjustment was in the material handling; TSL Node Materials were exchanged for traditional materials, which were further customized using onBeforeCompile() to embed specific GLSL code. The switch provided more reliable startup times while still allowing for the complexity expected in modern web graphics.

Through this transition, the challenges of shader equality became evident. Subtle differences in various elements, from noise functions to lighting models, consistently led to variations in visual results. Thus, every artistic choice, from bloom intensity to fog density, required careful recalibration to maintain the intended aesthetic.

3D Visual Dynamics and WebGL

Lighting Dynamics

By Célia Lopez

Direct animation of the lighting setup was crucial as many scenes required active illumination due to moving elements. To streamline this, basic helper cubes were exported from Cinema 4D, serving as references for positioning the lights accurately in Three.js.

The Animated Network Effect

By Mathis Biabiany

An intriguing feature of the project is the network of glowing pathways that create a motion illusion solely through shader manipulation. Each path is static, yet the shader animates a narrow opacity mask along the UV space, generating an illusion of movement. By introducing slight randomness to animation parameters, the system achieves a more organic feel, enhancing immersion.

Establishing a Cohesive Environment

Crowning the project’s design is a custom purple HDRI, serving as the environmental map. Its subtle reflections enhance visual fidelity while unifying the diverse scenes within the application. The consistent lighting effect ensures elements from varied environments feel part of a cohesive whole.

Performance Considerations

While scenes may visually appear lightweight, they embodied significant computational load, particularly for smooth geometry along network paths. To mitigate rendering challenges associated with high triangle counts, multiple optimization techniques were employed without sacrificing visual fidelity. Key innovations included segmenting models into manageable parts to preserve geometric smoothness while facilitating efficient data management.

Camera Animation Techniques

The camera movements were baked from Cinema 4D to ensure precision across timing and motion, removing discrepancies that may arise during interactive sessions. This approach provided complete control over framing and synchronization, crucial for maintaining an engaging user experience.

Security Representation as Interaction

By Mathis Biabiany

Distinctively, the project's security section employs a novel visual metaphor; instead of a lock symbol, a dynamically rendered, semi-transparent shield illustrates protection. This shield data visualizes interaction through a Fresnel effect, adapting brightness based on camera angle, supplemented with animated procedural noise for added intrigue. This layered visual dynamic helps convey layers of security without falling into mundane graphics.

Credits

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