このページの本文へ

PROGRAMMING 古籏一浩のJavaScriptラボ第3回

PhotoshopのフィルターをJavaScriptで作る!

2009年07月20日 12時36分更新

古籏一浩

  • この記事をはてなブックマークに追加
本文印刷

オリジナルフィルターなら「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も追加できる。スライダーをドラッグするとリアルタイムに画像が変化する
手軽にUIも追加できる。スライダーをドラッグするとリアルタイムに画像が変化する

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

■関連サイト

Web Professionalトップへ

この連載の記事

一覧へ
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く