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
- Trump says he's granting Iran's request to extend pause on energy site strikes
- Press review: Kiev’s terrorist acts risk derailing talks as NATO expands Arctic footprint
- Viral interview captures what traveler really thought about ICE agents helping TSA at airports
- Former £25m Man United star faces huge ban for using his PHONE during a game under little-known rule
- Nite Event Discovery App Design Puts Nightlife First
- John Toshack's family in row over his diagnosis: Liverpool and Wales legend and wife say he HASN'T got dementia – but his son is adamant he is fighting 'terrible disease'