Published on March 27, 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.
The architecture of the Three.js fluid reveal effect consists of four stages. First, a 2D canvas tracks cursor movement and generates circular masks based on mouse input. These masks feed into a fluid simulation built on ping-pong render targets. This GPU technique alternates two textures as read and write buffers, effectively preventing conflicts that could corrupt the output. Fractional Brownian Motion (FBM) noise is then introduced to displace the fluid, creating an organic turbulence in the transition zone between the two scenes.
The dual-scene rendering layer operates using InstancedMesh objects. One mesh holds the solid body figures, while the other contains skeleton models compressed with DRACO geometry. The skeleton material employs a Fresnel shader, developed in the Three.js Shading Language (TSL). This Fresnel effect makes the edges of the skeleton glow brightly, while the surfaces facing the camera remain dark, achieving the distinctive X-ray holographic appearance that characterizes this Three.js fluid reveal effect.
Post-processing is the final stage of the pipeline, where bloom effects extend the Fresnel glow. To reinforce the sci-fi aesthetic, scan lines and color grading are utilized, and subtle grain is added for depth. The entire Three.js fluid reveal effect pipeline operates on WebGPU using TSL, providing a modern alternative to raw GLSL with a node-based shading syntax that compiles for both WebGPU and WebGL. Webber has maintained a WebGL fallback branch on GitHub to support browsers that do not have native WebGPU capabilities.
The full source code and written guide for the tutorial can be found on Cullen Webber’s Codrops tutorial page, where developers can explore the intricacies of this impressive fluid reveal technique.
Related News
- Oregonians donate $5.2 million to Cultural Trust in 2024
- The Situation at Airports Is an Even Bigger Mess Than You Think
- Judicial reform sees Swedish prisons preparing to house young teens
- PM Modi tops global popularity charts at 68%- Where do Trump, Meloni, Macron rank in the survey? Full list
- NLC Absent as FG, TUC Agree on Wage Increase to Cushion Effects of Subsidy Removal
- Bill Maher is getting the Mark Twain Prize after all