skeelogy / skunami.js

Three.js GPU height field water libraries
http://cg.skeelogy.com/skunamijs/
MIT License
65 stars 11 forks source link

Using skunami with mesh models #3

Open eokeeffe opened 8 years ago

eokeeffe commented 8 years ago

I'm trying to find out how to use your library with meshed models.

Any pointers as to what I would need to do to setup skunami with an openCTM model rendered with three.js ?

I'm trying to visualize the effect of rising flood waters with models generated from UAV aerial imagery.

Awesome library by the way!

skeelogy commented 8 years ago

Hi there eokeeffe,

Three.js supports OpenCTM models, so loading them into the scene shouldn't be a problem. Official example: http://threejs.org/examples/webgl_loader_ctm.html (see the source code)

To get it to work with skunami, call addStaticObstacle(mesh) where mesh is a THREE.Mesh that you can get from loading your OpenCTM model. The skunami water sim should then reflect off this obstacle automatically.

The codes will go something like this:

//create gpu skunami water
var gpuWater = new SKUNAMI.GpuPipeModelWater(...);  //or whichever water model that you would like to use

//load openctm model as a THREE.Mesh
var mesh;
var loader = new THREE.CTMLoader();
loader.load("yourmodel.ctm",  function(geometry) {
    var material = new THREE.MeshPhongMaterial(...);
    mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);
}

//add the loaded mesh as a static obstacle
gpuWater.addStaticObstacle(mesh);

//update every frame (place these lines in your update loop)
renderer.clear();
gpuWater.update(dt);  //have to do this after clear but before render
renderer.render(scene, camera);
eokeeffe commented 8 years ago

Just wanted say thanks again I got it working http://eokeeffe.github.io/FloodSimulation/example.html One thing I was wondering was how to make the mesh have the same type of collisions as the created skulpt

skeelogy commented 8 years ago

Hi eokeeffe,

Did you mean how to turn your mesh into a height field so that skunami.js water can interact with it? You can render your mesh from the top view and use the depth as a height field texture.

I have to dig out an example. Will get back to you on this soon!