Return of the ripples! Shallow water simulation with Pixel Bender.

/ April 23, 2009

shallowwater

When looking at my blog stats, the most popular post by far is the old Ripple effect I did some time ago, which was based on an old demoscene trick. For a while, I’ve wanted to do a more physically correct version based on shallow water equations. Since the watercolour effect I did was based on a similar variation (as well as the image bleeding in the previous post), I decided to throw together a quick test to see if it could be turned into a new iteration of the old ripple effect. It’s mainly done for sake of experimentation, and if you really want a ripple effect I suggest using the prior one. Although the dynamics are more interesting, this one is slower, but I’m pretty happy with the performance considering the amount of calculations and the grid size (the demo has a grid of 200×200).

  • Demo
  • Source – There’s a few parameters to play around with, but take care: the simulation might just blow up with extreme settings ;)

Some day I might try out a sim with the real shallow water equations, just in case you haven’t gotten violently sick from all the fluid simulations lately (I haven’t, as seems) :D

Related posts

38 thoughts on “Return of the ripples! Shallow water simulation with Pixel Bender.”

  1. Looks great D!

    Quite hefty on my CPU though: 60 to 70% usage, core2duo 1.8 ghz running firefox. Loading it makes the fan start blowing straight away :)
    But that’s normal for this type of calculations I guess.

  2. You are the ripple master! (and I say that with my best german accent).

    That actually reminded me of the water head/snake thing from the movie The Abyss.

  4. Robert: Yeah, the 200×200 grid size is really pushing it, but I wanted to show the most detailed version that still achieved a reasonable frame rate. Normally, you’d probably use 128×128 ;)

    Sakri: Lol, that would be a cool PapervisionX shader :D

    Willem: Thanks!

  8. The demo is telling me I don’t have FP10 installed when I do. This is the first time I’ve ever encountered this.

  10. WOW,that’s so cool ! The Pixel Bender version !!
    @@ but so frankly public the result of ur investigation and study !!!

  11. Pingback: Flash 水面の揺れを表現するサンプル

  13. david i cant get the code to work, it says that the import flash.events.ShaderEvent; its not in my pc, what i have to install to have it working (btw i work with flex 3.3) with sdk 3.2, have adobe flash CS4 and adobe flash player 10, so what it can be or how it is done, (a link will be enough and belive inm googling but cant find that info)

  16. OF COURSE!!!!

    muahahah, im going to make evil experiments using mixes of classes, ahhh i feel so happy
    tx

  18. i mean i was doing one, with the code working as follows:

    changed the source type to cube, plane whatever primitive im woriking with plane now of course.

    added some perlin noise at the element that i receive.

    figured out that i was doing all wrong lol, of course, the idea is to make it on a BitmapMaterial, not deforming the vert. so the problem i had mostly is parsing the flash.display objects to away3d bitmapmaterial, so i can do the ripple over the material any idea?

  19. Why don’t you simply use MovieMaterial, should work just fine without the hassle of updating a BitmapData object manually.

  20. ah you mean, i make the .swf with the PB, and put it on the stage as a moviematerial, oh my god too much coffee man XD, ok im doing it :p

  21. No, I mean to use the instance of ShallowWaterContainer (_rippler in this source’s case) as the MovieMaterial’s movie. Should work fine.

  22. var ripmat:MovieMaterial=new MovieMaterial(_rippler);?
    but that would be an implicit coercion of value from a Rippler to a Sprite?

    i was going to try :

    [Embed(source=”assets/Ripple.swf”)]
    private var RippleEmbedded:Class;
    var bMaterial:MovieMaterial = new MovieMaterial(new RippleEmbedded())

    i dint get the last one, sorry for beign so noobie…

  23. Ah, I thought you wanted to use the newer version (which extends Sprite). In case of the old Rippler class (which is a bit less intuitive in cases as this), you should use the displayObject you assign to the Rippler class. In case that’s a Bitmap (and doesn’t extend Sprite), you could wrap it in a Sprite container.
    Using an embedded swf should work just as well, but is a bit cumbersome if you want to change something in there.

  24. btw i tried [Embed(source=”assets/Ripple.swf”)] and dint work, the box where i putted dissaperaed, going to try making the code of the rippler inside the main.as

  25. Let me hear me say a big D’oh

    ahhh i see, i was using another library, yours extends, and youre right, nascom doesnt extends sprite, it works perfect now, finally, can get some sleep now :D

    i owe u my rest man

  26. Pingback: Render Bender v0.1: optimizing my Flash+Pixel Bender workflow | Der Schmale - David Lenaerts's blog

  28. Pingback: Multitouch Ripple Effect (Screencast) « MultiTouchup.com

  29. Hey David,

    Sweet effect… I’m trying to include the code into a framework to use the effect in a flash piece, but am having a problem using the EMBED statements since I do not compile with the Flex framework. Currently my strategy is to load the pbj’s at runtime and then fill the new Shader() calls you make with a ByteArray of the relevant loaded pbj… Does this sound reasonable?

    Thanks,
    Franz

  31. Super, I had found that link but not had the time yet to implement your stuff according to that method… will let you know how it goes, I can then post u back the code, just that I won’t be working with standard Flash loaders because I need to integrate this into a bigger framework which has custom loading classes already… so I guess it’s not much use to most people.

    Right now I just want to show the effect, I’m not even sure if it will work with my graphics but if it does, what’s your position on commercial use? Would be more than happy to donate etc, but obviously want to check back with you first!

    Great work and looking forward to having a bit more time to surf through your experiments, pixelbender is one of those things I’ve been meaning to play with for ages, but then there’s always one more SimpleButton or TweenMax to go :-)

  32. I have no problem with it being used in a commercial project. I don’t even have a donation system in place, since I’m more than happy with a little credit nod :-)

  33. This is so interesting. Well done David ! Do you have a link to a paper describing this algorithm/implementation by any chance ?

  36. I tried to put your code on a flash project and I got this error.

    var _rippler:ShallowWaterContainer;
    _rippler = new ShallowWaterContainer(512, 512, 200, 200);

    ArgumentError: Error #2004: One of the parameters is invalid.
    at flash.display::ShaderData/_setByteCode()
    at flash.display::ShaderData()
    at flash.display::Shader/set byteCode()
    at flash.display::Shader()
    at com.derschmale.utils::PBImageMapper()
    at com.derschmale.fluids::ShallowWaterContainer()
    at DiabloDock_fla::DraggableVideoBall_2/frame1()

    Any suggestion?

  37. Pingback: 宇都宮ウエブ制作所» ブログアーカイブ » FlashのひよこがPixel Benderではじめる並列処理入門 前編

Leave a Reply

Your email address will not be published. Required fields are marked *