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.
Table of contents
Breaking Down the Render PipelineCreating the Mouse Trail CanvasTransforming the Mouse Trail into a FluidInstancing the Solid & X-Ray ScenesBuilding the Post-Processing PipelineUnderstanding the Render LoopThe Final ProductConclusionSort: