GPU height field water simulations for Three.js flat planes
  • 1.0.2


//How to setup a water sim:

//create a plane as the water
var WATER_SIZE = 10;
var WATER_RES = 256;
waterGeom = new THREE.PlaneGeometry(WATER_SIZE, WATER_SIZE, WATER_RES - 1, WATER_RES - 1);
waterGeom.applyMatrix(new THREE.Matrix4().makeRotationX(-Math.PI / 2));
waterMesh = new THREE.Mesh(waterGeom, null);  //a custom material will automatically be assigned later

//create a GpuPipeModelWater instance (as an example)
var gpuWater = new SKUNAMI.GpuPipeModelWater({
    renderer: renderer,
    scene: scene,
    mesh: waterMesh,
    size: WATER_SIZE,
    res: WATER_RES,
    dampingFactor: 0.995,
    multisteps: 1

//update every frame
gpuWater.update(dt);  //have to do this after clear but before render
renderer.render(scene, camera);
//How to interact with the water:

//disturb (i.e. cause ripples on water surface)
var position = detectIntersection();  //do ray-intersection tests, for example, to determine where the user is clicking on the water plane
var waterDisturbAmount = 0.15;
var waterDisturbRadius = 0.25;
gpuWater.disturb(position, waterDisturbAmount, waterDisturbRadius);

//source (i.e. add water to simulation, only available for GpuPipeModelWater)
var waterSourceAmount = 0.2;
var waterSourceRadius = 0.7;
gpuWater.source(position, waterSourceAmount, waterSourceRadius);

//sink (i.e. remove water from simulation, only available for GpuPipeModelWater)
var waterSinkAmount = -0.5;
var waterSinkRadius = 0.7;
gpuWater.source(position, waterSinkAmount, waterSinkRadius);
//How to flood the scene over time:

var floodRate = 10;  //cubic scene units per unit time

//add some volume every frame
var dV = floodRate * dt;