Ryan Phelan » Effects

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.