omino pixel blog

Pixel Bender is Fun!

Ok. This post will show the source code for the tiniest, simplest Pixel Bender generator you can imagine. A generator is like a filter, with no inputs; it just creates an output. Afterwards, some thoughts about integrating into Flash.

To run it, just download the Pixel Bender Toolkit from Adobe, and paste this code into it.

<languageVersion : 1.0;>

kernel ShowAColor <namespace : "x";vendor : "x";version : 1;>
{
    parameter float3 the_color < defaultValue : float3(0.8,0.1,.5) ; >;
    output pixel3 dst;

    void evaluatePixel()
    {
        dst = the_color;
    }

    region generated() // (but not supported in Flash)
    {
        return region(float4(0,0,100,100));
    }
}

When you run it, you’ll get to input a color with sliders…

And as you choose the color, a 100×100 square of GPU-accelerated pixels will display it.

Nothing too high-concept here, but it does show the two main methods. evaluatePixel() does the actual rendering; it gets called over and over for each pixel of output. generated() just tells Pixel Bender how big an image to create.

Adding Another Parameter

Lets do one further little tweak, and then get on to a discussion about Flash and such. We’ll add a control to invert the color.

<languageVersion : 1.0;>

kernel ShowAColor <namespace : "x";vendor : "x";version : 1;>
{
    parameter float3 the_color < defaultValue : float3(0.8,0.1,.5) ; >;
    parameter int invert_color < minValue : 0 ; maxValue : 1 ; >;
    output pixel3 dst;

    void evaluatePixel()
    {
        if(invert_color > 0)
            dst = float3(1,1,1) - the_color;
        else
            dst = the_color;
    }

    region generated() // (but not supported in Flash)
    {
        return region(float4(0,0,100,100));
    }
}

Now we get one more control, which inverts the color.

My Comments, Observations, and (Constructive) Critique

I’ll assume here that the reader is using other references as well to learn about Pixel Bender… that you know about the float and float3 and float4 types, and that you can have an input image to process, and so forth.

This particular kernel won’t work in Flash 10, for two reasons:

• The output in Flash must be of type pixel4, not pixel3. That is, it must have an alpha channel.
• Flash doesn’t support the generated() function. In the Pixel Bender Toolkit, omission of the generated() function (for an inputless kernel) causes a blank display when you run it. In Flash, however, a kernel is alway run as a “Filter” on something, and so assumes its size.

In the second example, there are two declared parameters. the_color is first, and invert_color is second. But they’re displayed in opposite order. The Pixel Bender Toolkit always displays them alphabetically. That’s not bad, but it would be nice if you, the author, could control the display order.

Also, it would be nice if the_color was shown as a color picker instead of three sliders. For that matter, it would be nice if invert_color showed up as checkbox. I think it would be nice if you could type:

    parameter float3 the_color
        < defaultValue : float3(0.8,0.1,.5) ; type : "colorpicker" >;
    parameter int invert_color
        < minValue : 0 ; maxValue : 1 ; type : "checkbox" >;

It turns out that you could do this in a generic Flash framework. All of the metadata in the <this:that> is visible to ActionScript as named properties of kernel’s instance (an instance of class ShaderFilter). You’d have to control the ordering with another assignment, but, in principle the following code would give such a hypothetical Flash-based parameter-editor enough clues:

    parameter float3 the_color
        < defaultValue : float3(0.8,0.1,.5) ; _index : 1 ; _type : "colorpicker" >;
    parameter int invert_color
        < minValue : 0 ; maxValue : 1 ; _index : 2 ; _type : "checkbox" >;

I’m hoping that integration with After Effects CS4 uses something like that… Hi Adobe… listening? 🙂

One Last Gotcha / Complaint

Annoyingly, Pixel Bender doesn’t do type-promotion. That is, you get errors if you ever mix integers with floats. Each line of the following code produces errors!

	parameter float xParam <defaultValue:2;>; // Ha! must be 2.0
	float x = 0; // Ha! must be 0.0
	if(x < 0) x = -x; // Ha! still must be 0.0
	float3 xyz = float3(1,2,3); // well, this is allowed! hooray

Next up, adventures with finally, finally learning a bit of Flash.