I managed to write with a bit of help from AI the flowmap using FBO technique, I tried this before and failed badly:slight_smile:
How it works:
In this project I build a smooth, real-time mouse flowmap distortion effect using Three.js and a GPU feedback technique. The core idea is to generate a flowmap texture on the GPU (a ping‑pong / double-buffer render target) that stores a 2D motion vector field and a strength mask. Every frame the flowmap is dissipated (faded) and updated by “stamping” the mouse movement into the texture, creating a fluid trail. That flowmap is then sampled in the main fragment shader to warp/distort an image based on the stored flow direction and strength.
To keep the motion buttery smooth, the input is sampled with Pointer Events and (when available) coalesced pointer events, so fast movement doesn’t skip points. The update step also adds sub-stamps along long mouse segments to avoid gaps, and uses normalized dissipation so the trail fades consistently even when multiple GPU passes happen in a single frame.
You can tune everything live with a GUI: dissipation (trail persistence), radius (brush size), force (distortion strength), falloff (soft vs sharp edges), and the precision controls like stamp spacing and maximum stamps per frame. The result is a clean, modern fluid distortion / liquid warp effect you can use for hero sections, image sliders, interactive portfolios, and WebGL experiments.
If you’re interested in GPU feedback loops, ping‑pong FBOs, flowmaps, or Codrops-style distortion effects, this is a great reference implementation in Three.js.
