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
Combined is not a beginner integration. It is a composition harness: one fluid simulation, several consumers, and a RenderPipeline that decides how the final frame is assembled. In this variant, the relevant fluid output is TextureNode fields: velocityNode, densityNode, and dyeNode when dye is enabled.
- See how overlay, distortion, and particles share the same solver.
- Understand why one fluid step can feed multiple visual outputs.
- Use the demo as a regression surface for TSL composition changes.
Implementation path
- Step the shared solver once
Every effect reads from the same latest fluid output. Do not create separate fluid simulations for each layer.
- Compose nodes in one pipeline
The TSL output graph can combine scene color, overlay tint, distortion, and particle rendering without leaving the WebGPU path.
- Use controls as diagnostics
The full controls expose interactions between styles. They are useful for checking whether a change breaks one family while another still works.
- Full scope
It keeps the core render path but adds controls, style choices, background handling, and parameters that matter when shipping the effect.
const fluid = new FluidSimulation(renderer, { profile: 'balanced' })
fluid.enableDye = true
pipeline.outputNode = composeCombinedScene({
sceneNode,
fluid,
overlayControls,
distortionControls,
particleControls,
})
renderer.setAnimationLoop(() => {
fluid.step(dt)
pipeline.render()
})Parameters to tune
| Parameter | What it controls | How to tune it |
|---|---|---|
effect mix controls | Balance overlay, distortion, and particle visibility. | Adjust one layer at a time. If everything is bright, lower overlay before weakening the solver. |
profile | Baseline simulation resolution and cost. | Use balanced for normal development and quality only when capturing or stress testing. |
time | Shared clock for animated palettes, caustics, and procedural movement. | Use one frame clock so layers remain in sync. |
background controls | Visual contrast surface for checking blend modes and readability. | Test against both dark and bright backgrounds before shipping a preset. |
Source landmarks
Start from examples/tsl/full/combined/main.ts. These are the parts worth reading first:
- RenderPipeline output construction.
- Shared solver step and shared fluid nodes.
- Layer ordering and intensity controls.
- Background and diagnostic controls.
Production notes
- Use this page to test composition, not to teach the smallest integration.
- Keep each effect layer independently tunable.
- When debugging, disable layers until only the broken path remains.