5 ms·

WebGL Fluid Simulation

143 points by ent101 4y ago

dang 4y ago
Related: A fun website that simulates fluid - https://news.ycombinator.com/item?id=25031304 https://news.ycombinator.com/item?id=25031304 - Nov 2020 (47 comments) WebGL Fluid Simulation - https://news.ycombinator.com/item?id=23955527 https://news.ycombinator.com/item?id=23955527 - July 2020 (50 comments) WebGL Fluid Simulation - https://news.ycombinator.com/item?id=19963640 https://news.ycombinator.com/item?id=19963640 - May 2019 (102 comments) Broadening the scope a bit: Show HN: WASM and WebGL Fluid Simulation - https://news.ycombinator.com/item?id=27996703 https://news.ycombinator.com/item?id=27996703 - July 2021 (30 comments) Show HN: Box2D fluid simulation in WebGL and WASM - https://news.ycombinator.com/item?id=26674352 https://news.ycombinator.com/item?id=26674352 - April 2021 (23 comments) WebGL Fluid Experiment (2014) - https://news.ycombinator.com/item?id=24059825 https://news.ycombinator.com/item?id=24059825 - Aug 2020 (54 comments) Fluid Simulation (with WebGL demo) - https://news.ycombinator.com/item?id=12372569 https://news.ycombinator.com/item?id=12372569 - Aug 2016 (27 comments) HTML5 Fluid Simulation in WebGL - https://news.ycombinator.com/item?id=8502477 https://news.ycombinator.com/item?id=8502477 - Oct 2014 (49 comments) Show HN: WebGL Fluid and Particles in Haxe - https://news.ycombinator.com/item?id=8325700 https://news.ycombinator.com/item?id=8325700 - Sept 2014 (6 comments)
sam1r 4y ago
>> related: But it’s a different experience each and every time.
taylorius 4y ago
It looks really nice! I spent a few minutes trying to simulate the old nuclear test footage, trying to get a mushroom cloud rising! :-)
codetiger 4y ago
Enjoyed the simulation for sometime. Changing the parameters didn't change the experience much, but felt some difference they way it moves.
ranguna 4y ago
Pretty, but I can't use more than one finger. Not sure if it's just me, I'm on Firefox Android.
- afuckaduck 4y ago
  Same here. Multitouch works in Chrome for Android though.
314 4y ago
Nice effect, but it looks more like smoke than a fluid. A constant pressure source instant of an instant splat would probably give more of a fluid effect.
- rkangel 4y ago
  Smoke is a fluid. I agree that it is behaving like a very non-viscous fluid, so more like a gas than a liquid.
- djmips 4y ago
  Here's something more like water. https://matthias-research.github.io/pages/tenMinutePhysics/18-flip.html https://matthias-research.github.io/pages/tenMinutePhysics/1... From: https://matthias-research.github.io/pages/tenMinutePhysics/index.html https://matthias-research.github.io/pages/tenMinutePhysics/i...
  - 314 4y ago
    Interesting site, thanks for the link.
- pushedx 4y ago
  The air that you’re breathing right now is also a fluid. It’s not a liquid, but it’s a fluid.
rollulus 4y ago
As dang mentioned, this has been around for a while. Yet every time I'm impressed how my phone, laptop, etc. can render this so smoothly. I guess I'm getting old.
- jimmySixDOF 4y ago
  I just tried it in an Meta (Oculus) Quest 2 in their browser and it looks amazing I would love to see a version of this in a WebXR 360 skybox.
- moffkalast 4y ago
  Looking at the shader code there are 4 to 6 texture samplers in each and something like a dozen passes which is a bit on the heavy side, but ultimately it's all stuff that every GPU has been designed to do best, so not exactly surprising that it runs well. Now rendering something similar in 3D and real time, now that would be seriously impressive since you wouldn't be able to sample neighbouring pixels on the third axis efficiently I think.
  - XzAeRosho 4y ago
    I remember when Flash was phased out and these kind of tech demos from Google started to show up to demonstrate native rendering on the browser, and while still being impressed at the time, the render quality was abysmal, even in good PCs, which kept me wondering at the time, when will be the time when the render quality would be great without investing in a beefy PC. I guess the time has come and I didn't even notice!
    - pifm_guy 4y ago
      Even with a beefy PC, the chrome 'youre offline' Easter egg dinosaur game still drops frames. It's code is pretty much the simplest web game you can make. The bug is not in the game. Rendering should tax no machine. And yet it drops frames. To me, that says something about the readiness of the web platform.
      - 4y ago
yreg 4y ago
This is pleasant to play with on a touch device.
AtomicOrbital 4y ago
nice article on how this is done https://developer.nvidia.com/gpugems/gpugems/part-vi-beyond-triangles/chapter-38-fast-fluid-dynamics-simulation-gpu https://developer.nvidia.com/gpugems/gpugems/part-vi-beyond-...
wantsanagent 4y ago
It would be fun to turn this into a simple game where you're a wizard and you have to block incoming blasts with the right color.
tppiotrowski 4y ago
I wonder how the IOS app works. Is it using WebGL in a webview or the shader code on iOS and WebGL are both using OpenGL 3+?

143 points by ent101 4y ago

dang 4y ago

Related: A fun website that simulates fluid - https://news.ycombinator.com/item?id=25031304 https://news.ycombinator.com/item?id=25031304 - Nov 2020 (47 comments) WebGL Fluid Simulation - https://news.ycombinator.com/item?id=23955527 https://news.ycombinator.com/item?id=23955527 - July 2020 (50 comments) WebGL Fluid Simulation - https://news.ycombinator.com/item?id=19963640 https://news.ycombinator.com/item?id=19963640 - May 2019 (102 comments) Broadening the scope a bit: Show HN: WASM and WebGL Fluid Simulation - https://news.ycombinator.com/item?id=27996703 https://news.ycombinator.com/item?id=27996703 - July 2021 (30 comments) Show HN: Box2D fluid simulation in WebGL and WASM - https://news.ycombinator.com/item?id=26674352 https://news.ycombinator.com/item?id=26674352 - April 2021 (23 comments) WebGL Fluid Experiment (2014) - https://news.ycombinator.com/item?id=24059825 https://news.ycombinator.com/item?id=24059825 - Aug 2020 (54 comments) Fluid Simulation (with WebGL demo) - https://news.ycombinator.com/item?id=12372569 https://news.ycombinator.com/item?id=12372569 - Aug 2016 (27 comments) HTML5 Fluid Simulation in WebGL - https://news.ycombinator.com/item?id=8502477 https://news.ycombinator.com/item?id=8502477 - Oct 2014 (49 comments) Show HN: WebGL Fluid and Particles in Haxe - https://news.ycombinator.com/item?id=8325700 https://news.ycombinator.com/item?id=8325700 - Sept 2014 (6 comments)

sam1r 4y ago

>> related: But it’s a different experience each and every time.

taylorius 4y ago

It looks really nice! I spent a few minutes trying to simulate the old nuclear test footage, trying to get a mushroom cloud rising! :-)

codetiger 4y ago

Enjoyed the simulation for sometime. Changing the parameters didn't change the experience much, but felt some difference they way it moves.

ranguna 4y ago

Pretty, but I can't use more than one finger. Not sure if it's just me, I'm on Firefox Android.

afuckaduck 4y ago
Same here. Multitouch works in Chrome for Android though.

314 4y ago

Nice effect, but it looks more like smoke than a fluid. A constant pressure source instant of an instant splat would probably give more of a fluid effect.

rkangel 4y ago
Smoke is a fluid. I agree that it is behaving like a very non-viscous fluid, so more like a gas than a liquid.
djmips 4y ago
Here's something more like water. https://matthias-research.github.io/pages/tenMinutePhysics/18-flip.html https://matthias-research.github.io/pages/tenMinutePhysics/1... From: https://matthias-research.github.io/pages/tenMinutePhysics/index.html https://matthias-research.github.io/pages/tenMinutePhysics/i...
- 314 4y ago
  Interesting site, thanks for the link.
pushedx 4y ago
The air that you’re breathing right now is also a fluid. It’s not a liquid, but it’s a fluid.

rollulus 4y ago

As dang mentioned, this has been around for a while. Yet every time I'm impressed how my phone, laptop, etc. can render this so smoothly. I guess I'm getting old.

jimmySixDOF 4y ago
I just tried it in an Meta (Oculus) Quest 2 in their browser and it looks amazing I would love to see a version of this in a WebXR 360 skybox.
moffkalast 4y ago
Looking at the shader code there are 4 to 6 texture samplers in each and something like a dozen passes which is a bit on the heavy side, but ultimately it's all stuff that every GPU has been designed to do best, so not exactly surprising that it runs well. Now rendering something similar in 3D and real time, now that would be seriously impressive since you wouldn't be able to sample neighbouring pixels on the third axis efficiently I think.
- XzAeRosho 4y ago
  I remember when Flash was phased out and these kind of tech demos from Google started to show up to demonstrate native rendering on the browser, and while still being impressed at the time, the render quality was abysmal, even in good PCs, which kept me wondering at the time, when will be the time when the render quality would be great without investing in a beefy PC. I guess the time has come and I didn't even notice!
  - pifm_guy 4y ago
    Even with a beefy PC, the chrome 'youre offline' Easter egg dinosaur game still drops frames. It's code is pretty much the simplest web game you can make. The bug is not in the game. Rendering should tax no machine. And yet it drops frames. To me, that says something about the readiness of the web platform.
    - 4y ago

yreg 4y ago

This is pleasant to play with on a touch device.

AtomicOrbital 4y ago

nice article on how this is done https://developer.nvidia.com/gpugems/gpugems/part-vi-beyond-triangles/chapter-38-fast-fluid-dynamics-simulation-gpu https://developer.nvidia.com/gpugems/gpugems/part-vi-beyond-...

wantsanagent 4y ago

It would be fun to turn this into a simple game where you're a wizard and you have to block incoming blasts with the right color.

tppiotrowski 4y ago

I wonder how the IOS app works. Is it using WebGL in a webview or the shader code on iOS and WebGL are both using OpenGL 3+?