This version is the production tuning surface for the same idea. It uses the WebGPU / TSL path from `three-fluid-fx/tsl`, where the effect is built with RenderPipeline output nodes, TSL factories, and WGSL compute helpers.
Live demo
What this demo teaches
Think of it as a dynamic, interactive paint layer. Your 3D scene renders normally, and the fluid solver acts as an intelligent brush that weaves colorful, dissipating trails perfectly onto the glass of the screen. In this variant, the relevant fluid output is TextureNode fields: velocityNode, densityNode, and dyeNode when dye is enabled.
- Know which fluid channels overlays read.
- Choose between density-only trails and dye-aware color strokes.
- Tune intensity without hiding the underlying three.js scene.
Implementation path
- Render the scene first
The background is not part of the fluid solver. It is your normal three.js scene or background pass.
- Run the solver once per frame
The overlay should sample the latest fluid output. Do the simulation step before the composer or RenderPipeline output is evaluated.
- Choose the overlay family
Clean trails can use density only. Ink, smoke, and watercolor styles should enable dye so the stroke color has its own lifetime.
- Full scope
It keeps the core render path but adds controls, style choices, background handling, and parameters that matter when shipping the effect.
import { FluidSimulation, oilOverlay } from 'three-fluid-fx/tsl'
const fluid = new FluidSimulation(renderer)
fluid.enableDye = true
pipeline.outputNode = oilOverlay(
sceneNode,
fluid.densityNode,
fluid.dyeNode,
fluid.velocityNode,
{ intensity: 1.2, vibrance: 0.35 },
)Parameters to tune
| Parameter | What it controls | How to tune it |
|---|---|---|
intensity | Visual gain of the overlay color. | Raise until the trail reads clearly. Reduce it when the scene loses contrast. |
enableDye | Allocates and updates the colored dye field. | Enable it for ink, smoke, watercolor, and any style where stroke color matters. |
dyeDissipation | How long colored strokes remain visible. | Set higher than densityDissipation when color should linger after the mask softens. |
vibrance | Saturation boost inside many overlay styles. | Use lower values for UI pages and higher values for demo reels. |
Source landmarks
Start from examples/tsl/full/overlay/main.ts. These are the parts worth reading first:
- Scene/background setup before the fluid effect.
- Overlay style creation and style switching.
- Dye-related pointer options.
- The per-frame order: fluid.step(dt), then render/composite.
Production notes
- Do not make the overlay responsible for pointer input. Keep pointer splats attached to the solver.
- If the effect should be subtle, reduce intensity before weakening the solver.
- Use dye only when needed. Density-only overlays are cheaper and easier to art-direct.