Live data from Hacker News

WebGL Water Simulator

madebyevan.com

31–40 of 76 posts

Re: WebGL Water Simulator

#31

This is extremely well done. The only minor nit I can come up with is the lack of surface tension. When you pull the ball up through the surface of the water, some of the water should stick to the ball. Maybe the ball is made out of lotus leaves, though. I'd also expect some more bubbles when violently stirring the pool with the ball.

Unfortunately the effects that you describe are nontrivial. The method of water simulation that is used here doesn't lend itself to simulating the effects of things like water tension or breaking waves. This is because the water surface is represented as a 2D height-map, representing the displacement from equilibrium (i.e. the z coordinate as a function of x and y). It's clear that it is not possible to represent wat…

So the surface of the water is a real time displacement map?

Re: WebGL Water Simulator

#33
post #3

Fun trick: Pause the simulation with the space bar. Then, take your mouse and drag it on the surface of the water, you will notice it creates ripples but in the paused state. Drag the mouse rapidly back and forth in a very tiny area so that it creates a layered 'ripple' that grows and grows. If you spend about 2 minutes doing this you can make the ripple go like 10 feet high completely off the screen. Then unpause th…

Rather than dragging, just click in the same spot hundreds of times to make a huge tower of water, then unpause to see a single ring of concentric waves and perfect wave reflection/interaction effects.

If you do it in the middle, you get some really nice patterns

Re: WebGL Water Simulator

#36
post #34

Doing this in a browser is a neat trick, but the actual state-of-the-art in realtime GPU fluids is slightly more impressive. nVidias FleX middleware is a good example: https://www.youtube.com/watch?v=1o0Nuq71gI4

That video is breathtaking. I goofed off with N-body systems like probably most people and the size and performance of the systems shown there are light years ahead in comparison.

Re: WebGL Water Simulator

#38
post #3

Fun trick: Pause the simulation with the space bar. Then, take your mouse and drag it on the surface of the water, you will notice it creates ripples but in the paused state. Drag the mouse rapidly back and forth in a very tiny area so that it creates a layered 'ripple' that grows and grows. If you spend about 2 minutes doing this you can make the ripple go like 10 feet high completely off the screen. Then unpause th…

Rather than dragging, just click in the same spot hundreds of times to make a huge tower of water, then unpause to see a single ring of concentric waves and perfect wave reflection/interaction effects.

Or automate the process:

    for i in $(seq 1 100); do cliclick c:.; done

Re: WebGL Water Simulator

#39
post #3

Fun trick: Pause the simulation with the space bar. Then, take your mouse and drag it on the surface of the water, you will notice it creates ripples but in the paused state. Drag the mouse rapidly back and forth in a very tiny area so that it creates a layered 'ripple' that grows and grows. If you spend about 2 minutes doing this you can make the ripple go like 10 feet high completely off the screen. Then unpause th…

I got a very nice heart shape by dragging: http://i.imgur.com/0675p4W.png

Re: WebGL Water Simulator

#40
post #34

Doing this in a browser is a neat trick, but the actual state-of-the-art in realtime GPU fluids is slightly more impressive. nVidias FleX middleware is a good example: https://www.youtube.com/watch?v=1o0Nuq71gI4

I love videos like this, do you know of any more good ones? I could watch this stuff all day.
Post reply on HN