CG:Skeelogy
FEATURED
ARCHIVES
 
 
CURRENTLY VIEWING
SKUNAMI.JS
Open source Three.js GPU height field water libraries
DATE
TYPE
EFFORT
Aug 2013
Open Source
Individual
skunami.js
@ open source > webgl / three.js
SECTION MENU

This is a collection of JavaScript/GLSL height field water libraries for Three.js plane meshes.


Water Types

  • Pipe Model (“Fast Hydraulic Erosion Simulation and Visualization on GPU”, Xing Mei, Philippe Decaudin and Bao-Gang Hu, Pacific Graphics 2007)
  • X Water (“2D Water”, Hugo Elias)
  • Mueller GDC 2008 (“Fast Water Simulation for Games Using Height Fields”, Matthias Mueller-Fisher, Game Developers Conference 2008)
  • Mueller GDC 2008 Hello World (“Fast Water Simulation for Games Using Height Fields”, Matthias Mueller-Fisher, Game Developers Conference 2008)
  • Tessendorf iWave (“Interactive Water Surfaces”, Jerry Tessendorf, Game Programming Gems 4)

Back To Top Back To Top


Features

  • GPU-based height field water simulation for fast performances on high resolution meshes
  • Different types of user interaction with the water: source, sink, disturb
  • Water ripples reflect off terrain and static obstacles
  • Two-way coupling with dynamic rigid body objects i.e. water makes objects float while objects create ripples on water after displacing it
  • SKUNAMI.GpuPipeModelWater is able to accumulate behind terrains and static obstacles

Back To Top Back To Top


Examples

1) Two-Way Coupling With Dynamic Rigid Bodies

[Live Demo]

  • Dynamic objects (and terrain) cause ripples on water after displacing it
  • Water makes the dynamic objects float

 

2) Obstacles

[Live Demo]

  • Reflection of water ripples that bounce into terrain and static obstacles
  • Accumulation of water behind terrain and static obstacles

 

3) Water Types

[Live Demo]

  • Different water types and their behaviour upon user interaction
  • Flooding control to change water level

Back To Top Back To Top


Source Codes

Please consider tipping me for my open source efforts

The source codes for this project can be found in GitHub:

Back To Top Back To Top


Documentation

Please refer to the docs for the full API. There are some short usage examples as well.

Back To Top Back To Top


Browser Support

Tested only in Google Chrome (recommended) and Mozilla FireFox

Back To Top Back To Top


License

Released under The MIT License (MIT)
Copyright (c) 2013 Skeel Lee

Back To Top Back To Top


LIKED THIS POST? SUBSCRIBE NOW!
Subscribe to my mailing list for updates (and goodies!) from me

 
SUBSCRIBE NOW
Subscribe to my mailing list for updates (and goodies!)
ABOUT ME
Skeel Lee Skeel Lee
skeel@skeelogy.com
Facebook Google+ Twitter Tumblr
YouTube Vimeo Flickr Pinterest
FX TD / R&D
Worked on VFX at MPC, Lucasfilm / ILM and Double Negative
LinkedIn IMDb GitHub Stack Overflow
I am a Technical Director with strong interests in both tech and art. My life evolves round VFX, photography, software engineering, tools programming and generally anything that looks / sounds cool.
I have done a variety of CG programming, including fluid sims, muscles, soft/rigid bodies, raytracing etc. These knowledge complement the visual works that I do as a TD in VFX.
I was interviewed by The Straits Times in May 2014 for my VFX work in X-Men: Days of Future Past.