2 Replies Latest reply on Feb 12, 2010 3:41 PM by bre_an

    Move images with Pixel Bender





      I want to move some images(clouds) in my ActionScript 3 project. I am currently showing the clouds as bitmaps and moving them by manipulating the position every frame (using the ENTER_FRAME event), but it is not that smooth, so I thought I could give Pixel Bender a try. I developed a small shader for moving a single image (just one cloud for test purpuse):


      <languageVersion : 1.0;>
      kernel cloudtest
      <   namespace : "clouds";
          vendor : "bre_an";
          version : 1;
          description : "clouds test";
          input image4 src1; //source (background ~ screen resolution)
          input image4 src2; //source (cloud image 300x150 pixel)
          output pixel4 dst;
              float4 pixelIn1 = sampleNearest(src1,outCoord());
              float2 pos = outCoord();
              pos.x -= move;
              float4 pixelIn2 = sampleNearest(src2,pos);
              dst = pixelIn1 + pixelIn2;


      I update the data on every frame in ActionScript:

      private function update_filter(e:Event):void {
           shader.data.move.value = [ i ];
           background.filters = [ shaderfilter ];
           i += 1;


      so it worked, but it is actually slower to move this one cloud than the ~20 clouds I use in my Bitmap-position-manipulation solution.


      The background image is a simple shape filled with a blue gradient. It is as wide as the whole screen/browser window, so flash has a lot of pixel to process. I read that Pixel Bender might be slow when it has to process many pixel...


      So can you give me any hint or advice how I can improve this and how Pixel Bender can help me or do you know another approach how I can move the cloud-images smoothly?

        • 1. Re: Move images with Pixel Bender
          Kevin Goldsmith Level 3

          I understand your motivation, but this is something that Pixel Bender wouldn't be a good use for. If you think about how Pixel Bender works: it runs your kernel on each pixel of the output image. For your example, it means that it runs the kernel not only on all the pixels that the cloud is in, but also on the pixels that the cloud is not, which is a lot of extra work. Also, this kind of thing is the Flash-player's bread and butter. This kind of thing is pretty optimized in the player.


          I know a lot more about Pixel Bender than I do about actionscript, but I think that probably having a bitmap object of the cloud on top of the background gradient and moving that bitmap one pixel every frame will probably be way smoother, even for multiple clouds.

          1 person found this helpful
          • 2. Re: Move images with Pixel Bender
            bre_an Level 1

            Thank you! I thougt something like that, so I will try to optimize my first solution (or keep the current solution where the user can choose between static and animated clouds).