Flow Map generator for water effect in three.js

manthrax · August 5, 2024, 4:12pm

I adapted the sample and made a simple flowmap painter:

https://manthrax.github.io/flowmap-paint/

edit: did pretty much exactly what you described, @Chaser_Code

edit2:
The source for anyone interested… It could probably be done way more efficiently with a gradient + vector color, rather than rebuilding the brush each frame… but it seems to sorta work.

github.com

manthrax/flowmap-paint/blob/master/flowmed.js

import*as THREE from 'three';

import {GUI} from 'three/addons/libs/lil-gui.module.min.js';
import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
import {Water} from 'three/addons/objects/Water2.js';

let scene, camera, renderer, water;

let makeBrush = ()=>{
    let canvas = document.createElement('canvas');
    let w = canvas.width = 256;
    let w2 = (w / 2) | 0
    let h = canvas.height = 256;
    const ctx = canvas.getContext("2d", {
        willReadFrequently: true
    });

    let v0 = new THREE.Vector3();
    let v1 = new THREE.Vector3();
    ctx.writeVelocity = (x,y)=>{

This file has been truncated. show original

Topic		Replies	Views
How to use THREE.Water2? Questions getting-started	8	3883	May 11, 2020
Interactive Image Distortion with Flowmaps — Three.js + EffectComposer + GSAP Showcase	0	76	December 31, 2025
Flowmap mouse distortion Questions	2	432	October 22, 2024
Mouse Flowmap Distortion Showcase flowmap , mouse-flowmap-distortion , fluid-distortion , ping-pong-fbo	0	72	December 28, 2025
How to make 3D waterfall? Questions shaders , animation	5	5398	December 19, 2020

Flow Map generator for water effect in three.js

Related topics