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
The magic happens in two parts: first, a massive GPGPU swarm uses the fluid vector field for physical acceleration (springs, drag, and momentum). Second, the particles are rendered as thick, volumetric liquid droplets with procedural Phong shading, specular highlights, and color dispersion. In this variant, the relevant fluid output is TextureNode fields: velocityNode, densityNode, and dyeNode when dye is enabled.
- Understand the position and velocity texture ping-pong loop.
- Know why particles receive the fluid texture rather than the whole simulation object.
- Tune spring, damping, drag, and flow response for stable motion.
Implementation path
- Initialize particle state textures
Each particle has a home position, current position, and current velocity. The update pass reads old state and writes new state.
- Feed the fluid velocity texture
The particle component should accept a Texture or node input so it stays reusable with other vector fields.
- Render billboards from the latest state
The render pass reads the current position texture and draws points or instanced quads.
- Full scope
It keeps the core render path but adds controls, style choices, background handling, and parameters that matter when shipping the effect.
fluid.step(dt)
particles.step({
dt,
velocityField: fluid.velocityNode,
viewMatrix: camera.matrixWorldInverse,
projectionMatrix: camera.projectionMatrix,
cameraRight,
cameraUp,
spring,
zeta,
flowStrength,
maxFlowSpeed,
})Parameters to tune
| Parameter | What it controls | How to tune it |
|---|---|---|
spring | Pull back toward the particle home position. | Raise it for a tighter sheet. Lower it for looser ink-like drift. |
zeta | Damping ratio for the spring response. | Near 1 is controlled. Lower values overshoot, higher values feel heavy. |
flowStrength | How much fluid velocity becomes particle acceleration. | Raise for strong cursor influence. Lower when particles should mostly keep their form. |
dragLin + dragQuad | Velocity damping in the particle simulation. | Use linear drag for general settling and quadratic drag to catch fast spikes. |
Source landmarks
Start from examples/tsl/full/particles-2d/main.ts. These are the parts worth reading first:
- Particle state texture creation.
- The step call that receives fluid velocity.
- Spring and damping controls.
- Point or billboard render material.
Production notes
- Art Direction: To make the liquid droplets look expensive, pair them with NormalBlending, a deep contrasting background, and increase the vibrance parameter to make the specular highlights pop.
- Keep the particle component decoupled from FluidSimulation.
- Use aMax and maxFlowSpeed clamps before increasing flowStrength.
- A flat sheet is the best starting point for typography, grids, and image particles.