- Basic 3D that runs native. It is much faster and lightweight, a perfect choice for simple 3D effects that you might have used After Effects for in the past. In Flash CS4 you can create 3D motion presets and use them dynamically on clips. Tutorials on this to come...
- Read and write audio data to the sound card in realtime.
- The other stuff from the release notes...
- And custom filters with Pixel Bender!
In this tutorial, I'm just going to run through the basics of getting bootstrapped with Flash Player 10, Adobe Pixel Bender, and applying it to streaming video. This Flash SWF needs Flash Player 10 to be displayed properly.
Targeting Flash Player 10 From Flex
This is rather straight forward and I just followed this set of instructions. Here is a brief summary.
- Download the latest Flex 3/4 SDK here
- Open the Flex Builder or Eclipse preferences, select the 'Flex' tab and switch your 'Installed Flex SDK' to point to the latest version of the Flex SDK that you just downloaded.
- In the folder you installed (ie copied the downloaded SDK to...) find and open "frameworks / flex_config.xml"
- Find the following XML elements and replace them with the following...
<target-player>10.0.0</target-player>
<external-library-path>
<path-element>libs/player/10/playerglobal.swc</path-element>
</external-library-path>
<library-path>
<path-element>libs</path-element>
<path-element>libs/player/10</path-element>
<path-element>locale/{locale}</path-element>
</library-path>
- Open the properties of your current Flex project, select 'Flex Compiler" and change the "Required Flash Version" to 10.0.0
Pixel Bender Basics
If you are familiar with shader languages like GLSL, the Pixel Bender filter language should be very familiar. The default filter looks as follows...
<languageVersion : 1.0;>
kernel NewFilter
< namespace : "Your Namespace";
vendor : "Your Vendor";
version : 1;
description : "your description";
>
{
input image4 src;
output pixel4 dst;
void
evaluatePixel()
{
dst = sampleNearest(src,outCoord());
}
}
The concept here is very simple, the evaluatePixel function is run on every pixel of the current image and you are given control of how each that pixel is rendered. In rendering your output pixel, you can take into consideration surrounding pixels and changing parameters from your application. src is an image4 which represents the current image we are running the filter on. The function sampleNearest takes the src image and a coordinate, and returns a float4 (4 floats representing the basic channels red, green, blue, alpha). The dst is the pixel (or float4) we are outputting. The outCoord function return a float2 which represents the pixel location we are currently looking at.
The other concept to be familiar with is taking in parameters to your evaluation. This is done by adding...
parameter float radius
< minValue:float(0.0);
maxValue:float(10.0);
defaultValue:float(5.0);
>;
We now have a float called 'radius' that will be taken as input and used to determine how we render each pixel.
Aside from these, you have all your typical math operations (mod, pow, etc) and considering the coolest filters are just big math algorithms, this is pretty sufficient for most things.
Example Pixel Bender Filter
HexCells - By Petri Leskinen
My Example
/*
Cary Dunn - cdunn@elctech.com
Pixel Bender Test
*/
package com.elctech
{
import flash.display.MovieClip;
import flash.display.Shader;
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.events.*;
import flash.filters.*;
import flash.net.*;
import flash.media.Video;
import flash.media.Camera;
public class FilterTest extends MovieClip {
[Embed(source="../assets/dotz.pbj", mimeType="application/octet-stream")]
protected var CrystalizeFilter:Class;
private var test_shader:Shader;
private var test_shader_filter:ShaderFilter;
private var test_video:Video;
private var ns:NetStream;
private var nc:NetConnection;
private var current_radius:uint = 2;
private var current_spacing:uint = 2;
private static const USE_WEBCAM:Boolean = true;
public function FilterTest() {
(USE_WEBCAM ? initWebcamVideo() : initH264Video());
crystalizeIt();
}
public function set radius(change_to:uint):void {
current_radius = change_to;
crystalizeIt();
}
public function set spacing(change_to:uint):void {
current_spacing = change_to;
crystalizeIt();
}
private function crystalizeIt():void {
test_shader = new Shader(new CrystalizeFilter());
test_shader.data.fillColor.value = [0,0,0,0];
test_shader.data.radius.value = [current_radius];
test_shader.data.spacing.value = [current_spacing];
test_shader_filter = new ShaderFilter();
test_shader_filter.shader = test_shader;
test_video.filters = [test_shader_filter];
}
private function initH264Video():void {
test_video = new Video(320,136);
nc = new NetConnection();
nc.connect(null);
ns = new NetStream(nc);
ns.client = new Object();
test_video.attachNetStream(ns);
ns.play("../assets/transporter3-tlr2a_h.mov");
addChild(test_video);
}
private function initWebcamVideo():void {
var cam:Camera = Camera.getCamera();
cam.setMode(640, 480, 30);
cam.setQuality(0, 100);
test_video = new Video(240,180);
test_video.attachCamera(cam);
addChild(test_video);
}
}
}
GPU?
Are Pixel Bender filters run on the GPU or the CPU? Answer...
Note: Pixel Bender Toolkit Preview Release 4 supports filter execution on the GPU and the CPU. Support for software-based rendering is available in this updated preview release.
As of newer releases, Pixel Bender supports a good range of GPUs, but there are some caveats to be aware of and if you are interested I suggest this article.
Hi Cary,
Is it possible that publish the source code of the dotz filter? Or, do you know any good resources on how to create the circles in your filter.
Thanks, Patrick