PixelBender - where everything else can't do the job
This is the first part of a series of posts about PixelBender and how it can take flex graphics rendering to the next stage. The posts are based on a lecture that I gave in Tikal's flex experts monthly meeting.
I ran across PixelBender when looking for a solution for an "exotic" problem - how to paint only specific parts of a component, based on their transparency, in a different color.
The first try was using shaders, next I tried blending and blend shaders and then even masking and clipping, yet, nothing did the job. Just when I was about to quit, a weird google query led me to PixelBender. At first sight it looked like a complicated, not trivial and problematic technology to use but after spending a few more hours learning it, I found how powerful it is and how easy it is to create cool effects.
If you are still skeptic and think I overlooked color transforms, try to think about a filter that need a condition or a discreet segmentation of the color space. For example, if pixel[alpha] < 0.5 set color to RED, otherwise BLUE. This can never be achieved by multiplication. Most of this kind of effects can be achieved by writing a few (usually under 10) lines of codes for a PixelBender kernel.
Following the lecture I realized that hard core flex developers, even if they are world class champions in flex life cycle and MVCS frameworks, are not always familiar with the fine details of graphics and colors. This is why the fist part of the series will deal with colors and layout the foundation for the next posts to come.
Colors and color components
Each pixel on the screen has a color value. Color value can be specified in a few different methods (or models). The most common one is RGB, or if you want to specify transparency, RGBA. Other mthods include CMYK and the cylindrical HSV and HSL represantation. HSL and HSV are interesting and make lots fo sense but are less common. RGB(A) is the common represantation, used by CSS, flex and most of the UI systems.
I will focus on RGB representation. RGB stands for Red Green and Blue. Each component is in the range 0-255 (0-FF in hex). A few quick examples:
Full green: 0x0000FF
Full red: 0xFF0000
Full yellow: 0xFFFF00 (mix red and green equally).
Dim red: 0x880000
All greys are achieved by mixing the same ammount from each component:
Mid grey: 0x888888
Full bright grey (a.k.a white): 0xFFFFFF
Darkest grey (a.k.a black): 0x000000
Flex accepts these colors both in the form 0xRRGGBB and #RRGGBB. The 0xRRGGBB notation fits both in as3 expressions and in property (i.e. style) assigments inside mxml while the #RRGGBB fits only in mxml tags. The as3 type to specify colors is uint (unsigned int).
Before we go on to practical examples and some fun, a word about the A (alpha). Flex is consistant in taking color and alpha separately. This is why all colors in flex are uint (0xRRGGBB) and the transparency is specified by the alpha style property. Alpha is in the range 0-1 when 0 is transparent and 1 is fully opaque.
To createa a red group that has no transparency (fully opaque), do this:
<s:Group width="100" height="100" opaqueBackground="0xFF0000"/>
Note that flex components use the opaqueBackground property to specify the components background color.
Before you try this code, there is one more thing to remember, flex groups size is just a "framework", the group's background works only on the occupied borders, so, to make this group's background visible, you should add something inside it, for example:
<s:Group width="100" height="100" right="50" bottom="50" opaqueBackground="0xFF0000"> <s:Rect width="100" height="100"/> </s:Group>
The rect does the job.
And here is the result: