WebGL Water Simulator
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 the simulation for a massive tsunami.
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:
Sanity check: Wasn't this posted on HN before?
Regardless. It's awesome that a browser with WebGL can achieve that kind of speed and behavioral complexity. Is ray tracing the reflections part of OpenGL? Or is that a separate library?
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.
That's beautiful. I used to write physics engines back when we had 100 MIPS, and could only dream about doing stuff like that in real time.
A nice use for this would be to emulate a ripple tank, as used in high school physics labs.
I've been using this to test whether I've got WebGL acceleration working properly for ages. I'm pretty sure I've seen this posted a couple of times before though :)
Wow, this runs at a smooth 60fps in iOS8!
This is 4 years old.
That's awesome, and holy cow I think this is the first time I've ever seen Chrome on Linux actually render WebGL. Did they finally enable it by default in recent updates?
Can't wait to see some more crazy stuff done in WebGL! Working fine on my MBA 2014, but I think it's the first time I heard the fan spinning :)!
undefined
On Android Firefox:
Error: Rendering to floating-point textures is required but not supported.I remember trying to run this on my phone previously and it not working. I also remember it causing my cup fan to fire up when I played with it on my laptop. The fact that the iPhone 6 runs this so well is pretty dang cool.
Does anyone happen to know what the effect is called that the sky is reflected stronger at shallow angles and whether that is the same effect which makes rough surfaces reflective at very shallow angles?
> This demo requires a decent graphics card and up-to-date drivers. If you can't run the demo, you can still see it on YouTube.
Works great on my iPad mini 2. Pretty incredible.
Shouldn't the ball cause ripples when moving underwater?
Surprisingly, this demo works great on my iPad 4.
I think this was the fourth duplicate post here
This is an old piece but it doesn't cease to amaze me. Well done, creating this must have taken a lot of time and skill.
The author of this simulation seems to have forgotten the effects of refraction. Besides that, it's great!
does this use the navier stokes equations? How are the ripples generated?
Wow. It's amazing to see how far WebGL has come.
So close to a WebGL Wave Race!
you can even move the ball.
if you drag the ball round and round, it doesnt create a votex.