13
Jan
08

Blend Modes CIFilter

I’ve been investigating different ways of implementing various blending and compositing effects with a single filter patch. I initially began by converting some HLSL code I found that emulated the standard Photoshop layer blend modes, then discovered a list of alternative methods in the GLSL Orange Book. I got half-way through typing these into a CI Filter patch, when it occured to me that I could just as easily use the JavaScript option to apply the builtin system blend modes, like so:

CIKernel Code (top panel):

/*
Fades alpha of image.
*/
kernel vec4 alphaFade(sampler image, float Opacity)
{
vec4 pix =  sample(image, samplerCoord(image));
pix.a = pix.a * Opacity;
return pix;
}

JavaScript (bottom panel):

function __image main(__image Image, __image Background_Image, __index Mode, __number Opacity) {
// RIO, DOD
function myROIFunction(samplerIndex, dstRect, info) {
return dstRect;
}
// Dimensions of top image
var Width = Image.extent.width;
var Height = Image.extent.height;
var dodRect = new Vec(0.0, 0.0, Width, Height);

// Set opacity of top image
alphaFade.ROIHandler = myROIFunction;
Foreground_Image = alphaFade.apply(dodRect, dodRect, Image, Opacity);

// Set blend mode from Mode index
switch(Mode) {
case 0:
// Normal (Foreground and Background reversed, for some reason)
var result = Filter.CISourceOverCompositing(Foreground_Image, Background_Image);
break;
case 1:
// Darken
var result = Filter.CIDarkenBlendMode(Background_Image, Foreground_Image);
break;
case 2:
// Multiply
var result = Filter.CIMultiplyBlendMode(Background_Image, Foreground_Image);
break;
case 3:
// Color Burn
var result = Filter.CIColorBurnBlendMode(Background_Image, Foreground_Image);
break;
case 4:
// Lighten
var result = Filter.CILightenBlendMode(Background_Image, Foreground_Image);
break;
case 5:
// Screen
var result = Filter.CIScreenBlendMode(Background_Image, Foreground_Image);
break;
case 6:
// Color Dodge
var result = Filter.CIColorDodgeBlendMode(Background_Image, Foreground_Image);
break;
case 7:
// Add
var result = Filter.CIAdditionCompositing(Background_Image, Foreground_Image);
break;
case 8:
// Overlay
var result = Filter.CIOverlayBlendMode(Background_Image, Foreground_Image);
break;
case 9:
// Soft Light
var result = Filter.CISoftLightBlendMode(Background_Image, Foreground_Image);
break;
case 10:
// Hard Light
var result = Filter.CIHardLightBlendMode(Background_Image, Foreground_Image);
break;
case 11:
// Difference
var result = Filter.CIDifferenceBlendMode(Background_Image, Foreground_Image);
break;
case 12:
// Exclusion
var result = Filter.CIExclusionBlendMode(Background_Image, Foreground_Image);
break;
case 13:
// Hue
var result = Filter.CIHueBlendMode(Background_Image, Foreground_Image);
break;
case 14:
// Saturation
var result = Filter.CISaturationBlendMode(Background_Image, Foreground_Image);
break;
case 15:
// Color
var result = Filter.CIColorBlendMode(Background_Image, Foreground_Image);
break;
case 16:
// Luminosity
var result = Filter.CILuminosityBlendMode(Background_Image, Foreground_Image);
break;
}

// Output
return result;
}

The order of the modes in the list is based on the order they’re listed in the Photoshop Layer Blend Mode menu (though there isn’t an equivalent to all the Photoshop modes, as far as I can tell). I thought it made more sense to list them this way, rather than alphabetically, as the order in PS is based on the visual effect of each mode.

The ‘Labelled Indices’ Splitter patch option lets me create a named list of the available options, which is a nice touch, I think.

Blend Modes CIFilter

Obviously, this won’t work in Tiger, so I’ll probably complete the Orange Book-based one too, for downward-compatibility.

Advertisements

2 Responses to “Blend Modes CIFilter”


  1. 1 Marc
    January 14, 2008 at 6:58 pm

    Shouldn’t you un-premultiply and re-premultiply the pixel value in alphaFade?

  2. 2 toneburst
    January 14, 2008 at 7:31 pm

    Hi Marc…

    I don’t usually un-premultiply and premultiply in my filter kernels. I probably should, though…
    It seems to work OK with out doing this; what are the advantages?

    alx


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


Twitter

Error: Twitter did not respond. Please wait a few minutes and refresh this page.

January 2008
M T W T F S S
« Dec   Feb »
 123456
78910111213
14151617181920
21222324252627
28293031  

Links

Blog Stats

  • 476,450 hits

%d bloggers like this: