7 ms·
WebGL Water Simulator
- Exuma 12y agoFun 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.
- JoshTriplett 12y agoRather 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.
- iamcreasy 12y agoThis was really really fun! :D
- ldng 12y agoBut if you put the ball on half-way on the surface, it seems the water waves don't bounce on it. Or is it me ?
- LukeB_UK 12y agoIf you do it in the middle, you get some really nice patterns
- 0942v8653 12y agoOr automate the process: for i in $(seq 1 100); do cliclick c:.; done
- Rexxar 12y agoIf you click a lot, the level of water gets higher. Each click adds some water to the tank. edit: The white sphere don't use the real level of water to decide where it should float (when gravity is activated)
- lifeformed 12y agoOr paste this into the console: water.addDrop(x, y, radius, strength) 0,0 is the center, bounds are -1 to 1. 0.1 radius is a reasonable spike, 1 radius is a huge swell. 1 strength is really big. 10 is ridiculous. Try negative numbers too! Try: water.addDrop(0, 0, 0.1, 5)
- fatihpense 12y agoI got a very nice heart shape by dragging: http://i.imgur.com/0675p4W.png http://i.imgur.com/0675p4W.png
- josephpmay 12y agoThe author of this simulation seems to have forgotten the effects of refraction. Besides that, it's great!
- JoshTriplett 12y agoRefraction definitely works; try moving the camera around, and you can see the effects of refraction on the ball.
- josephpmay 12y agoIt appears to work on the top but not on the sides
- Mikeb85 12y agoThe sides seem to be a cut-away view, not a surface...
- JoshTriplett 12y agoRight. Refraction only occurs on the surface of the water, like the waves; the views through the sides are what you'd see from under the water at that point, not looking through a viewing window.
- DannyBee 12y agoWell, if you want to get really technical, what you'd see from underwater would be much worse than what a camera sees, since your eyes require air to properly focus. So if they wanted to make it what you would see underwater, they should just blur the crap out of it.
- frozenport 12y agoAre you talking about total internal reflection? http://upload.wikimedia.org/wikipedia/commons/5/5c/Total_internal_reflection_of_Chelonia_mydas.jpg http://upload.wikimedia.org/wikipedia/commons/5/5c/Total_int... I think I can find an angle where you can't see the skybox.
- snooze82 12y agoyou can even move the ball.
- dsego 12y agoPrevious discussions: https://news.ycombinator.com/item?id=7264103 https://news.ycombinator.com/item?id=7264103 https://news.ycombinator.com/item?id=2884141 https://news.ycombinator.com/item?id=2884141
- guidedlight 12y agoSurprisingly, this demo works great on my iPad 4.
- bobajeff 12y agoYeah, I just tested it on my mid-range android phone with Chrome. It works surprisingly well, though it lags a bit it's still usable. Really all webgl stuff should work on mobile since it was designed with that in mind. Ironically it probably wouldn't work on my old desktop with the Directx9 capable nvidia card.
- Animats 12y agoThat'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.
- frozenport 12y agoOn Android Firefox: Error: Rendering to floating-point textures is required but not supported.
- serf 12y agosame on Firefox Developer Edition 36.0a2 (2015-01-10).
- jsheard 12y agoAndroid Firefox and Chrome both implement the floating-point textures extension, but your devices GPU also has to natively support it. If you're interested, you can check what your device supports with a tool like this: https://play.google.com/store/apps/details?id=com.darkrockstudios.apps.openglextensions https://play.google.com/store/apps/details?id=com.darkrockst... Not all of the GLES extensions will be exposed to WebGL, but most WebGL extensions directly map to a GLES one (GL_OES_texture_float in this case).
- WallWextra 12y agoOn a Galaxy S5, it works glitchily in Chrome and not at all in Firefox.
- jsheard 12y agoMaybe Mozilla blacklisted the extension: Qualcomm drivers are apparently quite awful. https://dolphin-emu.org/blog/2013/09/26/dolphin-emulator-and-opengl-drivers-hall-fameshame/ https://dolphin-emu.org/blog/2013/09/26/dolphin-emulator-and...
- deleted 12y ago[deleted]
- elberto34 12y agodoes this use the navier stokes equations? How are the ripples generated?
- constexpr 12y agoNope, it's much simpler than that. It's just a grid of vertical positions and each frame every cell moves toward the average position of the neighbors from the previous frame. See http://freespace.virgin.net/hugo.elias/graphics/x_water.htm http://freespace.virgin.net/hugo.elias/graphics/x_water.htm for details.
- imaginenore 12y agoThis is 4 years old.
- shurcooL 12y ago> 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.
- slacka 12y agoYes it does. I'm SOL. On my SGS3 with both Chrome and FF I get: Error: Rendering to floating-point textures is required but not supported. And on my Ubuntu 14.10 laptop with X1400 I get: Uncaught Error: link error: error: Too many vertex shader texture samplers
- jrockway 12y agoThis 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.
- chengsun 12y agoUnfortunately 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 water clinging to the sphere or dripping off it. A particle-based system could simulate the effects you describe (by keeping track of the positions of some large number of water "molecules" and exchanging forces between each pair of particles), however the simulation would be far too costly to run in real-time on typical hardware today. It also has its downsides. With a height-map based representation it is trivial to calculate the normal to the surface of the water, which is necessary for the lighting effects, but with a particle system you would need to reconstruct the surface of the water in an additional step each frame, using something like the marching cubes algorithm.
- rndn 12y agoDoes 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?
- sibsibsib 12y agothe fresnel effect. http://filmicgames.com/archives/557 http://filmicgames.com/archives/557
- boomskats 12y agoI'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 :)
- Kenji 12y agoThis 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.
- jpmonette 12y agoCan'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 :)!
- jsheard 12y agoDoing 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 https://www.youtube.com/watch?v=1o0Nuq71gI4
- foobarian 12y agoThat 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.
- Exuma 12y agoI love videos like this, do you know of any more good ones? I could watch this stuff all day.
- deleted 12y ago[deleted]
- jsheard 12y agoTechnical demos, or fluid dynamics eyecandy? Check out what the heavy duty non-realtime systems can do if you want the later. https://www.youtube.com/watch?v=WD_K0Koi1MU https://www.youtube.com/watch?v=WD_K0Koi1MU
- pimlottc 12y agoGreat stuff, but man, what a reality check. The most cutting-edge physics and graphics effects and it's used to sell beer and candy bars.
- carlob 12y agoActually, I was once talking to a friend that does photography for print ads: I was surprised to find out that most of the highly detailed stills of, say, lipstick or champagne coming out of a bottle are actual photographs.
- ricardobeat 12y agoWow, this runs at a smooth 60fps in iOS8!
- sand500 12y agoif you drag the ball round and round, it doesnt create a votex.
- tdicola 12y agoThat'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?
- morganvachon 12y agoI still have to enable it in chrome://flags as of the last official GNU/Linux release. It is enabled by default in Windows releases in my experience.
- iwince 12y agoI've been playing with WebGL demos on Ubuntu for years, first Chrome then Firefox. It isn't new. You might also be impressed to find out that Steam is on Linux now too.
- cracker_jacks 12y agoShouldn't the ball cause ripples when moving underwater?
- snowwrestler 12y agoIt looks like it's only simulating the surface. Moving a ball that of that relative size in that volume of water would cause all sorts of surface features, if the full volume of water was being simulated.
- FrankenPC 12y agoSanity 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?
- Kiro 12y agoIt has been posted several times before.
- S_A_P 12y agoI 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.
- vhost- 12y agoSame here! I remember trying it on an older iPhone and android phone and it was choppy. Just tried it on my iPhone 6 and it's so smooth. I love seeing that progression in technology first hand.
- cturhan 12y agoI think this was the fourth duplicate post here
- izo 12y agoWow. It's amazing to see how far WebGL has come.
- ummonkwatz 12y agoSo close to a WebGL Wave Race!