80s Business Tech and Seamless Scene Transitions: Inside Shader.se’s Scroll-Driven WebGPU Pipeline

A deep dive into the WebGPU rendering pipeline behind Shader.se, a creative studio website with an 80s corporate satire theme. The post covers selective scene rendering (skipping GPU work for off-screen pages), a scroll-driven architecture using Lenis, and two scene transition techniques: screen-space texture sampling and frustum-matched plane positioning. Key implementation details include using React's useImperativeHandle to give a parent component explicit control over render order and texture passing between scenes, replacing the typical useFrame approach. TSL (Three.js Shading Language) enables materials that compile to both WebGL and WebGPU, and @pmndrs/uikit keeps UI inside the WebGPU pipeline for post-processing.