オリジナルフィルターなら「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も追加できる。スライダーをドラッグするとリアルタイムに画像が変化する
300
Pixel BenderはGLSL (OpenGL Shading Language)に準拠しているので、Open GL関連のサイトが参考になります。オリジナルのフィルター作成に興味のある方は、こちらも試してみるといいでしょう。
