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"/>


The rect does the job.


And here is the result:


Get Adobe Flash player
Thank you for your interest!

We will contact you as soon as possible.

Send us a message

Oops, something went wrong
Please try again or contact us by email at info@tikalk.com