Learn how to use Three.js to blend two scenes with a fluid simulation, creating a smooth, dynamic reveal effect.

Codrops stands at the forefront of innovation in web design, serving as a boundless source of inspiration and knowledge for designers and developers alike. Through a captivating array of tutorials, demos, and showcases, Codrops invites creatives to embark on a journey of exploration, pushing the boundaries of what's possible in web development. From  CSS techniques and JavaScript animations to immersive user interfaces and experiential storytelling, Codrops empowers designers and developers to unleash their creativity and craft unparalleled digital experiences that captivate and engage audiences.

Codrops

A detailed walkthrough of building a dual-scene fluid X-ray reveal effect using Three.js with TSL (Three.js Shading Language) and WebGPU. The pipeline consists of five stages: a canvas-drawn mouse trail, a ping-pong fluid simulation using FBM noise, two instanced scenes (solid body and skeleton) rendered to separate textures, and a final post-processing pass that composites them using the fluid mask. Key techniques covered include ping-pong render targets, Fresnel materials, InstancedMesh for performance, bloom, scan lines, film grain, and color grading — all wired together in a modular render loop.

Building a Dual-Scene Fluid X-Ray Reveal Effect in Three.js

Transforming the Mouse Trail into a Fluid