GPU height field water simulations for Three.js flat planes
- Version:
- 1.0.2
- Source:
Examples
//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
scene.add(waterMesh);
//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
renderer.clear();
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;
gpuWater.flood(dV);