Score
How to Build a Three.js Fluid Reveal Effect with WebGPU
The Three.js fluid reveal effect tutorial demonstrates an innovative approach to creating immersive 3D experiences using WebGPU, which can enhance brand strategy by integrating cutting-edge technology into digital marketing campaigns. Brands can leverage such visually striking effects to engage audiences, convey complex narratives, and differentiate themselves in a competitive landscape.
Abduzeedo: How to Build a Three.js Fluid Reveal Effect with WebGPU jeff March 25, 2026 Cullen Webber's Three.js fluid reveal effect tutorial blends two 3D scenes using WebGPU, ping-pong simulations, and Fresnel materials into an X-ray look. Webber, a creative full-stack developer from Perth, Australia, published the tutorial on Codrops in March 2026. The demo places 12 human figure instances in a hexagonal grid. Moving the cursor activates a fluid simulation that exposes a skeleton layer beneath the solid figures. The result reads somewhere between a medical scan and a science fiction hologram, all running live in the browser.
How the Three.js Fluid Reveal Effect Pipeline Works The architecture has four stages. First, a 2D canvas tracks cursor movement and generates circular masks from mouse input. Those masks feed into a fluid simulation built on ping-pong render targets. This GPU technique alternates two textures as read and write buffers, preventing the conflicts that would otherwise corrupt the output. FBM (Fractional Brownian Motion) noise then displaces the fluid, creating organic turbulence in the transition zone between the two scenes. The dual-scene rendering layer runs on InstancedMesh objects. One mesh holds the solid body figures.
The other holds skeleton models compressed with DRACO geometry. The skeleton material uses a Fresnel shader written in TSL (Three.js Shading Language). Fresnel makes the skeleton edges glow bright while surfaces facing the camera stay dark, producing the characteristic X-ray holographic look that defines this Three.js fluid reveal effect. Post-processing completes the pipeline. Bloom extends the Fresnel glow. Scan lines and color grading reinforce the sci-fi aesthetic, while subtle grain adds depth.
The entire Three.js fluid reveal effect pipeline runs on WebGPU via TSL, replacing raw GLSL with a node-based shading syntax that compiles to both WebGPU and WebGL. Webber maintains a WebGL fallback branch on GitHub for browsers without native WebGPU support.
The full source code and written guide are available at Cullen Webber's Codrops tutorial page .
The article presents a unique technical approach that can significantly enhance brand engagement through innovative digital experiences, making it relevant and impactful for brand strategy professionals.