Over the last weekend I spent hours reading and researching about Pixel Bender. I'm contradicting myself a bit from my last post, since i didn't touch anything that is MVC related.
I wanted to give it a go and create my first Pixel Bender Filter, so that I could implement it in my AS3 class (the one shown below).
Pixel Bender syntax is a bit different from AS3, and has some limitations.
The ideas i've got for the filters i'd like to apply on my application are pretty simple, nothing pretentious or extreme: a polaroid-like filter, a nostalgic vintage filter and a double exposure filter, to name a few.
To start with Pixel Bender I had to look at existing filters and tweak them a bit, to see what results are taking effect when modifying the code. Pixel Bender samples and modifies a single pixel from an input image, then applies the 'pixel effect' to the rest of the pixels in a photo. The bad news is PB does not allow any loops when exporting files to Flash, however you can create interesting filters which you can apply to your flash movies or images.
There's an amazing feature within PB which allows you to create parameters. One can develop these and then modify whatever effect you've created by making use of slide bars!
I've created a very "innocent" filter, that i haven't applied to my AS3 class (yet).
hours later.....
I've finally managed to implement a filter onto my AS3 class. The process was just a tiny bit complicated as I had never worked with 'Shaders' before.
Shader belongs to the flash.display package, a Shader represents a shader Kernel from Pixel Bender. ShaderFilter belongs to the flash.filters package. This class applies a filter by executing a Shader and affects the object being filtered.
To make the filtering happen, I had to load the filter file (from PB), using the URLLoader (flash.net package). Pixel bender filters are BINARY data, so this has to be specified too.
Once the filter has been loaded, it listens for an Event and here is where the magic happens...
The 'shaderVar' variable is my Shader (the PB Kernel), i needed to pass the binary data the loader has imported (previously assigned within the load function). Then I made a new filter and assigned the shaderVar (that already contains the binary data).
The new 'filter' is the one i'm going to assign to my image.
The 'bitMap' variable is the image the video captures when a user clicks on the "capture" button (this one already contains the video data), so by adding the property "filters" we can assign the filter we have created (it's like adding any other built in filter).
One of problems I had was to actually understand why I had to use squared brackets for [filter], this is because it's expecting an array.
The final result of applying a filter is the following:
 |
| The right image is the one the camera shows. The left image is the result, with a filter added automatically after the capture. |
No comments:
Post a Comment