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.
