29a.ch by Jonas Wagner

HTML5 Water Ripples Demo

By , 

Finally after a long time I can present you a new demo. It is inspired by the wave propagation formula mr.doob demoed a while ago. I was quite amazed by how simple it was and so I decided to build myself a little pond.

Demo

screenshot

Click the screenshot to start the demo. Move your mouse over the pool to disturb the water.

How it works

I think the really interesting part here is the wave propagation formula:

waveHeight = (buffer0[i-1] + buffer0[i+1] + buffer0[i+width] + buffer0[i-width])/2-buffer1[i];
buffer1[i] = waveHeight;
aux = buffer0;
buffer0 = buffer1;
buffer1 = aux;
Given are two height maps (buffer0 and buffer1). The buffers get rotated every frame so buffer0 points to heights of the wave in the last frame and buffer1 to the one before it. The height of the wave in the current frame at a certain point is calculated by simply averaging the height of the neighboring points in buffer0 and subtracting the height in buffer1. You can think of it like this, every point wants to be at the same height it's neighbors are and it wants to go towards zero. That is basically all there is to the wave propagation (I also added some simple filtering to make it a bit smoother).

The rest is pretty simple, and made up on the spot. The refraction is done by offsetting the texture coordinates by the height difference between the current point and it's neighbors. The lightning and caustics are faked similarly based on the height differences and the height of the current point.

In short it's all fake.

Performance

Chrome is fast, firefox is slow, at least thats the way it usually is. To my pleasant surprise the jaeger monkey builds of firefox seem to finally catch up. Another interesting thing is that safari seems to be the fastest (for this demo).

Credits

The photo was shot by Travholt licensed CC-BY-SA. As mentioned in the intro, I got the wave propagation function from mr.doob.

Other Experiments

Be sure to check out my other experiments. If you like what you saw you should subscribe to my blog or follow me on twitter.