Water Ripple

This page implements web simulations of water ripples and rain drops.

I came across this concept on a website that I can no longer remember, but I made a mental note to try and build it myself. The primary resource I used was written by Hugo Elias, but the page has since disappeared. Here is the link in case it ever comes back.

My exploration began in JavaScript where I tested out a variety of implementations, simulation options and got a feel for where performance became a problem. I expanded on the original JavaScript to try and implement a full screen 60fps simulation, using web workers. I learned a ton doing this!

It then became obvious that to get a nice smooth simulation was going to require WebGL. So I built a page to test out a variety of ways to do it, but each still required the ripple buffer to be generated on the CPU. The 4th page I created was the success! I used the GPU to generate the ripple buffer in an off-screen frame buffer and then used that as a texture to render the final image.

I also converted the code into a very simple interface that can be easily added to any page. Simply include the Ripple.js and RippleGLExt.js files and call "Ripple.init({ raining: true });" to get the effect used on this page.

The final cube ripple simulation is something I am using in my quasi WebGL tutorial stuff and is not finished yet. TODO: The primary thing that I have left to do is test the GPU limits by running a separate simulation on each face of the cube.