three-fluid-fx Cursor-driven fluid effects for three.js

Start

Tutorials

Hand-authored guides for building fluid overlays, screen distortion, and particle effects with three-fluid-fx.

three-fluid-fx tutorials

Build the effect, not the fluid solver.

These guides explain what the library gives you, which effect family to use, and how to tune the important parameters for a finished visual result.

Start Getting Started

A compact integration path for the solver, pointer splats, outputs, resize handling, and the parameters you actually tune.

 Visual effects Effects Guide

A practical catalog of overlays and distortions: what each family reads, when to use it, and which parameters make it look good.

 Particles Particles Guide

How to use the fluid field with procedural particles and GPGPU particles, why camera data is passed, and how to tune the motion without ambiguity.

 Pipeline choice GLSL vs TSL

The same fluid concepts in two render pipelines: WebGL EffectComposer passes and WebGPU RenderPipeline nodes.

Demo walkthroughs

Personal tutorials for every demo.

Each walkthrough is tied to a runnable example and explains the render path, the fluid output it consumes, and the controls that actually change the result.

Minimal TSL Examples

TSL · Example 00 Hello World

The same minimal surface on the WGSL compute-backed solver.

 TSL · Minimal · Overlay Overlay

Scene pass plus fluid tint through a TSL output node.

 TSL · Minimal · Distortion Distortion

RenderPipeline output node refracts the scene pass.

 TSL · Minimal · GPGPU Particles 2D GPGPU Particles 2D

WGSL compute swarm with a TSL 3D liquid droplet renderer.

 TSL · Minimal · GPGPU Particles 3D GPGPU Particles 3D

Fibonacci cloud driven by the WGSL fluid velocity texture.

 TSL · Minimal · Simple Particles Simple Particles

Procedural trefoil rendered as instanced billboards.

Minimal WebGL Examples

Example 00 Hello World

~40 lines. No GUI, no scene: just the solver, resize, splats and density output.

 Minimal · Overlay Overlay

Density composited as a colored trail.

 Minimal · Distortion Distortion

Velocity field refracts an existing render.

 Minimal · GPGPU Particles 2D GPGPU Particles 2D

GPGPU liquid droplets driven by velocity-field advection.

 Minimal · GPGPU Particles 3D GPGPU Particles 3D

Fibonacci-sphere cloud reacting to fluid flow.

 Minimal · Simple Particles Simple Particles

Vertex-shader formula; flow nudges positions at render time.

Full TSL Examples

TSL · Example 01 Overlay

15 overlay styles through RenderPipeline and TSL nodes.

 Example 02 · TSL + WGSL Distortion

All distortion styles on the WGSL solver with the same tuning surface.

 TSL · Example 03 GPGPU Particles 2D

Full particle physics controls and background switcher on WebGPU.

 TSL · Example 04 GPGPU Particles 3D

3D lift, side variation, physics tuning and backgrounds.

 TSL · Full · Simple Particles Simple Particles

Shape, displacement, backgrounds and fluid tuning on the WebGPU path.

 TSL · Full · Combined Combined Demo

One WebGPU scene for testing overlay, distortion and particle composition together.

 TSL · Full · Mega Mega Demo

Hero-style morphing particle sculpture with art ink overlay, fluid distortion, and full tuning controls.

Full WebGL Examples

Example 01 Overlay

15 overlay styles, preset switching, background switcher and full solver controls.

 Example 02 Distortion

Simple, RGB shift, chromatic, water and caustic distortion with live controls.

 Example 03 GPGPU Particles 2D

Spring physics, damping, drag, flow response and render controls.

 Example 04 GPGPU Particles 3D

Depth lift, side variation, rotation and full physics tuning.

 Full · Simple Particles Simple Particles

Shape, displacement, motion and fluid response exposed for tuning.