PixelBender: May the force be with it!

The release of FP 10 has brought us some really big features. One of the greatest things, in my opinion, is the possibility of including custom native filters. I am currently doing some research on how they could be used for post-processing effects in Flash-based games.

First result here. Click on image in the demo to start effect (FP 10 needed).

Update

PixelBender Kernel

<languageVersion : 1.0;>
kernel HorizontalAverage
<
namespace:          "com.impossiblearts";
vendor:             "Hannes Moser";
version:            1;
description:        "damped sin-wave depending on time";
>
{
input image4 source;
output pixel4 result;

const float pi = 3.14;

parameter float2 pos
<
minValue:float2(0.0, 0.0);
maxValue:float2(2880.0, 2880.0);
defaultValue:float2(225.0, 125.0);
>;

parameter float amount
<
minValue:0.001;
maxValue:0.1;
defaultValue:0.01;
>;

parameter float wavelength
<
minValue:0.0;
maxValue:1.0;
defaultValue:0.7;
>;

parameter float damping
<
minValue:0.0;
maxValue:1.0;
defaultValue:0.5;
>;

parameter float maxradius
<
minValue:0.1;
maxValue:2880.0;
defaultValue:200.0;
>;

parameter float t
<
minValue:0.0;
maxValue:10.0;
defaultValue:0.0;
>;

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

float wlength = 1.0 - wavelength;
float dist = distance(pos, coord);
float curve = sin(dist * wlength - t * pi) / (amount * dist * wlength);
float distDamping = max(dist / maxradius, 1.0);
float2 cw = coord + (curve * distDamping);

result = sampleNearest(source, cw);
}
}

AS (extended from lee brimelow’s gotoandlearn example)

package
{
import caurina.transitions.Equations;
import caurina.transitions.Tweener;

import flash.display.Bitmap;
import flash.display.Shader;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.filters.ShaderFilter;
import flash.net.URLLoader;
import flash.net.URLLoaderDataFormat;
import flash.net.URLRequest;

// swf metadata
[SWF(width="450", height="250", backgroundColor="#000000", framerate="60")]

public class NativePostProcessing extends Sprite
{
[Embed(source="starwars_tfu.jpg")]
private var image:Class;

private var loader:URLLoader;
private var shader:Shader;
private var filter:ShaderFilter;
private var im:Bitmap;

public function NativePostProcessing()
{
im = new image() as Bitmap;
addChild(im);
loader = new URLLoader();
loader.dataFormat = URLLoaderDataFormat.BINARY;
loader.addEventListener(Event.COMPLETE, onFilterLoad);
loader.load(new URLRequest("filters/waves.pbj"));
}

private function onFilterLoad(ev:Event):void
{
shader = new Shader(loader.data);
shader.data.pos.value = [225, 85];
shader.data.amount.value = [0];
shader.data.wavelength.value = [0.2];
shader.data.damping.value = [0.5];

// start effect onclick
stage.addEventListener(MouseEvent.CLICK, this.startEffect);
}

private function startEffect(ev:MouseEvent):void
{
Tweener.addTween(this, { waveTime:6, time:1.5, transition:Equations.easeNone, onComplete:resetValues });

Tweener.addTween(this, { wavelength:0.9, time:1.3, transition:Equations.easeOutQuart });

Tweener.addTween(this, { amount:2, time:0.7, transition:Equations.easeNone });
Tweener.addTween(this, { amount:0, time:0.35, delay:0.9, transition:Equations.easeInOutQuint });

addEventListener(Event.ENTER_FRAME, this.update);
}

private function resetValues():void
{
waveTime = 0;
amount = 0.0;
wavelength = 0.2;
}

public var waveTime:Number = 0;
public var amount:Number = 0.0;
public var wavelength:Number = 0.2;

private function update(ev:Event):void
{
shader.data.t.value = [waveTime];
shader.data.amount.value = [amount];
shader.data.wavelength.value = [wavelength];

filter = new ShaderFilter(shader);
im.filters = [filter];
}
}
}

Flex – ActionScript project

Attention: You need Tweener to compile this files.