Advertisements

This article is based on material from the book Flex 4 Fun by Chet Haase, available as a PrePrint™ from Artima Press.

Flex filters make many complex image-processing operations easy. By simply attaching a filter to an object, you can get many different visual effects: glows, shadows, blurs, sharpening, and more. Until Flex 4, though, there was a slight problem with these filters: they were all you got. If you liked the approach of filters, but wanted to apply some custom image-processing algorithm not achievable with the various filter classes that Flex provided, you were out of luck.

In Flex 4, however, you can use a pixel shader with a ShaderFilter to filter your Flex object. A pixel shader is a small program, written using Adobe's Pixel Bender Toolkit. A shader is run for every pixel of an image, computing its resulting value from various input images and parameters.

Here's the Grayer demo application from my book Flex 4 Fun, which demonstrates Pixel Bender in action:

Either scripts and active content are not permitted to run or Adobe Flash Player version 10.0.0 or greater is not installed.

The Grayer application lets the user drag the slider back and forth, changing the image from completely grayscale (when the thumb is on the left) to its original color version (when the thumb is on the right). The grayscaler shader used by this Flex application takes an input image and a colorization parameter and produces an image which is a blend of the original image and the grayscale version of that image. The blend is determined by the colorization parameter, where a value of 1 results in the original color image and a value of 0 results in a completely grayscaled image.

The grayscale calculation is based on a standard formula which combines the red, green, and blue channels of the original image to produce a gray pixel of a similar intensity with the calculation graypixel = red*.11 + green*.33 + blue*.55. The shader works by operating on each pixel of the original image, multiplying it times the grayscale formula to derive the gray version of that pixel, then blending that gray version with the original color pixel in the proportion determined by the colorization parameter.

There are three parameters to this shader: the input image, the colorization parameter, and the output image. These are declared in the shader as follows:

   parameter float colorization;
   input image4 image;
   output pixel4 dst;

The only other code in the shader is the function evaluatePixel(). This is a standard function that all shaders must implement. The Pixel Bender library calls this function for every pixel of the image and takes the value of the output parameter, assigned in that function, as the result for that pixel. The function in grayscaler looks like this:

   void evaluatePixel()
   {
        float4 pixel = sampleNearest(image, outCoord());
        float4 grayPixel;
        grayPixel.r = pixel.r * .11 + 
            pixel.g * .33 + pixel.b * .55;
        grayPixel.g = grayPixel.r;
        grayPixel.b = grayPixel.r;
        grayPixel.a = 1.0;

        dst = mix(pixel, grayPixel, (1.0 - colorization));
   }

The code in the function works like this: First, the current pixel value in the original image, which is the image input, is assigned to pixel. Then the grayPixel value is calculated according to the grayscale formula, accessing the red, green, and blue channels of the original image pixel with .r, .g, and .b notation. All of the red, green, and blue values in the grayPixel are then set to that same value, and its alpha value is set to 1 to make it opaque. Finally, the calculated grayscale value is blended with the original color value using the colorization parameter and the built-in mix() function. The result is stored in the dst output parameter, which Pixel Bender uses as the final pixel value result.

The Grayer application is a very simple example of using Pixel Bender to create and use a custom filter in Flex 4. The most powerful thing about this approach to filtering is that you can really do anything with this technique: given the object being filtered, an arbitrary number of image inputs, other parameters you can pass in, and arbitrary calculations performed in the evaluatePixel() function, you can get very custom, very cool, and very flexible effects. With Pixel Bender and ShaderFilter, you get the easy approach to image processing that Flex filters provides with the power and flexibility that Pixel Bender's programming model enables.

Resources

Chet Haase is author of Flex 4 Fun, which is available as a PrePrint™ (early access release) at: http://www.artima.com/shop/flex_4_fun

Adobe's Flash Builder 4
http://labs.adobe.com/technologies/flashbuilder4

Flex 4 SDK
http://opensource.adobe.com/wiki/display/flexsdk/Flex+SDK

Download the Pixel Bender Toolkit here:
http://labs.adobe.com/technologies/pixelbender/

You can see many examples of shaders at the Pixel Bender Exchange
http://www.adobe.com/go/pixelbender

Flex.org
http://www.flex.org

Talk back!

Have an opinion? Be the first to post a comment about this article.

About the author

-