オリジナルフィルターなら「Pixel Bender Toolkit」が速い！

Pixel Bender ToolKit

　JavaScriptを使ったフィルター処理はおもしろいけど、時間がかかりすぎてあまり実用的じゃないな……と感じた方も少なくないかもしれません。

　昨年末にリリースされた「Adobe Creative Suite 4（CS4）」には、オリジナルのフィルターを作成・適用できる専用ツール「Pixel Bender Toolkit」が付属しており、画像処理に特化したスクリプト言語「Pixel Bender」を使ってより手軽にフィルターを自作できます。Pixel BenderならJavaScriptでは数分かかる処理もあっという間です。

　たとえば、今回JavaScriptで作成したフィルターと同じ処理をPixel Benderで書くと以下のようになります（サンプル03）。RGBそれぞれの値を読み出して、輝度を変更してから書き戻しています。

●サンプル03のソースコード

<languageVersion : 1.0;>
kernel NewFilter
<   namespace : "KFuRuhata";
vendor : "OpenSpace";
version : 1;
description : "Red Filter";
>
{
input image4 src;
output pixel4 dst;
void
evaluatePixel()
{
float4 inputColor = sampleNearest(src, outCoord()); 
dst.g = 0.5 * inputColor.g;
dst.b = 0.5 * inputColor.b;
dst.r = 2.0 * inputColor.r;
dst.a = inputColor.a; 
}
}

サンプル03を実行すると今回作成したフィルターと同じ効果がリアルタイムに反映される

　Pixel Benderは、手軽にUI (ユーザーインターフェース) も記述できます。上のサンプルに、

parameter float strength
<
minValue: float(0.0);
maxValue: float(4.0);
defaultValue : float(2.0);
>;

を追加するだけで右側の画面領域に自動的にスライダーが表示されます（サンプル04）。スライダーをドラッグするとリアルタイムで画像フィルターが反映され、[File]メニューから[Save Image As...]を選択すれば画像を保存できます。

●サンプル04のソースコード

<languageVersion : 1.0;>
kernel NewFilter
<   namespace : "KFuRuhata";
vendor : "OpenSpace";
version : 1;
description : "Red Filter";
>
{
input image4 src;
output pixel4 dst;
parameter float strength
<
minValue: float(0.0);
maxValue: float(4.0);
defaultValue : float(2.0);
>;
void
evaluatePixel()
{
float4 inputColor = sampleNearest(src, outCoord()); 
dst.g = 0.5 * inputColor.g;
dst.b = 0.5 * inputColor.b;
dst.r = strength * inputColor.r;
dst.a = inputColor.a; 
}
}

手軽にUIも追加できる。スライダーをドラッグするとリアルタイムに画像が変化する

　Pixel BenderはGLSL (OpenGL Shading Language)に準拠しているので、Open GL関連のサイトが参考になります。オリジナルのフィルター作成に興味のある方は、こちらも試してみるといいでしょう。