Lee Brimlow has two really good video tutorials that will help you get over the hump of learning pixel bender – so I won’t repeat those. Check them out below!
Learn Pixel Bender
Putting Filters into Flash 10
But in this post, I’ll give you a ton of pixel bender filter algorithms and programs. Keep in mind pixel bender is extremely easy to use and extremely easy to learn!!!
I once took a filters class, never thought I’d ever use it. I was up at 4 this morning going over my old visual basic notes pulling out the algorithms and throwing them into pixel bender – what a dream!
Pixel Bender Point Light Example
Source (tons of filters all the ones shown below and a few more)!
If there is only one reason why there needs to be a new version of Papervision3D (PapervisionX) – it’s pixel bender. These shaders operate at the machine level and bring a level of realism to your 3D that has not yet to be realized on the Web.
Here are a few of those algorithms I promised:
Converting an image from color into shades of gray is one of the simplest image processing task. It’s accomplished by averaging the three color channels and setting each channel to that average. In terms of pixel bender code this is
pixel1 shadeVal=(colorChannel.r+colorChannel.g+colorChannel.b) /3.0;
colorChannel.r = colorChannel.g = colorChannel.b = shadeVal;
Next you’ll create the compliment.
To create the compliment of an image, subtract each pixel color channel from 255 or in the case of pixel bender 1 since rgb values in pixel bender have a value from 0 to 1 which represents (0 to 255). The pixel bender code is shown below:
colorChannel.r = 1.0 – colorChannel.r;
colorChannel.g = 1.0 – colorChannel.g;
colorChannel.b = 1.0 – colorChannel.b;
Next you’ll create the brightness filter.
To add to the brightness of a color you add to each pixel’s component by the percentage increase in brightness times the difference of its compliment. Check out the algorithm below:
colorChannel.r += brightParam*(2.0 – colorChannel.r);
colorChannel.g += brightParam*(2.0 – colorChannel.g);
colorChannel.b += brightParam*(2.0 – colorChannel.b);
Note: A factor of 2 was introduced in the code above instead of 1 (that’s a hack based on visual appeal). Next you’ll create an exposure filter.
Exposure is similar to brightness, but you split your color channel into rgb and alpha and apply a pow function to your rgb color channel.
dst.rgb = pow( colorChannel.rgb, float3(1.0 – exposureParam));
dst.a = colorChannel.a;
Next you’ll create color balance.
Color balance is very similar to brightness except that you adjust each color individually.
colorChannel.r += redParam*(1.0 – colorChannel.r);
colorChannel.g += greenParam*(1.0 – colorChannel.g);
colorChannel.b += blueParam*(1.0 – colorChannel.b);
Next you’ll create binary contrast.
Contrast measures the difference between two colors. Binary contrast adjusts your color values to only two possible values: black or white. In this case, you just calculate the grey scale and convert it to black or white depending on a shade parameter.
colorChannel.r = colorChannel.g = colorChannel.b = 1.0;
colorChannel.r = colorChannel.g = colorChannel.b = 0.0;
Next you’ll create a simple pixelate filter.
Simple pixelate uses the floor function to widen your color box region. It’s really just a trick, but demonstrates a good use of the floor function.
float2 pixelCorner = floor(outCoord()/dimAsFloat);
pixelCorner = dimAsFloat*pixelCorner;
outputPixel = sampleNearest(inputImage, pixelCorner);
Next you’ll create a simple blur filter.
A Blur filter works by including a bit of surrounding pixel color into the color of your current pixel. This is typically accomplished by using some type of weighting function that drops off over distance, such as a Gaussian distribution. You’ll design a simple blur filter using a linear drop off. The algorithm below adds two pixel colors beyond your center pixel and drops off linearly.
color = color + 0.75*color(blurParam/2) + 0.25*color(blurParam)
The algorithm works well for a blurParam from 0 to 10 but then breaks down. To improve it you need to add more terms…but isn’t that always the case. The pixel bender snippet is shown below:
float2 pos = outCoord();
pixel4 color = sampleNearest(src,pos);
color+=0.75*sampleNearest(src, pos+float2(0.5*blurParam, 0))+0.25*sampleNearest(src, pos+float2(blurParam, 0));
color+=0.75*sampleNearest(src, pos-float2(0.5*blurParam, 0))+0.25*sampleNearest(src, pos-float2(blurParam, 0));
color+=0.75*sampleNearest(src, pos+float2(0, 0.5*blurParam))+0.25*sampleNearest(src, pos+float2(0, blurParam));
color+=0.75*sampleNearest(src, pos-float2(0, 0.5*blurParam))+0.25*sampleNearest(src, pos-float2(0, blurParam));
dst = color/5.0;
Next you’ll create an outline sharpen filter.
The sharpen filter is similar to the blur filter in that you must displace the colors (this was created by Ryan Phelan on Adobe pixel bender exchange). But after displacement you must add and subtract them in such a way that you bring out their outlines.
float4 left = sampleLinear(src, coord – float2(radius, 0.0)) * amount;
float4 right = sampleLinear(src, coord + float2(radius, 0.0)) * amount;
float4 top = sampleLinear(src, coord – float2(0.0, radius)) * amount;
float4 bottom = sampleLinear(src, coord + float2(0.0, radius)) * amount;
dst.rgb += (top.rgb);
dst.rgb -= (bottom.rgb);
dst.rgb += left.rgb;
dst.rgb -= right.rgb;
The filter uses two parameters, radius and amount: radius increases the displacement, and amount increases the color.
Next you’ll create a simple point light.
Here’s a very simple light algorithm developed by John Engler of the Adobe pixel bender exchange. The algorithm produces an extremely powerful effect and uses a combination of power and distance calculations. Such a calculation would have been avoided in Flash due to processor constraints, but with pixel bender it’s super fast!
The equation places your light at the center position. That’s because at center position there is a singularity in your equation (coord – center = zero) and everything goes white. The AttnDecay variable determines the spread of your light’s decay across your image. The AttnMult variable just multiplies your light source by a value and the brightness variable exponentiates your entire expression, acting like a brightness term.
Light Attenuation Equation
The pixel bender code snippet is given below:
float2 outcoord = outCoord();
float attn = pow(attnMult/pow(distance(outcoord, center), attnDecay), brightness);
dst = attn* sampleNearest(src, outcoord);
Next you’ll create the bloom brightness effect.
Bloom brightness is used in Away3D and was developed by Der Schmale. It filters the bright parts of the image and caps the darker parts at black.
float4 current = sample(src, outCoord());
if (length(current.xyz) < threshold)
dst = pixel4(0.0, 0.0, 0.0, 1.0);
current.xyz *= exposure;
dst = current;
The code uses two parameters, threshold and exposure. And when your distance is less than your threshold your pixel rgb channels are set to zero. If greater than your threshold, your exposure kicks in. You’ll see this again when you add pixel blender to PV3D.
In the next post, you’ll learn how to add Pixel Bender to PV3D!