On my search for the perfect “shockwave” i played a bit around with damped sin waves and a Gauss curve, but first some words about my first week with PixelBender.

With PixelBender toolkit it is possible to build shaders very fast and easily. It took me less then 10min till i compiled my first shader. One reason is, that in my opinion the code is very intuitional to write and even greater, the code is very compact, f.e. vector and scalar types are doing basic math operations together without a special cast or convertion.

This is great and gives you the motivation for doing more (like i do now). But after playing arount i am going to miss more and more features.

First, the UI is easy to use, but i want to split coding/preview window or at least rearrange it, it’s annoying, even on my 24 inch display, if you are using a test-image greater than 400px in height (windows are tiled horizontal).

Next thing, the FlashPlayer implementation of the filter-runtime is not able to interpret any flow-controls. The only one allowed is a simple if (condition) else condition. So that means, no loops (neither while nor for). I have seen a zoom-blur implementation written with a code redundancy count of 15!!! This definitly sucks.

There are a few more limitations but they will not care you as much as the one i mentioned above.

Biggest wish of mine is, i have read somewhere that this is on the roadmap already(i hope that’s true), to have a low-level tool for compiling PixelBender sources. I am looking forward to build a Eclipse-plugin for writing PB-code and have some elementary “curves” you can drag and drop into it. A standalone-viewer would also be great.

Some words about PixelBender-runtime performance. I have not done soooo much tests with FlashPlayer by now, but my first tests giving me very bad results on images that are a bit greater than your thumb (Ok, i have tried a bigger one with success, but f.e. 800x800px with a simple sin-wave is going mad). On my 2 workstations (very similiar hardware setup) i get strange differences on framerate count. Both are running in GPU mode, but on the first one i am getting a constant framerate of about 60fps, the other PC shows different framerates in a high frequency starting from 150 up to 1500. All this numbers i got with the preview-mode in PixelBender toolkit. If you are going to use a PB-shader with Flash, things get even worse. I got a dramatic drawdawn with my framerates and a high CPU-load one one of my machines.

I think that behaviour means, FlashPlayer is using CPU to calculate the shader instead of GPU? I don’t know by now, so it is very speculative to say something concrete. I hope that it will be possible to recognize a CPU fallback at runtime, so you have at least the chance to turn off your “stunning” effects. I am looking forward to publish more info on this issue soon.

So, enough said about the drawbacks, go on with the interesting part.

For those, which did not read my previous post, i am going to proof if it is possible to have some post-processing in realtime for games with PixelBender. I want to create something like a shockwave with a simple distortion of the image.

PixelBender sources (formula is not optimized)

 <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.14159265358979323846264338327950288;

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

parameter float amount
 <
 minValue:0.0;
 maxValue:10000.0;
 defaultValue:5000.0;
 >;
 parameter float wavelength
 <
 minValue:1.0;
 maxValue:2500.0;
 defaultValue:150.0;
 >;

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

parameter float overlay
 <
 minValue:0.0;
 maxValue:100.0;
 defaultValue:10.0;
 >;

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

float dist = distance(pos, coord);
 float curve = (1.0 / sqrt(1000.0 * PI)) * exp((-1.0/wavelength) * pow(-t + dist, 2.0)) * sin(dist / overlay) * amount;
 float2 cw;
 cw = coord + curve;
 result = sample(source, cw);
 }
 }
 

Continue reading →

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

[as]
<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]

AS (extended from lee brimelow’s gotoandlearn example)

[as]
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];
}
}
}
[/as]

Flex – ActionScript project

Attention: You need Tweener to compile this files.