HTML5 Water Ripples Demo

written by Jonas Wagner, on 10/23/10 4:44 PM.

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

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.

Comments

Nice!
As I mention in the blog post related to those experiments, it all comes from this page:
freespace.virgin.net/hugo.elias/graphics/x_water.htm
I was also amazed with the simplicity of the code :)

Comment by Mr.doob — 10/26/10 1:32 AM | # - re
This demo is very nice, congrats !

Comment by Jean-Philippe HALIMI — 10/27/10 3:26 PM | # - re
Very nice! Chrome 8-dev on Mac renders it beautifully (little surprise there); Opera 11 alpha has some really ugly artifacts that look like they might be the JS engine getting confused about the intersection of wave peaks and troughs. Opera 10.63-Mac (current stable) has the same artifacts. You might want to shoot off a WTF? email to the dev team; this looks like a canvas bug being exercised by the (working) JS.

Comment by Jeff Dickey — 10/27/10 3:31 PM | # - re
- Hi Jeff, I'll have a look. It could very well be my fault too, I'm usually not to careful when writing these demos. ;)
  
  Comment by Jonas Wagner — 10/28/10 9:31 AM | # - re
Great work. Your demos make a great browser performance benchmark.

Comment by Passy — 10/29/10 8:38 AM | # - re
That's crazy cool. Would make for some sick wallpaper or screensaver.

Comment by jeff — 5/21/11 8:01 AM | # - re
Amazing demo!!!

Comment by NeoTm — 2/11/12 2:41 PM | # - re

29a.ch