PixelBenderToolkit_Flex

PixelBenderToolkit

アプリケーションは単純なもので、画面上に画像、下にシェーダーのソース、右に各種入力パラメータが一覧されます。

なお、シェーダー自身は拡張子「pbk」のテキストファイルにて記載します。日本語はUTF-8でもShiftJISでもいずれも文字化けしましたのでコメント類は英語で書くのがよいでしょう。

シェーダーの書式

「test.pbk」というのを作るとします。以下は、入力パラメータinValの値を0.0〜1.0に変化させることで白に近づける、という単純なものです。

<languageVersion: 1.0;>

kernel test
<   namespace : "AIF";
    vendor : "Yutaka Yoshisaka";
    version : 1;
    description : "Adobe Pixel Bender Toolkit test";
>
{
    //------------------------------------------//
    // 入力パラメータ                           //
    //------------------------------------------//
    parameter float inVal;      // 独自に指定できるfloat値

    //------------------------------------------//
    // in/outの指定                             //
    //------------------------------------------//
    input image4 src;           // 入力画像
    output float4 dst;          // 出力するピクセル色

    //------------------------------------------//
    // 1ピクセルでの色を計算して渡す            //
    //------------------------------------------//
    void evaluatePixel()
    {
        float fVal1, fVal2;
        
        // 入力色
        // outCoord()にてピクセル位置を表す
        float4 inputColor = sampleNearest(src, outCoord());
        
        fVal1 = inVal;
        fVal2 = 1.0 - inVal;
        
        dst.rgb = fVal2 * inputColor.rgb + fVal1;
        dst.a   = 1.0;
    }
}

コメントの記載について

// 何かコメント

で１行コメント、

/*
  何かコメント
 */

にて複数行コメントです。

全体のくくり

<languageVersion: 1.0;>

kernel test
<   namespace : "AIF";
    vendor : "Yutaka Yoshisaka";
    version : 1;
    description : "Adobe Pixel Bender Toolkit test";
>
{
    中身の記述
}

「<languageVersion: 1.0;>」は一番はじめのほうに呪文のごとく記載、「kernel」の後にファイル名と同じ文字列（ここではtest）を指定します。

「＜ ... ＞」の中で、ネームスペース（何でも指定できる？まだ未調査です）、ベンダー名、バージョン、説明文、を記載しています。

その後、全体を｛ ... ｝で囲ってます。書式としてはC言語っぽいです。

入力パラメータ

Flexから呼ぶ場合の入力情報は、

parameter float inVal;
parameter float2 posA;

のように「parameter 型名 変数名;」の指定をします。これにより、独自パラメータをシェーダーに渡しての計算に利用できます。

parameter float2 posA
<
    minValue:float2(0.0, 0.0);
    maxValue:float2(1024.0, 1024.0);
    defaultValue:float2(0.0, 0.0);
};

のように、minValueで最小値、maxValueで最大値、defaultValueでデフォルト値を指定できます。

型としては以下のようなものを指定できます。

また、配列の変わりにfloat2/float3/float4などが指定できます。

スクリーン位置を渡す場合はfloat2を使って

parameter float2 screenPos
<
    minValue:float2(0.0, 0.0);
    maxValue:float2(1024.0, 1024.0);
    defaultValue:float2(0.0, 0.0);
};

三次元位置や色のRGBを指定する場合はfloat3を使って

parameter float3 vColor
<
    minValue:float3(0.0, 0.0, 0.0);
    maxValue:float3(1.0, 1.0, 1.0);
    defaultValue:float3(0.0, 0.0, 0.0);
};

のようにするといいかもしれません。

float2/float3/float4はVector型と呼ばれ、各要素はxyzwまたはrgbaの名称で取得できます。

parameter float3 vColor
<
    minValue:float3(0.0, 0.0, 0.0);
    maxValue:float3(1.0, 1.0, 1.0);
    defaultValue:float3(0.0, 0.0, 0.0);
};

のようにパラメータを定義した場合は、

float rVal, xVal;
rVal = vColor.r;
xVal = vColor.x;

のどちらでも同じ値が取得できることになります。

入力画像

input image4 src;

のように指定すると、「src」という名称でFlexからBitmapDataを渡すことが可能になります。複数指定する場合は、複数を記載するようにしてください。

input image4 src;
input image4 src2;

FlexでのBitmapDataはRGBA各8ビット（1バイト）で表現されますが、Pixel Bender上ではこれが0.0〜1.0の小数値で管理されています。

画像からのピクセル色の取得については後述します。

出力色

シェーダーの計算は「evaluatePixel」という関数にて行われ、出力する情報は1ピクセルにおける色をあらわすrgbaになります。

output float4 dst; 

と記載すると、「evaluatePixel」関数の最後に

dst.r = Red値;
dst.g = Green値;
dst.b = Blue値;
dst.a = Alpha値;

を指定することで、「outCoord()」（これはfloat2となります）の位置の色を返すことになります。

evaluatePixel関数

ピクセル色の計算は「evaluatePixel」関数にて記載します。「output float4 dst;」と記載した場合は、このdstに対してrgba情報を返してあげます。

 void evaluatePixel()
 {
     float fVal1, fVal2;
        
     // 入力色
     // outCoord()にてピクセル位置を表す
     float4 inputColor = sampleNearest(src, outCoord());
        
     fVal1 = inVal;
     fVal2 = 1.0 - inVal;
        
     dst.rgb = fVal2 * inputColor.rgb + fVal1;
     dst.a   = 1.0;
 }

使用するローカルな変数はfloat/float2/float3/float4/intなどが使えます。

「outCoord()」が処理しているピクセル位置を表します。「outCoord().x, outCoord().y」がXY位置です。

「sampleNearest(src, outCoord());」にて第一引数にて指定した入力画像から、第二引数で指定した位置のピクセル色を取得しています。戻り値としてはfloat4型で、それぞれrgbaにてアクセスできます。

「sampleNearest」は線形補間を行わない画像からの色取得関数、「sampleLinear」とすると、線形補間を行った色取得を行います。

dst.rgb = fVal2 * inputColor.rgb + fVal1;
dst.a   = 1.0;

にてピクセル色を計算して返しています。値は0.0〜1.0を返すようにしてください。また、「inputColor.rgb」のようにすると、これはfloat4からfloat3の要素をまとめて取り出すことになります。

上記を展開すると、以下と同義になります。

dst.r = fVal2 * inputColor.r + fVal1;
dst.g = fVal2 * inputColor.g + fVal1;
dst.b = fVal2 * inputColor.b + fVal1;
dst.a   = 1.0;

それぞれr/g/b/aが、Red値/Green値/Blue値/Alpha値を表しています。

上の例の場合は、inValの値が1.0に近づくことで白になっていく、という単純なシェーダーを実現しているのがわかるかと思います。

シェーダーの役割とイメージ

シェーダー機能は以下のような概念を想像するとわかりやすいかもしれません。

「outCoord()」は計算するピクセル位置を表し、「outCoord().x, outCoord().y」が実際のXY位置になっています。この位置のピクセル色をevaluatePixel関数で計算して、「output float4 dst;」のように指定したVector型に結果を返すと反映されます。

これが、描画領域の全ピクセルにて並列して呼ばれる（かどうかはわかりませんが）、といった仕組みになっていそうです。

使えない機能

以下の機能は、PixelBender1.5にて使えない（pbjファイル変換ではサポートされていない）機能になります。

• 関数の使用
• 配列の使用
• ループ（for）の使用