Ryan Phelan » Pixel Bender

360|Flex Indy Slides

Ryan — Fri, 22 May 2009 05:45:43 +0000

The slides from my presentation on Pixel Bender at 360|Flex Indianapolis are available here. Thanks to those who attended, and thanks to Tom and John for putting on another great conference.

I'm not a big fan of just zipping up all my source files and tossing out a download link because without some context, sample code isn't generally very useful. Instead, I'll be doing several blog posts over the next few weeks with some detailed explanation to go with the code, so keep checking back.

If you have any questions about the material I presented, or just Pixel Bender or Flex in general, send them over. I'd love to help.

Pixel Bender Blend Modes

Ryan — Tue, 19 May 2009 16:39:51 +0000

In preparation for my Pixel Bender talk at 360Flex I wanted to create an example which shows how to use Pixel Bender shaders as blend modes, so I went ahead and whipped together 20 blend shaders: Darken, Multiply, Color Burn, Linear Burn, Lighten, Screen, Color Dodge, Linear Dodge (Additive), Overlay, Soft Light, Hard Light, Vivid Light, Linear Light, Pin Light, Difference, Exclusion, Interpolation, Invert, Quadratic, and Subtract.

You'll notice there is some overlap with the set that are natively available in flash.display.BlendMode, but I thought it would be pretty educational to see how these shaders are written Pixel Bender. I have yet to test to see if there is a significant performance difference.

Application - Source

The formulas behind these blend modes were pretty easy to find. I got them from a combination of http://www.pegtop.net/delphi/articles/blendmodes, http://dunnbypaul.net/blends/, wikipedia and the Flash docs.

One topic I wasn't able to find much documentation on was how to handle alpha channels for the various blend modes. It gets complicated if both layers have transparency, and I'm not sure if there is a standardized way of computing the resulting alpha. So for these examples the alpha is simply set to that of the input image. This means that these blend modes work perfectly for opaque images, but vary from what you might see in photoshop when transparency is involved. If anyone has any good resources on the topic or would like to contribute to this effort, let me know in the comments.

BendPixels

Ryan — Mon, 24 Nov 2008 15:04:02 +0000

BendPixels is a library by Mrinal Wadhwa which makes it possible to tween Pixel Bender filters using Flex's mx.effects library. I finally got a chance to play with this and it really is pretty cool. You can check out a demo here. It is capable of tweening arbitrary shaders, and has wrappers for several popular effects from Adobe's Pixel Bender Exchange. I am flattered that my very own Zoom Blur effect has been included.

My only criticism is that Flex effects in general tend to have lackluster performance. I frequently use libraries like TweenLite instead. Can TweenLite play nicely with Pixel Bender effects? Of course. I'll do an example of that sometime this week.

Spotlight Pixel Bender Filter

Ryan — Tue, 28 Oct 2008 15:18:53 +0000

This is an advanced filter which renders dynamic colored lighting on a display object in Flash. Consider it a work in progress — It's not as full featured as Photoshop's "Lighting Effects" filter, but it is capable of creating a wide array of effects. The kernel's main algorithm was ported from NVIDIA's Shader Library, but I had to make some pretty heavy modifications to make it more functional for the Flash world. It has 8 parameters: ambientColor, angle, azimuth, coneAngle, distance, intensity, position, and spotColor.

ambientColor - color to apply to all pixels of the image
angle - angle at which the spotlight is projected (in degrees)
azimuth - angle between the image plane and the spotlight (in degrees)
coneAngle - angle of the spotlight's "opening" (in degrees)
distance - distance from the spotlight to the center point
intensity - intensity of the spotlight
position - x, y, z position of the spotlight
spotColor - color of the spotlight

There are so many different ways that you could use this effect, I will probably devote a few more posts to showing additional examples. In this demo, I created a couple of draggable handles that you can use for positioning the spotlight, and some preset configurations (try the dawn, day, and dusk buttons). Next time, I'll incorporate some animation.

Application - Source

Magnify Pixel Bender Filter

Ryan — Mon, 20 Oct 2008 14:27:01 +0000

The "Magnify" effect is an age old Flash trick that we used to accomplish using two images and some clever masking. This pixel shader can achieve the same effect with less code, only 1 image, and has a few new tricks up its sleeve. It magnifies a circular section of an image and optionally creates a smooth transition between the magnified and unmagnified areas. The four parameters are center, outerRadius, innerRadius, and magnification.

center ([0-2048, 0-2048]) - the center coordinates of the magnified area
outerRadius (0-500) - the radius of the magnified part of the image
innerRadius (0-500) - the radius of the fully magnified part of the image
magnification (1-50) - the amount to magnify the image by (e.g. set to 2 for a 2x magnification)

Note that the ranges specified above are just the recommendations from the .pbk file, you can set these values to whatever you want in your application.

Take some time and play around with the settings, it is possible to acheive a several different effects. If innerRadius is 0, it creates a "bubble". If it is higher than outerRadius, then you get a hard edged circle. In this demo, I disabled values between 0 and 1 for magnification because they can create some strange side effects, but if you are careful you can use fractional magnifications to create a "pinch" type effect.

Application - Source

Zoom Blur Pixel Bender Filter

Ryan — Fri, 17 Oct 2008 15:58:16 +0000

Zoom Blur does a 15 level zoom and blur about a specified focus point, and could be very useful for transition effects. Its two properties are amount and center.

amount (0 - 0.5) - the amount of blur to apply
center ([0 - 2048, 0 - 2048]) - the focal point of the blur

Application - Source

*Note: This application requires Flash Player 10

Photo courtesy of my talented and beautiful girlfriend, Bre Gehrken.

Sharpen Pixel Bender Filter

Ryan — Fri, 17 Oct 2008 15:03:50 +0000

The Sharpen filter is similar to Photoshop's, it increases the apparant sharpness/definition of an image. It has two parameters: amount and radius.

amount (0 - 20) - the amount to sharpen the image by
radius (0 - 1) - pixel distance to sample from

Application - Source

*Note: This application requires Flash Player 10

Photo courtesy of stock.xchng

Wave Reflection Pixel Bender Filter

Ryan — Thu, 16 Oct 2008 20:30:22 +0000

Wave Reflection creates the effect of moving water over the surface of an image. It differs from other wave and ripple effects in that it can be animated in a loop to create continuous ambient motion, and the ripples are not uniformly distributed across the image - they become more exaggerated towards the bottom. The three parameters are amplitude, frequency, and progress.

amplitude (0-1) - the height of the waves
frequency (0-.54) - how close together the waves are. Higher value = more waves.
progress (0-1) - percentage of the wave sequence. Animate from 0 to 1 to get a smooth wave effect.

This was my first go at a Pixel Bender filter, let me know what you think. I've got a couple more in the works, so check back soon.

Application - Source

*Note: This application requires Flash Player 10

Photo courtesy of stock.xchng