In this project, I built an interactive “liquid” image distortion effect using a GPU-driven flowmap in Three.js. The key idea is to generate a flow/velocity texture in real time (using ping‑pong render targets), then apply that data as a postprocessing effect with [EffectComposer] instead of baking the distortion logic directly into the mesh material.
What’s included:
- Real-time GPU flowmap (direction + intensity) that reacts to pointer movement
- Clean rendering pipeline: the plane material renders the base image, and a custom [ShaderPass] applies the distortion.
- Resolution‑independent distortion (pixel offsets converted to UVs correctly)
- RGB split / chromatic aberration that scales with flow “speed” so it appears only when there’s motion (not when the mouse is standing still)
- GSAP-driven interaction for smooth, responsive transitions
