WebGL Fluid Simulation
464 points by ChadNauseam 12 days ago | 60 comments
  • jcims 12 days ago |
    I don't know why but I always find these high resolution physics simulations/eye candy to the thing that really blows my mind about how much processing is done inside of a cpu/gpu. I watched a two minute short earlier today from the cockpit of a plane declaring an emergency and needing to take a runway at an airport and it wasn't until right at the end that I realized the video wasn't real...it was from a simulator or video game of some kind. Yet still seeing swirly colors on a screen still is what does it for me.

    Weird.

  • kittikitti 12 days ago |
    This was so cool! I really liked creating a spiral and circling it faster and faster. Maybe this could be visualized with a PC build and the fan airflow?
  • theLegionWithin 12 days ago |
    damn, that's neat
  • lovegrenoble 12 days ago |
  • lovegrenoble 12 days ago |
  • omoikane 12 days ago |
    oimo.io also has a few WebGL fluid simuations, via this thread:

    https://news.ycombinator.com/item?id=37026592 - Water (2023-08-06, 133 comments)

    https://oimo.io/works/water/

    https://oimo.io/works/water3d/

    https://oimo.io/works/fluid/

  • hyperation 12 days ago |
    Being able to right click, Save image as.. is awesome.
  • tlarkworthy 12 days ago |
    I have a fork of this that inverts the light model from additive to subtractive and suddenly its like ink in water

    https://observablehq.com/@tomlarkworthy/ink

    • doctorhandshake 12 days ago |
      This was the first thing I did when I wrote a fluid sim as well - I’ve spent a ton of time and energy pursuing ways to get subtractive color effects (the richness and light-subjectivity of pigment) in digital artifacts and have mostly come up empty, but I take every chance I can get.
      • snaily 11 days ago |
        Have you checked out mixbox[0]? The outputs do feel intuitively "right" as someone who has dabbled in watercolor, and the paper/videos cover the thinking and Kubelka-Munk theory well.

        [0] https://github.com/scrtwpns/mixbox

        • tlarkworthy 11 days ago |
          oh wow, they have the fluid demo too!!! Thats so much better!

          https://scrtwpns.com/mixbox/fluids/

        • doctorhandshake 11 days ago |
          Wild! Just saw that at the top of the front page and thought ‘dang is HN reading my mind today??’

          Thanks for the link!

        • bj-rn 11 days ago |
          Spectral.js might also be interesting. It comes with a GLSL implementation of Kubelka-Munk and is MIT.

          https://github.com/rvanwijnen/spectral.js

    • popalchemist 12 days ago |
      How difficult would it be to prevent the ink from disappearing? Any tips would be appreciated, I'd love to integrate this into a drawing app.
      • tlarkworthy 11 days ago |
        very easy, its a free parameter in the simulation see the "Ink dissipation" slider, you can set it to > 1 for some weird effects.
    • SiggyF 12 days ago |
      You could consider changing your ink to CMYK colors: `mutable ink = [255, 0, 255]`.
  • keepamovin 12 days ago |
    If I stir a cup (or even a rectangle) of water, it will start swirling. Why does this not swirl? Local chaos, dissipates quickly, bulk flow does not sustain.
    • block_dagger 12 days ago |
      Swirls on my phone.
      • keepamovin 12 days ago |
        I tried phone, similar. I guess it kind of does keep rotating, but you can’t see it. Colors fade faster than flow.

        If you dab a finger in the stream at right angles to the flow you made, the splash flows the expected way, but maybe slower than water.

        It would be good to visualize any flow. And also to respond to device orientation so you can feed the resonance :)

  • brundolf 12 days ago |
    I think this actually produces HDR on my iPhone 15 Pro, which really makes it pop because not a lot of things do

    Very cool!

    • geek_at 12 days ago |
      It looks really nice and is very smooth.. But a subscription for a fluid dynamic app, really?
      • jonplackett 12 days ago |
        They gave you a free web version. So if they want to try and do a subscription of charge $30 for a one off purchase I think that’s up to them. I’m curious if anyone will ever buy a subscription or spend $30 though.
        • tlarkworthy 12 days ago |
          I tried it as a background on Android but it killed my battery within hours so I stopped. Shame, its so cool.
          • jonplackett 12 days ago |
            I bet your phone doubled as a nice hand warmer though
      • Workaccount2 11 days ago |
        People will fall over themselves to attach a subscription to anything. Pure cancer if you ask me.
  • swazzy 12 days ago |
    Sebastian Lague recently created a related video for those interested in rendering fluids: https://www.youtube.com/watch?v=kOkfC5fLfgE
    • jedimastert 11 days ago |
      Lague's videos have been consistently incredible and inspiring. Highly recommend for anyone interested in the space
  • naich 12 days ago |
    The first time I've actually appreciated my laptop's touch screen.
  • klener 12 days ago |
    Does anyone know of more examples of water simulations in WebGL? I’m looking for ways to implement waves with foam.

    I love Evan’s Pool demo. https://madebyevan.com/webgl-water/

    • hirako2000 12 days ago |
      Was reading somewhere that one isn't a simulation. Rather super clever tricks to make it look like water, swimming pool, a thing in it.
      • dtgriscom 11 days ago |
        You're right. Move the ball so it's half-immersed, wait for the water to settle, and then cause a single ripple. The ripple will propagate past the ball, coming out the other side with no diffraction.

        Still very, very cool.

  • MPSimmons 12 days ago |
    I have an HDR monitor and OMG it's so bright it's almost painful. So beautiful!
    • exodust 11 days ago |
      I don't think this demo uses your monitor's HDR. You can test by pausing the simulation, then paint your whole screen with the pointer. Your screen is now all white. Compare brightness with a regular white page, it's the same brightness.

      I have an OLED display too. SDR content looks really good on OLED displays because of the incredible contrast. It might appear HDR but is SDR.

  • lukew3 12 days ago |
    Woah, that's pretty
  • Falimonda 12 days ago |
    This reminds me of Plasma Pong!

    It would be a shame if you implemented a free online version of it ;)

    • chamomeal 12 days ago |
      Plasma pong was AMAZING thanks for unlocking that memory!!
    • jeffhuys 12 days ago |
      Oh wow yeah!
    • Edd314159 12 days ago |
      This reminded me of a game but I couldn’t remember which one. I opened this comment thread hoping someone would know, and you delivered. Thank you!
  • Mossly 12 days ago |
    I'll always have a soft spot for this earlier implementation which at lower resolutions has a kind of cyberpunk netrunner aesthetic, and at higher resolutions an almost ethereal ghostlike quality: https://haxiomic.github.io/projects/webgl-fluid-and-particle...
    • Mossly 12 days ago |
      hey there's even a comment from 2020 where the creator of that project talks about this project, neat! I always wondered if they were connected in some way or independent applications of the same underlying premise: https://news.ycombinator.com/item?id=24065857
    • sujayakar 12 days ago |
      I love playing with it at UltraHigh quality and 1 solver iterations. It reminds me of gradually incorporating one ingredient into another when cooking: like incorporating flour into eggs when making pasta.
  • paulpauper 12 days ago |
    all from Newton's equations...
    • hirako2000 12 days ago |
      Is that not navier-stokes ?
      • kvakkefly 11 days ago |
        You can derive naviger stokes from newtons laws, or I suppose some conversation laws.
        • hirako2000 11 days ago |
          Wasn't sure so I checked. Not a physicist.

          If navier-stokes equations can be derived from Newton's laws, then Newton's laws can be derived from Galileo, Archimedes before him, even some older thinkers before them.

          Newton ignored viscosity, and density. He made some discoveries on fluid dynamics but his famous laws only apply to solid objects. Same for velocity, he knew about that of course but only worked it out for solids. Ignoring two critical components meant he didn't establish relations between them either.

          That's my read.

          Not to dismiss credits to Newton, who's is in another league than navier and stokes. In his own league even. He probably would have figured out what was only solved centuries later had he explored further, or had he benefited from perhaps just a few other later discoveries.

          But that's dismissive of navier-stokes significant discoveries on fluid dynamics to not simply give them credit for the formula behind this simulation.

          Oh, did you mean conservation?

  • offsky 12 days ago |
    I would love to see a lava lamp simulator with this type of quality. I’ve tried before to make one but alas I don’t have the math.
  • who-shot-jr 12 days ago |
    I am utterly amazed by people who can do stuff like this.
  • neuroelectron 12 days ago |
    Reminds me a lot of Smoke Winamp plugin from Geisswerks. Looks almost identical, actually. Pretty sure he used GPU acceleration to write it back when that was a pretty rare feature for 2D effects.

    http://www.geisswerks.com/about_smoke.html

  • hirako2000 12 days ago |
    How about 3D? Is there at least an equation to solve that yet?
  • joshchernoff 11 days ago |
    This is great!
  • gyomu 11 days ago |
    Can someone explain what kind of fluid this is simulating? Obviously it implements the general Navier-Stokes fluid equations, but if I twirl some ink in a cup of water it looks nothing like this so I'm confused by the naming.

    Is it a scale issue? When I look at the sea it doesn't look much like this either, so I don't think so?

    Is there a combination of parameters I could set in the simulation such that it looks like what I see when I pour myself a glass of water, or watch waves at the beach?

    Or is it because all the real world examples I'm referencing are 3D, and this is 2d?

    • hwillis 11 days ago |
      It should look basically accurate, except that the edges absorb momentum. You're looking downward into a pool of water and dragging the mouse is like dragging a finger through the water. Not totally the same, because the mouse is directly imparting momentum into the fluid instead of displacing it- that's why twirling looks wrong. If you move the mouse in a circle it will constantly grab and pull back the fluid, which can't be done in real life.

      The fluid has a set lifetime instead of actually mixing, which makes it look different- normally the edges would dissipate faster than the areas that are all ink but instead it just all fades at the same rate.

      The simulation is kind of 3d- since it's incompressible, pressure at any point is proportional to the height of the fluid. Advection still happens on a single plane, but if the pressure-related height is relatively large compared to the average depth of the fluid it's not a bad approximation. The viscous losses are also kind of arbitrary, but it's not far from water.

  • MasterScrat 11 days ago |
    Multi-touch support (at least on iOS) is a nice touch
  • akomtu 11 days ago |
    Shadertoy has plenty of fluid solvers, e.g. here is a 3d solver: https://www.shadertoy.com/view/wlG3RW
  • sagarpatil 11 days ago |
    It’s mind blowing how we went from Adobe Flash to this in just 25 years.
  • itsTyrion 10 days ago |
    I want that as live wallpaper on windows with constant light movement