Pixel Bender for Flash Player lets you play some more advanced games. Based on your needs you can force your kernels to “eat” not only BitmapData, but also ByteArray-s or Vector-s. With this knowledge, you can simply use Pixel Bender kernels for some fast math or processing like 3D engines (3D to 2D projection) etc. Lets have a look at some simple demos, how to push vector and raw bytes directly into shader via ShaderJob:

Vector.<Number>

Simple (one-dimension) vector may be recognized by pixel bender as 3-channel input just as simple as providing correct width/height for shader:

var src:Vector.<Number> = new Vector.<Number>();
while(someLooping)
{
    src.push(x);
    src.push(y);
    src.push(z);
}

var shader:Shader = new Shader(code);
shader.data.src.input = src;
shader.data.src.width = src.length / 3; // forces pixel bender to use image3 as input
shader.data.src.height = 1;

var res:Vector.<Number> = new Vector.<Number>();
var job:ShaderJob = new ShaderJob(shader, res, src.length / 3, 1);
job.start(true);

for(var i:uint=0; i<src.length; i+=3)
{
    x = res[i];
    y = res[i+1];
    z = res[i+2];
}

ByteArray

If you are more in “low-level” things, try using raw bytes as input. Do not forget to setup LITTLE_ENDIAN for source and result variables. Also make sure width*height*4 results in source bytes length.

var src:ByteArray = new ByteArray();
src.endian = Endian.LITTLE_ENDIAN;
src.position = 0;
while(someLooping)
{
    src.writeFloat(x);
    src.writeFloat(y);
    src.writeFloat(z);
}

var shader:Shader = new Shader(code);
shader.data.src.input = src;
shader.data.src.width = 256; // e.g.
shader.data.src.height = src.length/4/256;

var res:ByteArray = new ByteArray();
res.endian = Endian.LITTLE_ENDIAN;

var job:ShaderJob = new ShaderJob(shader, res, 256, src.length/4/256);
job.start(true);

res.position = 0;
for(var i:uint = 0; i<src.length/4; i++)
{
    x = res.readFloat();
    y = res.readFloat();
    z = res.readFloat();
}

Lets have a look at how pixel bender handles input and outputs. As with current version of pixel bender/flash player it seems like:

'res' : cannot have 1 or 2 channel outputs

… but you can use 3 or 4 channel outputs (float3, pixel3).

<languageVersion : 1.0;>
kernel threed <namespace : "sk.yoz";vendor : "Yoz";version : 1;>
{
    input image3 src;
    output float3 res; // or pixel3
    void evaluatePixel()
    {
        res = sample(src, outCoord());
        // we have res.x, res.y and res.z
    }
}

Where to go from here:

• Using Pixel Bender to calculate information
• Number crunching with as3 and pixelbender
• Using Pixel Bender with Flash Builder 4 as a number crunching engine
• Flash 10, Massive amounts of 3D particles with Alchemy (source included).

While playing with pixel bender, I created some simple sahders that when combined, reminds me of winamp visualizations effects. Feel free to use any in your own projects.

Click and drag mouse to make some disco effects. (wait while page header flash finishes loading so it runs smoothly)

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
    enterFrame="enterFrame()" applicationComplete="init()"
    backgroundColor="#ffffff" frameRate="50"
    mouseMove="mouseMoveHandler(event)"
    mouseDown="mouseDownHandler(event)"
    mouseUp="mouseUpHandler(event)">
<mx:Script>
<![CDATA[
    private var drawing:Boolean = false;
    private var color:uint = 0x0;
    private var bitmap:Bitmap = new Bitmap();
    private var lineX:Number = 0;

    [Bindable]
    private var fps:Number = 0;
    private var fpsDate:Date = new Date();
    private var fpsFrames:uint = 0;

    [Bindable]
    private var rotationTime:uint = 0;

    [Bindable]
    private var blurTime:uint = 0;

    [Bindable]
    private var colorizeTime:uint = 0;

    [Bindable]
    private var twirlTime:uint = 0;

    [Embed(source="../pbj/rotation.pbj", mimeType="application/octet-stream")]
    private static const ROTATION_CLASS:Class;
    private static const ROTATION_SHADER:Shader = new Shader(new ROTATION_CLASS());

    [Embed(source="../pbj/blur.pbj", mimeType="application/octet-stream")]
    private static const BLUR_CLASS:Class;
    private static const BLUR_SHADER:Shader = new Shader(new BLUR_CLASS());

    [Embed(source="../pbj/colorize.pbj", mimeType="application/octet-stream")]
    private static const COLORIZE_CLASS:Class;
    private static const COLORIZE_SHADER:Shader = new Shader(new COLORIZE_CLASS());

    [Embed(source="../pbj/twirl.pbj", mimeType="application/octet-stream")]
    private static const TWIRL_CLASS:Class;
    private static const TWIRL_SHADER:Shader = new Shader(new TWIRL_CLASS());

    private function init():void
    {
        placeholder.addChild(bitmap);
    }

    private function mouseDownHandler(event:MouseEvent):void
    {
        drawing = true;
        color = Math.random() * 0xffffff;
    }

    private function initGraphics():void
    {
        container.graphics.clear();
        container.graphics.moveTo(mouseX, mouseY);
        container.graphics.lineStyle(10, color, 1);
    }

    private function mouseUpHandler(event:MouseEvent):void
    {
        drawing = false;
    }

    private function mouseMoveHandler(event:MouseEvent):void
    {
        if(!drawing)
            return;
        container.graphics.lineTo(event.localX, event.localY);
    }

    private function countFps():void
    {
        if(++fpsFrames < 10)
            return;
        fps = Math.round(1 / (new Date().time - fpsDate.time) * 10000);
        fpsDate = new Date();
        fpsFrames = 0;
    }

    private function get w():Number
    {
        return container.width;
    }

    private function get h():Number
    {
        return container.height;
    }

    private function enterFrame():void
    {
        countFps();

        if(!container || !container.width)
            return;

        var bitmapData:BitmapData = new BitmapData(w, h, true, 0x000000);
        bitmapData.draw(bitmap);
        if(rotationCheckBox.selected)
            addRotation(bitmapData, 0.1);
        if(blurCheckBox.selected)
            addBlur(bitmapData);
        if(colorizeCheckBox.selected)
            addColorize(bitmapData, color);
        if(twirlCheckBox.selected)
        {
            var radius:Number = Math.min(w / 2, h / 2);
            addTwirl(bitmapData, 10, new Point(w / 4, h / 2), radius);
            addTwirl(bitmapData, -10, new Point(w / 4 * 3, h / 2), radius);
        }

        addAutoFill();
        bitmapData.draw(container);

        bitmap.bitmapData = bitmapData;
        initGraphics();
    }

    private function addAutoFill():void
    {
        lineX = (lineX > w) ? 0 : (lineX + 15);
        container.graphics.moveTo(lineX - 15, h / 3 * 2);
        container.graphics.lineTo(lineX, h / 3 * 2);
    }

    private function addRotation(bitmapData:BitmapData, rotation:Number):void
    {
        rotationTime = new Date().time;
        ROTATION_SHADER.data.src.input = bitmapData;
        ROTATION_SHADER.data.src.width = w;
        ROTATION_SHADER.data.src.height = h;
        ROTATION_SHADER.data.rotation.value = [rotation];
        ROTATION_SHADER.data.tx.value = [w / 2];
        ROTATION_SHADER.data.ty.value = [h / 2];

        var job:ShaderJob = new ShaderJob(ROTATION_SHADER, bitmapData);
        job.start(true);
        rotationTime = new Date().time - rotationTime;
    }

    private function addBlur(bitmapData:BitmapData):void
    {
        blurTime = new Date().time;
        BLUR_SHADER.data.src.input = bitmapData;
        BLUR_SHADER.data.src.width = w;
        BLUR_SHADER.data.src.height = h;

        var job:ShaderJob = new ShaderJob(BLUR_SHADER, bitmapData);
        job.start(true);
        blurTime = new Date().time - blurTime;
    }

    private function addColorize(bitmapData:BitmapData, color:uint):void
    {
        colorizeTime = new Date().time;
        var r:Number = ((color >> 16) & 0xFF) / 0xFF - 0.5;
        var g:Number = ((color >>  & 0xFF) / 0xFF - 0.5;
        var b:Number = (color & 0xFF) / 0xFF - 0.5;

        COLORIZE_SHADER.data.src.input = bitmapData;
        COLORIZE_SHADER.data.src.width = w;
        COLORIZE_SHADER.data.src.height = h;
        COLORIZE_SHADER.data.color.value = [r / 40, g / 40, b / 40];

        var job:ShaderJob = new ShaderJob(COLORIZE_SHADER, bitmapData);
        job.start(true);
        colorizeTime = new Date().time - colorizeTime;
    }

    private function addTwirl(bitmapData:BitmapData, angle:Number,
        center:Point, radius:Number):void
    {
        twirlTime = new Date().time;
        TWIRL_SHADER.data.oImage.input = bitmapData;
        TWIRL_SHADER.data.oImage.width = w;
        TWIRL_SHADER.data.oImage.height = h;
        TWIRL_SHADER.data.radius.value = [radius];
        TWIRL_SHADER.data.center.value = [center.x, center.y];
        TWIRL_SHADER.data.twirlAngle.value = [angle];

        var job:ShaderJob = new ShaderJob(TWIRL_SHADER, bitmapData);
        job.start(true);
        twirlTime = new Date().time - twirlTime;
    }
]]>
</mx:Script>
<mx:UIComponent width="100%" height="100%" id="placeholder" />
<mx:Container id="container" width="100%" height="100%" backgroundAlpha="0"/>
<mx:VBox paddingLeft="10" paddingTop="10">
    <mx:Text text="fps: {fps} / 50" />
    <mx:HBox>
        <mx:CheckBox id="rotationCheckBox" selected="true"/>
        <mx:Label text="rotation {rotationTime} ms" />
    </mx:HBox>
    <mx:HBox>
        <mx:CheckBox id="blurCheckBox" selected="true"/>
        <mx:Label text="blur {blurTime} ms" />
    </mx:HBox>
    <mx:HBox>
        <mx:CheckBox id="colorizeCheckBox" selected="true"/>
        <mx:Label text="colorize {colorizeTime} ms" />
    </mx:HBox>
    <mx:HBox>
        <mx:CheckBox id="twirlCheckBox" selected="false"/>
        <mx:Label text="twirl {twirlTime} ms" />
    </mx:HBox>
</mx:VBox>
</mx:Application>

Rotation pixel bender

<languageVersion : 1.0;>

kernel RotationFilter
<
	namespace : "sk.yoz";
	vendor : "Yoz";
	version : 1;
	description : "Image rotation over transform point";
>
{
	input image4 src;
	output pixel4 dst;

	parameter float tx
	<
		minValue: float(0.0);
		maxValue: float(4096.0);
		defaultValue: float(0.0);
		description: "The amount of movement along the x axis to the right, in pixels.";
	>;

	parameter float ty
	<
		minValue: float(0.0);
		maxValue: float(4096.0);
		defaultValue: float(0.0);
		description: "The amount of movement down along the y axis, in pixels.";
	>;

	parameter float rotation
	<
		minValue: float(0.0);
		maxValue: float(4096.0);
		defaultValue: float(0.0);
		description: "Rotation in radians";
	>;

	void evaluatePixel()
	{
		float2 pos = outCoord();
		float rc = cos(rotation);
		float rs = sin(rotation);
		float dx = pos.x - tx;
		float dy = pos.y - ty;
		dst = sampleNearest(src, float2(
			tx + rc * dx + rs * dy,
			ty + rc * dy - rs * dx));
	}
}

Blur pixel bender

<languageVersion : 1.0;>

kernel BlurFilter
<
	namespace : "sk.yoz";
	vendor : "Yoz";
	version : 1;
	description : "Simple blur";
>
{
	input image4 src;
	output pixel4 dst;

	void evaluatePixel()
	{
		float2 pos = outCoord();

		dst = 1.0 / 9.0 * (
			sampleNearest(src, pos - float2(-1.0, -1.0))
			+ sampleNearest(src, pos - float2(0.0, -1.0))
			+ sampleNearest(src, pos - float2(1.0, -1.0))
			+ sampleNearest(src, pos - float2(-1.0, 0.0))
			+ sampleNearest(src, pos - float2(0.0, 0.0))
			+ sampleNearest(src, pos - float2(1.0, 0.0))
			+ sampleNearest(src, pos - float2(-1.0, 1.0))
			+ sampleNearest(src, pos - float2(0.0, 1.0))
			+ sampleNearest(src, pos - float2(1.0, 1.0)));
	}
}

Colorize pixel bender

<languageVersion : 1.0;>

kernel ColorizeFilter
<
	namespace : "sk.yoz";
	vendor : "Yoz";
	version : 1;
	description : "Simple colorize";
>
{
	input image4 src;
	output pixel4 dst;

	parameter float3 color
	<
		minValue: float3(-1.0, -1.0, -1.0);
		maxValue: float3(1.0, 1.0, 1.0);
		defaultValue: float3(0.0, 0.0, 0.0);
		description: "Color";
	>;

	void evaluatePixel()
	{
		dst = sampleNearest(src, outCoord());
		dst.r += color.r;
		dst.g += color.g;
		dst.b += color.b;
	}
}

Twirl pixel bender effect is available for download here

Pixel Bender Explorer is simple application that lets you dynamicly load .pbj files, apply it on image and edit shader values. Application uses two classes. ShaderLoader class loads external .pbj file and casts loaded binary data into Shader object. ShaderExplorer class inspects created Shader object and generates editable form based on Shader parameters. You can load your own external .pbj files (crossdomain.xml required near .pbj file) or feel free to download and use whole .swf application localy.

Application inspired by Enumerating Pixel Bender filter parameters and metadata dynamically in Flash and Introduction to Pixel Bender: Part 2 articles.

Pixel Bender Explorer application

sk.yoz.shader.ShaderLoader

package sk.yoz.shader
{
    import flash.display.Shader;
    import flash.events.Event;
    import flash.events.EventDispatcher;
    import flash.events.IOErrorEvent;
    import flash.filters.ShaderFilter;
    import flash.net.URLLoader;
    import flash.net.URLLoaderDataFormat;
    import flash.net.URLRequest;

    public class ShaderLoader extends EventDispatcher
    {
        protected var loader:URLLoader = new URLLoader();
        protected var _filters:Array = [];
        protected var _shader:Shader;
        protected var _shaderFilter:ShaderFilter;

        public function ShaderLoader()
        {
            super();

            loader.dataFormat = URLLoaderDataFormat.BINARY;
            loader.addEventListener(Event.COMPLETE, loadCompleteHandler);
            loader.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
        }

        [Bindable(event="filtersChanged")]
        public function get filters():Array
        {
            return _filters;
        }

        protected function set filters(value:Array):void
        {
            _filters = value;
            dispatchEvent(new Event("filtersChanged"));
        }

        [Bindable(event="shaderChanged")]
        public function get shader():Shader
        {
            return _shader;
        }

        protected function set shader(value:Shader):void
        {
            _shader = value;
            dispatchEvent(new Event("shaderChanged"));
        }

        [Bindable(event="shaderFilterChanged")]
        public function get shaderFilter():ShaderFilter
        {
            return _shaderFilter;
        }

        protected function set shaderFilter(value:ShaderFilter):void
        {
            _shaderFilter = value;
            dispatchEvent(new Event("shaderFilterChanged"));
        }

        public function load(url:String):void
        {
            loader.load(new URLRequest(url));
        }

        protected function loadCompleteHandler(event:Event):void
        {
            try
            {
                protected::shader = new Shader(event.target.data);
                protected::shaderFilter = new ShaderFilter(public::shader);
                protected::filters = [public::shaderFilter];
            }
            catch(error:Error)
            {
                protected::shader = null;
                protected::shaderFilter = null;
                protected::filters = [];
            }
        }

        protected function ioErrorHandler(event:IOErrorEvent):void
        {
        }
    }
}

sk.yoz.shader.ShaderExplorer

package sk.yoz.shader
{
    import flash.display.Shader;
    import flash.display.ShaderInput;
    import flash.display.ShaderParameter;
    import flash.events.Event;
    import flash.filters.ShaderFilter;

    import mx.containers.VBox;
    import mx.controls.HRule;
    import mx.controls.HSlider;
    import mx.events.SliderEvent;
    import mx.controls.Spacer;
    import mx.controls.Text;

    public class ShaderExplorer extends VBox
    {
        protected var _shader:Shader;

        public function ShaderExplorer()
        {
            super();
        }

        public function get shader():Shader
        {
            return _shader;
        }

        public function set shader(value:Shader):void
        {
            _shader = value;
            createControls();
            dispatchEvent(new Event("shaderFiltersChanged"));
        }

        [Bindable(event="shaderFiltersChanged")]
        public function get shaderFilters():Array
        {
            if(!shader)
                return [];
            return [new ShaderFilter(shader)];
        }

        protected function createControls():void
        {
            var spacer:Spacer;

            removeAllChildren();
            createDescriptors();
            spacer = new Spacer();
            spacer.height = 20;
            addChild(spacer);
            createInputs();
            spacer = new Spacer();
            spacer.height = 20;
            addChild(spacer);
            createParameters();
        }

        protected function createDescriptors():void
        {
            var param:String;
            for(param in shader.data)
                if(shader.data[param] is String)
                    add_text(param + ": " + shader.data[param]);
        }

        protected function createInputs():void
        {
            var param:String;
            for(param in shader.data)
                if(shader.data[param] is ShaderInput)
                    add_text(param + ": " + shader.data[param]);
        }

        protected function sliderChangeHandler(event:SliderEvent):void
        {
            if(!event.target.name)
                return;
            var name:String = String(event.target.name).replace(/_[0-9]+$/, '');
            var shaderParameter:ShaderParameter = shader.data[name];
            var values:Array = [];
            var i:uint = 0;
            while(getChildByName(name + "_" + i))
                values.push(HSlider(getChildByName(name + "_" + i++)).value);
            shaderParameter.value = values;
            dispatchEvent(new Event("shaderFiltersChanged"));
        }

        protected function createParameters():void
        {
            var param:String;
            var shaderParameter:ShaderParameter;
            for(param in shader.data)
            {
                if(!(shader.data[param] is ShaderParameter))
                    continue;

                shaderParameter = shader.data[param] as ShaderParameter;
                try
                {
                    this["add_" + shaderParameter.type].apply(null, [shaderParameter]);
                }
                catch(error:Error)
                {
                    add_text("unknown type (" + shaderParameter.type + ")");
                }
            }
        }

        protected function add_text(text:String):void
        {
            var txt:Text = new Text();
            txt.text = text;
            txt.percentWidth = 100;
            addChild(txt);
        }

        protected function add_slider(name:String, value:Number, minimum:Number,
            maximum:Number, snapInterval:Number = 0):void
        {
            var slider:HSlider = new HSlider();
            slider.name = name;
            slider.minimum = minimum;
            slider.maximum = maximum;
            slider.value = value;
            slider.snapInterval = snapInterval;
            slider.percentWidth = 100;
            slider.addEventListener(SliderEvent.CHANGE, sliderChangeHandler);
            addChild(slider);
        }

        protected function add_float(p:ShaderParameter):void
        {
            add_text(p.name + " (" + p.type + ")");
            add_slider(p.name + "_0", p.defaultValue[0], p.minValue[0], p.maxValue[0]);
        }

        protected function add_float2(p:ShaderParameter):void
        {
            add_text(p.name + " (" + p.type + ")");
            add_slider(p.name + "_0", p.defaultValue[0], p.minValue[0], p.maxValue[0]);
            add_slider(p.name + "_1", p.defaultValue[1], p.minValue[1], p.maxValue[1]);
        }

        protected function add_float3(p:ShaderParameter):void
        {
            add_text(p.name + " (" + p.type + ")");
            add_slider(p.name + "_0", p.defaultValue[0], p.minValue[0], p.maxValue[0]);
            add_slider(p.name + "_1", p.defaultValue[1], p.minValue[1], p.maxValue[1]);
            add_slider(p.name + "_2", p.defaultValue[2], p.minValue[2], p.maxValue[2]);
        }

        protected function add_float4(p:ShaderParameter):void
        {
            add_text(p.name + " (" + p.type + ")");
            add_slider(p.name + "_0", p.defaultValue[0], p.minValue[0], p.maxValue[0]);
            add_slider(p.name + "_1", p.defaultValue[1], p.minValue[1], p.maxValue[1]);
            add_slider(p.name + "_2", p.defaultValue[2], p.minValue[2], p.maxValue[2]);
            add_slider(p.name + "_3", p.defaultValue[3], p.minValue[3], p.maxValue[3]);
        }

        protected function add_int(p:ShaderParameter):void
        {
            add_text(p.name + " (" + p.type + ")");
            add_slider(p.name + "_0", p.defaultValue[0], p.minValue[0], p.maxValue[0] ,1);
        }

        protected function add_int2(p:ShaderParameter):void
        {
            add_text(p.name + " (" + p.type + ")");
            add_slider(p.name + "_0", p.defaultValue[0], p.minValue[0], p.maxValue[0] ,1);
            add_slider(p.name + "_1", p.defaultValue[1], p.minValue[1], p.maxValue[1] ,1);
        }

        protected function add_int3(p:ShaderParameter):void
        {
            add_text(p.name + " (" + p.type + ")");
            add_slider(p.name + "_0", p.defaultValue[0], p.minValue[0], p.maxValue[0] ,1);
            add_slider(p.name + "_1", p.defaultValue[1], p.minValue[1], p.maxValue[1] ,1);
            add_slider(p.name + "_2", p.defaultValue[2], p.minValue[2], p.maxValue[2] ,1);
        }

        protected function add_int4(p:ShaderParameter):void
        {
            add_text(p.name + " (" + p.type + ")");
            add_slider(p.name + "_0", p.defaultValue[0], p.minValue[0], p.maxValue[0] ,1);
            add_slider(p.name + "_1", p.defaultValue[1], p.minValue[1], p.maxValue[1] ,1);
            add_slider(p.name + "_2", p.defaultValue[2], p.minValue[2], p.maxValue[2] ,1);
            add_slider(p.name + "_3", p.defaultValue[3], p.minValue[3], p.maxValue[3], 1);
        }

        // TODO, matrix, matrix4x4...
    }
}

Pixel Bender Explorer application:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="vertical" xmlns:shader="sk.yoz.shader.*"
    creationComplete="shadersService.send();" width="620" height="650"
    paddingTop="10" paddingRight="10" paddingBottom="10" paddingLeft="10"
    backgroundGradientColors="{[0xffffff, 0xffffff]}">
<mx:Script>
<![CDATA[
    import sk.yoz.shader.ShaderLoader;

    [Embed(source="../assets/img.jpg")]
    public static const IMAGE_CLASS:Class;

    [Bindable]
    private var loader:ShaderLoader = new ShaderLoader();
]]>
</mx:Script>
<mx:HTTPService id="shadersService" url="shaders.xml" />
<mx:HBox width="100%">
    <mx:CheckBox id="useFilter" selected="true"/>
    <mx:ComboBox id="combo" editable="true"
        close="{loader.load(String(combo.value))}"
        enter="{loader.load(String(combo.value))}"
        dataProvider="{shadersService.lastResult.data.shader}" width="510"/>
    <mx:Button label="Load" click="{loader.load(String(combo.value))}"/>
</mx:HBox>
<mx:HBox width="100%" height="100%">
    <mx:Image source="{IMAGE_CLASS}"
        filters="{useFilter.selected ? explorer.shaderFilters : []}"/>
    <mx:Canvas width="100%" height="100%" verticalScrollPolicy="auto">
        <shader:ShaderExplorer id="explorer" shader="{loader.shader}"
            height="100%" />
    </mx:Canvas>
</mx:HBox>
</mx:Application>