--- title: Building Cerebrium: Making Serverless Infrastructure... description: A technical case study from agency KOKI-KIKO on building the Cerebrium website, covering the full 3D and WebGL pipeline. The team initially built the rendering... canonical: https://daily.dev/posts/building-cerebrium-making-serverless-infrastructure-tangible-rubierv9a twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Building Cerebrium: Making Serverless Infrastructure Tangible | daily.dev og:description: A technical case study from agency KOKI-KIKO on building the Cerebrium website, covering the full 3D and WebGL pipeline. The team initially built the rendering... og:url: https://daily.dev/posts/building-cerebrium-making-serverless-infrastructure-tangible-rubierv9a og:image: https://api.daily.dev/og/posts/rUbIerv9A.png og:image:alt: Building Cerebrium: Making Serverless Infrastructure Tangible og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Building Cerebrium: Making Serverless Infrastructure Tangible **[Codrops](https://daily.dev/sources/codrops)** · 8 min read · 0 upvotes · 0 comments ## Summary A technical case study from agency KOKI-KIKO on building the Cerebrium website, covering the full 3D and WebGL pipeline. The team initially built the rendering layer with Three.js WebGPURenderer and TSL (Three.js Shading Language), but had to migrate back to WebGLRenderer due to ~20-second shader compilation times during initialization. The post details the WebGL rebuild using GPGPU ping-pong textures, EffectComposer, and custom GLSL passes, plus 3D pipeline decisions: recreating Cinema 4D lighting in Three.js, animating network paths via UV-based opacity masks, using a custom purple HDRI for scene cohesion, geometry optimization with Draco, baked camera animations, and a Fresnel-based interactive security shield with raycaster-driven mouse interaction. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### Why would a team switch from Three.js WebGPURenderer with TSL back to WebGLRenderer? Shader compilation time was the bottleneck: traversing TSL node graphs and compiling GPU pipelines for a multi-scene canvas could take close to twenty seconds on a reference machine before the first frame rendered. Since later Three.js versions that reportedly made shader compilation roughly three times faster via improved node-type caching weren't available yet, the team rebuilt the rendering layer with WebGLRenderer, onBeforeCompile GLSL injection, and EffectComposer to hit predictable startup times. _daily.dev surfaces real-world tradeoffs like this for teams weighing WebGPU adoption against shipping deadlines._ ### How do you fake animated glowing paths in Three.js without actually moving any geometry? The paths are static meshes; the motion illusion comes purely from a shader moving a narrow opacity mask along a continuous UV axis running the length of each line. Each path gets randomized offset, speed, and pulse interval so lines don't animate in sync, and visibility is limited by camera distance to progressively reveal the network as the scene plays out. _Developers prototyping shader-based motion effects can track techniques like this through daily.dev._ ### How can you create a Fresnel-based force field shield effect that reacts to mouse position in a shader? Combine a classic Fresnel term (surfaces facing the camera stay subtle, grazing angles brighten) with animated procedural noise and an additive hexagonal grid, then boost realism with a raycaster that writes mouse position into a texture the shader samples as a dynamic mask, locally lighting nearby hexagons and fading them over time so the shield appears to remember interactions. _daily.dev helps developers exploring interactive shader effects like Fresnel-based shields stay current on techniques._ ## Similar posts on daily.dev - [When Community Becomes UI: Building the Website for the First Three.js Conference](https://daily.dev/posts/when-community-becomes-ui-building-the-website-for-the-first-three-js-conference-7wnsbhrf1) · Codrops · 1 upvotes · 0 comments - [Creating an Interactive 3D Cluster with Three.js, TSL and Three Start](https://daily.dev/posts/creating-an-interactive-3d-cluster-with-three-js-tsl-and-three-start-y4sedpfai) · Codrops · 2 upvotes · 0 comments - [3D Web Development with Blender and Three.js](https://daily.dev/posts/3d-web-development-with-blender-and-three-js-i4xuekmxb) · freeCodeCamp · 3 upvotes · 0 comments - [THREE.js-PathTracing-Renderer](https://daily.dev/posts/three-js-pathtracing-renderer-f7kf7vkhm) · Hacker News · 2 upvotes · 0 comments - [Bypassing the DOM: How We Built a 60 FPS GPU Playground in React](https://daily.dev/posts/bypassing-the-dom-how-we-built-a-60-fps-gpu-playground-in-react-bjjoodryo) · Medium · 1 upvotes · 0 comments --- Tags: [#webdev](https://daily.dev/tags/webdev), [#3d](https://daily.dev/tags/3d), [#threejs](https://daily.dev/tags/threejs), [#webgpu](https://daily.dev/tags/webgpu) [View this post on daily.dev](https://daily.dev/posts/building-cerebrium-making-serverless-infrastructure-tangible-rubierv9a) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Building Cerebrium: Making Serverless Infrastructure Tangible","url":"https://daily.dev/posts/building-cerebrium-making-serverless-infrastructure-tangible-rubierv9a","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/building-cerebrium-making-serverless-infrastructure-tangible-rubierv9a"},"datePublished":"2026-07-23T14:11:05.489Z","dateModified":"2026-09-14T06:38:31.547Z","description":"A technical case study from agency KOKI-KIKO on building the Cerebrium website, covering the full 3D and WebGL pipeline. The team initially built the rendering...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/54cf7dc644482329d79aeef493966d9f?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/54cf7dc644482329d79aeef493966d9f?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Codrops","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Codrops","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/codrops","url":"https://daily.dev/sources/codrops"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/building-cerebrium-making-serverless-infrastructure-tangible-rubierv9a","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"webdev,3d,threejs,webgpu","timeRequired":"PT8M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Codrops","item":"https://daily.dev/sources/codrops"},{"@type":"ListItem","position":3,"name":"Building Cerebrium: Making Serverless Infrastructure Tangible"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/building-cerebrium-making-serverless-infrastructure-tangible-rubierv9a#faq","mainEntity":[{"@type":"Question","name":"Why would a team switch from Three.js WebGPURenderer with TSL back to WebGLRenderer?","acceptedAnswer":{"@type":"Answer","text":"Shader compilation time was the bottleneck: traversing TSL node graphs and compiling GPU pipelines for a multi-scene canvas could take close to twenty seconds on a reference machine before the first frame rendered. Since later Three.js versions that reportedly made shader compilation roughly three times faster via improved node-type caching weren't available yet, the team rebuilt the rendering layer with WebGLRenderer, onBeforeCompile GLSL injection, and EffectComposer to hit predictable startup times. daily.dev surfaces real-world tradeoffs like this for teams weighing WebGPU adoption against shipping deadlines."}},{"@type":"Question","name":"How do you fake animated glowing paths in Three.js without actually moving any geometry?","acceptedAnswer":{"@type":"Answer","text":"The paths are static meshes; the motion illusion comes purely from a shader moving a narrow opacity mask along a continuous UV axis running the length of each line. Each path gets randomized offset, speed, and pulse interval so lines don't animate in sync, and visibility is limited by camera distance to progressively reveal the network as the scene plays out. Developers prototyping shader-based motion effects can track techniques like this through daily.dev."}},{"@type":"Question","name":"How can you create a Fresnel-based force field shield effect that reacts to mouse position in a shader?","acceptedAnswer":{"@type":"Answer","text":"Combine a classic Fresnel term (surfaces facing the camera stay subtle, grazing angles brighten) with animated procedural noise and an additive hexagonal grid, then boost realism with a raycaster that writes mouse position into a texture the shader samples as a dynamic mask, locally lighting nearby hexagons and fading them over time so the shield appears to remember interactions. daily.dev helps developers exploring interactive shader effects like Fresnel-based shields stay current on techniques."}}]} ```