This version keeps the integration small so the moving parts are visible. It uses the WebGL / GLSL path from `three-fluid-fx`, where the effect is built with EffectComposer passes, ShaderMaterial uniforms, and WebGL render targets.
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 Texture objects: velocityTexture, densityTexture, and dyeTexture 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.
- Minimal scope
It avoids GUI state and preset switching. Read it first when you need the smallest reliable version of the technique.
import { FluidSimulation, OilOverlayPass } from 'three-fluid-fx'
const fluid = new FluidSimulation(renderer)
fluid.enableDye = true
const overlay = new OilOverlayPass(fluid)
overlay.intensity = 1.2
overlay.vibrance = 0.35
composer.addPass(renderScene)
composer.addPass(overlay)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/glsl/minimal/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.