Pixel Bender について
| ・ | Pixel Bender について |
| ・ | Pixel Bender Toolkit を入手する |
| ・ | 基本的な使い方について |
| ・ | 基本的なスクリプトについて |
| ・ | 変数の型について |
| ・ | ビットマップ関連の機能について |
Pixel Bender について
■ Pixel Bender について
■シェーダーについて
Flash 10 以降から、Shader 機能が追加されました。
ピクセルシェーダーの一種です。画像処理に特化しています。
OpenGL の Fragment Shader と似ています。
■シェーダーの開発言語について
専用の言語（Pixel Bender Language）を使用します。
基本的な文法は、C 言語に近いでしょう。
ピクセルごとに、スクリプトが実行され、最終的な色が決定します。
■シェーダーの開発ツールについて
開発には、Pixel Bender Toolkit を使用します。
このベージでは、ツールの基本的な使い方について解説しています。
■ Pixel Bender を活用する
■ Flash Player で利用する
■ Adobe のツールで利用する
After Effects や Photoshop のプラグインとして利用できます。
Adobe CS6 にて、廃止済みのようです。
Pixel Bender Toolkit を入手する
■ Pixel Bender Toolkit を入手する
Adobe のサイトから、入手できます。
このツールは、Adobe Creative Suite シリーズにも付属しています。
基本的な使い方について
■ Flash 向けの警告とエラーを有効にする
メニューから、「Edit」 → 「Preferences...」を選択します。
設定ダイアログが開きます。
タブから、「Flash Player」を選択します。
「Flash Player Warnings and Errors」にチェックを付けます。
■カーネルを新規作成する
■カーネルを新規作成する
メニューから、「Edit」 → 「New Kernel」を選択します。
■カーネルメタデータを設定する
■カーネル(Kernel) について
カーネルは、フィルタ１つ分に相当します。
■グラフ(Graph) について
グラフは、総合的なフォーマットです。
グラフの中に、複数のカーネルを内包できます。
カーネルの適用順序の設定も可能です。
Flash Player 版では、グラフは使用できません。
■ビルドして動作確認する
右下の「Build and Run」ボタンを押します。
エラーが存在する場合、右側の Output パネルに出力表示されます。
ビルドに成功した場合、左上の画面に結果が描画されます。
パラメータが存在する場合、右側の Editer パネルに UI が表示されます。
■バイトコードファイル(PBJ) を出力する
メニューから、「Edit」 → 「Export Filter for Flash Player...」を選択します。
バイトコードファイル(PBJ) が出力されます。
書式に間違いがある場合、失敗します。
出力されたバイトコードファイルは、Shader クラスで使用します。
基本的なスクリプトについて
■カーネルを宣言する
■言語バージョンを記述する
１行目に、Pixel Bender の言語バージョンを記述します。
バージョン情報
<languageVersion : 1.0;>
■カーネルを宣言する
カーネルの書式は、以下の通りです。
カーネルのシンタックス
kernel カーネル名 < メタデータ > {
メンバー
}
■スケルトンプログラム
スケルトンプログラム
<languageVersion : 1.0;>
// ------------------------------------------------------------
// カーネルを宣言
// ------------------------------------------------------------
kernel MyKernel
<
namespace : "MyNamespace";
vendor : "MyVendor";
version : 1;
> {
// ------------------------------------------------------------
// 入力変数の宣言（ビットマップ）
// ------------------------------------------------------------
input image4 src;
// ------------------------------------------------------------
// 出力変数の宣言（ピクセルカラー）
// ------------------------------------------------------------
output pixel4 dst;
// ------------------------------------------------------------
// パラメータ変数の宣言
// ------------------------------------------------------------
parameter float variable0;
parameter float2 variable1;
// ------------------------------------------------------------
// ピクセルごとに実行される関数
// ------------------------------------------------------------
void evaluatePixel() {
// 現在のピクセル位置を取得する
float2 pos = outCoord();
// 位置を指定して、画像からピクセルカラーを取得する（ニアレストネイバー）
pixel4 color = sampleNearest(src,pos);
// ピクセルカラーを出力する
dst = color;
}
}
■カーネルメタデータについて
メタデータには、以下の値を設定できます。
| 名前 | 型 | 解説 | 必須 |
| namespace | 文字列 | カーネルの名前空間を設定。 | ○ |
| vendor | 文字列 | カーネルのベンダー情報を設定。 | ○ |
| version | 整数値 | カーネルのバージョン値を設定。 | ○ |
| description | 文字列 | カーネルの説明情報を設定。 |
カーネルメタデータを設定する
<languageVersion : 1.0;>
kernel MyKernel
<
namespace : "MyNamespace";
vendor : "MyVendor";
version : 1;
description : "MyDescription";
> {
}
■ evaluatePixel() 関数について
■ evaluatePixel() 関数を宣言する
evaluatePixel() 関数を宣言します。
void evaluatePixel(void)
| 引数 | void | なし |
| 戻り値 | void | なし |
■ evaluatePixel() 関数について
この関数は、ピクセルごとに実行されます。
例えば、(幅:100,高さ:200) ドットのグラフィックに適用するとします。
この場合、関数は、100 * 200 = 20000 回実行されます。
環境によっては、マルチスレッドで並列実行されます。
■現在の位置を取得する
outCoord() 関数を使用します。
evaluatePixel() 関数内から呼び出すと効果があります。
float2 outCoord(void)
| 引数 | void | なし |
| 戻り値 | float2 | 現在の位置が得られる |
フィルタとして動作している場合、得られる結果の小数部は、必ず 0.5 です。
ブレンドとして動作している場合、得られる結果は、常に (0.5 , 0.5) です。
描画スタイルとして動作している場合、シェーダーの座標系はアフィン変換されています。
現在の位置を取得する
<languageVersion : 1.0;>
kernel MyKernel < namespace:""; vendor:""; version:1; > {
// ------------------------------------------------------------
// 変数宣言
// ------------------------------------------------------------
input image4 src;
output pixel4 dst;
// ------------------------------------------------------------
// ピクセルごとに実行される関数
// ------------------------------------------------------------
void evaluatePixel() {
// 現在の位置を取得する
float2 pos = outCoord();
// 水平方向
float x = pos.x;
// 垂直方向
float y = pos.y;
}
}
■現在の位置のピクセルカラーを取得する
こちらで解説しています。
■現在の位置のピクセルカラーを出力する
何もしなかった場合、元のピクセルカラーが、そのまま出力されます。
元のピクセルカラーを取得して、そのまま出力する
<languageVersion : 1.0;>
// ------------------------------------------------------------
// カーネルを宣言
// ------------------------------------------------------------
kernel MyKernel < namespace:""; vendor:""; version:1; > {
// ------------------------------------------------------------
// 入力変数の宣言（ビットマップ）
// ------------------------------------------------------------
// １枚目の入力イメージ（フィルタを適用する直前のグラフィック）
input image4 src;
// ------------------------------------------------------------
// 出力変数の宣言（ピクセルカラー）
// ------------------------------------------------------------
output pixel4 dst;
// ------------------------------------------------------------
// ピクセルごとに実行される関数
// ------------------------------------------------------------
void evaluatePixel() {
// 現在のピクセル位置を取得する
float2 pos = outCoord();
// 位置を指定して、画像からピクセルカラーを取得する（ニアレストネイバー）
pixel4 color = sampleNearest(src,pos);
// ピクセルカラーを出力する
dst = color;
}
}
水平位置ごとに色を加工する
<languageVersion : 1.0;>
// ------------------------------------------------------------
// カーネルを宣言
// ------------------------------------------------------------
kernel MyKernel < namespace:""; vendor:""; version:1; > {
// ------------------------------------------------------------
// 入力変数の宣言（ビットマップ）
// ------------------------------------------------------------
// １枚目の入力イメージ（フィルタを適用する直前のグラフィック）
input image4 src;
// ------------------------------------------------------------
// 出力変数の宣言（ピクセルカラー）
// ------------------------------------------------------------
output pixel4 dst;
// ------------------------------------------------------------
// ピクセルごとに実行される関数
// ------------------------------------------------------------
void evaluatePixel() {
// ------------------------------------------------------------
// 現在のピクセル位置を取得する
// ------------------------------------------------------------
float2 pos = outCoord();
// 垂直位置を取得する
float y = pos.y;
// ------------------------------------------------------------
// 位置を指定して、画像からピクセルカラーを取得する（ニアレストネイバー）
// ------------------------------------------------------------
pixel4 color = sampleNearest(src,pos);
// ------------------------------------------------------------
// 水平位置ごとに色を加工する
// ------------------------------------------------------------
if(y < 100.0){
// 赤色成分以外を暗く
color.g *= 0.2;
color.b *= 0.2;
}else if(y < 200.0){
// 緑色成分以外を暗く
color.r *= 0.2;
color.b *= 0.2;
}else if(y < 300.0){
// 青色成分以外を暗く
color.r *= 0.2;
color.g *= 0.2;
}else if(y < 400.0){
// ベクトルのスケール
color *= 0.5;
}else{
// オフセットカラー
pixel4 offset = pixel4( 0.5 , 0.5 , 0.5 , 0.0); // [赤,緑,青,透過]
// ベクトル同士の加算
color += offset;
}
// ------------------------------------------------------------
// ピクセルカラーを出力する
// ------------------------------------------------------------
dst = color;
}
}
■入力変数（ビットマップ）について
■入力変数について
入力変数からは、ビットマップ関連のデータを取得できます。
ビットマップ情報は、外部から自身に渡されます。
Flash の場合、ShaderData クラスから渡す事ができます。
■入力変数を宣言する
入力変数の宣言の書式は、以下の通りです。
インプットのシンタックス
input イメージ型 変数名;
■指定可能なイメージ型について
input 宣言に続けて、以下の型を指定します。
通常は、image4 型を指定します。
| 型 | 解説 |
| image4 | 透過ありのビットマップイメージ。[赤,緑,青,透過] |
| image3 | 透過なしのビットマップイメージ。[赤,緑,青] |
■複数の入力変数を宣言する
入力変数は、最大４つまで宣言可能です。
入力変数の宣言順番は重要です。
シェーダーの用途によって、割り当ては変化します。
古い Toolkit のプレビューには、不具合があります。
入力変数の宣言順ではなく、名前の昇順でソースが割り当てられます。
複数の入力変数を宣言する
<languageVersion : 1.0;>
// ------------------------------------------------------------
// カーネルを宣言
// ------------------------------------------------------------
kernel MyKernel < namespace:""; vendor:""; version:1; > {
// ------------------------------------------------------------
// 入力変数の宣言（ビットマップ）
// ------------------------------------------------------------
// １枚目の入力イメージ
input image4 src0;
// ２枚目の入力イメージ
input image4 src1;
// ３枚目の入力イメージ
input image4 src2;
// ４枚目の入力イメージ
input image4 src3;
// ------------------------------------------------------------
// 出力変数の宣言（ピクセルカラー）
// ------------------------------------------------------------
output pixel4 dst;
// ------------------------------------------------------------
// ピクセルごとに実行される関数
// ------------------------------------------------------------
void evaluatePixel() {
}
}
■フィルタに適用した場合
こちらで解説しています。
| index | ビットマップの割り当て |
| 0 | 元のグラフィック（フィルタを適用する直前） |
| 1 | １つ目のソース用ビットマップ（外部から渡せる） |
| 2 | ２つ目のソース用ビットマップ（外部から渡せる） |
| 3 | ３つ目のソース用ビットマップ（外部から渡せる） |
■ブレンドに適用した場合
こちらで解説しています。
| index | ビットマップの割り当て |
| 0 | 背景側のグラフィック |
| 1 | 前面側のグラフィック |
| 2 | １つ目のソース用ビットマップ（外部から渡せる） |
| 3 | ２つ目のソース用ビットマップ（外部から渡せる） |
■描画スタイルに適用した場合
こちらで解説しています。
| index | ビットマップの割り当て |
| 0 | １つ目のソース用ビットマップ（外部から渡せる） |
| 1 | ２つ目のソース用ビットマップ（外部から渡せる） |
| 2 | ３つ目のソース用ビットマップ（外部から渡せる） |
| 3 | ４つ目のソース用ビットマップ（外部から渡せる） |
■最適化による変数宣言の削除について
使用しなかった入力変数は、ビルド時に最適化され削除されます。
インデックス値は欠番とはならずに、昇順に詰められます。
これは厄介な仕様で、プレビューも誤動作します。
回避するには、入力変数を必ず使用します。
ビルドの最適化によって、変数宣言が削除されないように対策する
<languageVersion : 1.0;>
// ------------------------------------------------------------
// カーネルを宣言
// ------------------------------------------------------------
kernel MyKernel < namespace:""; vendor:""; version:1; > {
// ------------------------------------------------------------
// 入力変数の宣言（ビットマップ）
// ------------------------------------------------------------
input image4 src0;
input image4 src1;
input image4 src2;
input image4 src3;
// ------------------------------------------------------------
// 出力変数の宣言（ピクセルカラー）
// ------------------------------------------------------------
output pixel4 dst;
// ------------------------------------------------------------
// ピクセルごとに実行される関数
// ------------------------------------------------------------
void evaluatePixel() {
// ------------------------------------------------------------
// 変数の最適化を回避する
// ------------------------------------------------------------
bool dummy = false;
if(dummy){
pixelSize(src0);
pixelSize(src1);
pixelSize(src2);
pixelSize(src3);
}
}
}
■使用例
「元のグラフィック」「１枚目のソースイメージ」「２枚目のソースイメージ」間をマージする
<languageVersion : 1.0;>
// ------------------------------------------------------------
// カーネルを宣言
// ------------------------------------------------------------
kernel MyKernel < namespace:""; vendor:""; version:1; > {
// ------------------------------------------------------------
// 入力変数の宣言（ビットマップ）
// ------------------------------------------------------------
// １枚目の入力イメージ（フィルタを適用する直前のグラフィック）
input image4 src;
// ２枚目の入力イメージ（外部から渡される１枚目のソース）
input image4 src_image0;
// ３枚目の入力イメージ（外部から渡される２枚目のソース）
input image4 src_image1;
// ------------------------------------------------------------
// 出力変数の宣言（ピクセルカラー）
// ------------------------------------------------------------
output pixel4 dst;
// ------------------------------------------------------------
// パラメータ変数の宣言
// ------------------------------------------------------------
parameter float marge
<
minValue : 0.0;
maxValue : 1.0;
stepInterval : 0.01;
defaultValue : 0.25;
>;
// ------------------------------------------------------------
// ピクセルごとに実行される関数
// ------------------------------------------------------------
void evaluatePixel() {
// 現在のピクセル位置を取得する
float2 pos = outCoord();
pixel4 color_p;
pixel4 color_n;
float d;
if(marge < 0.5){
// 位置を指定して、画像からピクセルカラーを取得する（ニアレストネイバー）
color_p = sampleNearest(src , pos);
color_n = sampleNearest(src_image0 , pos);
// 0.0 ～ 1.0 の値に変更
d = marge / 0.5;
}else{
// 位置を指定して、画像からピクセルカラーを取得する（ニアレストネイバー）
color_p = sampleNearest(src_image0 , pos);
color_n = sampleNearest(src_image1 , pos);
// 0.0 ～ 1.0 の値に変更
d = (marge - 0.5) / 0.5;
}
// ピクセルカラーを出力する
dst = (color_n - color_p) * d + color_p;
}
}
■出力変数（ピクセルカラー）について
■出力変数について
■出力変数を宣言する
出力変数の宣言の書式は、以下の通りです。
アウトプットのシンタックス
output ピクセル型 変数名;
■指定可能なピクセル型について
output 宣言に続けて、以下の型を指定します。
通常は、pixel4 型を指定します。
カラーチャンネル数が、入力変数と異なる場合、エラーとなります。
| 型 | 解説 |
| pixel4 | 透過ありピクセルカラー (単位:0.0～1.0) [赤,緑,青,透過] |
| pixel3 | 透過なしピクセルカラー (単位:0.0～1.0) [赤,緑,青] |
■パラメータ変数について
■パラメータ変数について
パラメータ変数からは、真偽値や数値などのデータを取得できます。
パラメータ情報は、外部から自身に渡されます。
Flash の場合、ShaderData クラスから渡す事ができます。
■パラメータ変数を宣言する
パラメータ宣言の書式は、以下の通りです。
パラメータのシンタックス
parameter 変数型 変数名 < メタデータ >;
■パラメータ変数のメタデータについて
メタデータには、以下の値を設定できます。
省略可能です。
| 名前 | 解説 |
| defaultValue | 初期値を指定。 |
| minValue | 最小値を指定。 |
| maxValue | 最大値を指定。 |
| stepInterval | １ステップごとに変化する最小単位。 |
| previewValue | プレビュー時に最適な値を指定。 |
パラメータ変数を宣言する
<languageVersion : 1.0;>
// ------------------------------------------------------------
// カーネルを宣言
// ------------------------------------------------------------
kernel MyKernel < namespace:""; vendor:""; version:1; > {
// ------------------------------------------------------------
// パラメータ変数の宣言
// ------------------------------------------------------------
parameter bool variable0;
parameter int variable1;
parameter int2 variable2;
parameter float variable3;
parameter float2 variable4;
parameter float3 variable5;
parameter pixel4 variable6;
}
メタデータ付きのパラメータ変数を宣言する
<languageVersion : 1.0;>
// ------------------------------------------------------------
// カーネルを宣言
// ------------------------------------------------------------
kernel MyKernel < namespace:""; vendor:""; version:1; > {
// ------------------------------------------------------------
// パラメータ変数の宣言
// ------------------------------------------------------------
parameter float variable
<
minValue : 0.0;
maxValue : 1.0;
stepInterval : 0.1;
defaultValue : 1.0;
previewValue : 0.5;
>;
}
■使用例
パラメータ変数を使って、出力結果を変化させる
<languageVersion : 1.0;>
// ------------------------------------------------------------
// カーネルを宣言
// ------------------------------------------------------------
kernel MyKernel < namespace:""; vendor:""; version:1; > {
// ------------------------------------------------------------
// 入力変数の宣言（ビットマップ）
// ------------------------------------------------------------
// １枚目の入力イメージ（フィルタを適用する直前のグラフィック）
input image4 src;
// ------------------------------------------------------------
// 出力変数の宣言（ピクセルカラー）
// ------------------------------------------------------------
output pixel4 dst;
// ------------------------------------------------------------
// パラメータ変数の宣言
// ------------------------------------------------------------
parameter float alpha
<
minValue : 0.0;
maxValue : 1.0;
stepInterval : 0.01;
defaultValue : 1.0;
previewValue : 0.5;
>;
parameter float2 scroll
<
minValue : float2( -2096.0 , -2096.0 );
maxValue : float2( 2096.0 , 2096.0 );
stepInterval : float2( 1.0 , 1.0 );
defaultValue : float2( 0.0 , 0.0 );
previewValue : float2( 0.0 , 0.0 );
>;
// ------------------------------------------------------------
// ピクセルごとに実行される関数
// ------------------------------------------------------------
void evaluatePixel() {
// 現在のピクセル位置を取得する
float2 pos = outCoord();
// スクロールを加算する
pos += scroll;
// 位置を指定して、画像からピクセルカラーを取得する（ニアレストネイバー）
pixel4 color = sampleNearest(src,pos);
// アルファ値をセットする
color.a = alpha;
// ピクセルカラーを出力する
dst = color;
}
}
変数の型について
■真偽型について
真偽型を取り扱うには、bool 型を使用します。
■格納可能な値
true、false 値のみセットできます。
■任意のデータを bool 型に変換する
bool() 関数を使用します。
bool bool( 値 )
| 第01引数 | * | 任意の値を指定する |
| 戻り値 | bool | 真偽値が得られる |
■使用例
真偽型を使用する
// ------------------------------------------------------------
// 真偽型の変数を宣言する
// ------------------------------------------------------------
bool result0;
bool result1;
// ------------------------------------------------------------
// 真偽値をセットする
// ------------------------------------------------------------
result0 = true;
result1 = false;
// ------------------------------------------------------------
// 任意のデータを真偽値に変換
// ------------------------------------------------------------
result0 = bool(1.2345);
result1 = bool(0);
// ------------------------------------------------------------
// if 文で使用する
// ------------------------------------------------------------
if( result0 ){
}else if( result1 ){
}
■整数型について
整数型を取り扱うには、int 型を使用します。
■格納可能な値
整数値のみセットできます。
■任意のデータを int 型に変換する
int() 関数を使用します。
int int( 値 )
| 第01引数 | * | 任意の値を指定する |
| 戻り値 | int | 整数値が得られる |
■整数値の四則演算について
左辺と右辺は、どちらも int 型である必要があります。
除算を行った場合、小数部は切り捨てられます。
■使用例
整数型を使用する
// ------------------------------------------------------------
// 整数型の変数を宣言する
// ------------------------------------------------------------
int value0;
int value1;
int value2;
// ------------------------------------------------------------
// 整数値をセットする
// ------------------------------------------------------------
value0 = -123;
value1 = 45678;
value2 = 0;
// ------------------------------------------------------------
// 任意のデータを整数値に変換
// ------------------------------------------------------------
value0 = int(1.2345);
value1 = int(0.0);
value2 = int(true);
// ------------------------------------------------------------
// 整数値の四則演算
// ------------------------------------------------------------
value0 = value1 + 123;
value2 += 123;
value0 = value1 - 123;
value2 -= 123;
value0 = value1 * 123;
value2 *= 123;
value0 = value1 / 123;
value2 /= 123;
■浮動小数点型について
浮動小数点型を取り扱うには、float 型を使用します。
■格納可能な値
小数表記を含む値のみセットできます。
例えば 1 なら、小数部を省略せずに 1.0 と記述します。
整数型はセットできません。
■任意のデータを float 型に変換する
float() 関数を使用します。
float float( 値 )
| 第01引数 | * | 任意の値を指定する |
| 戻り値 | float | 浮動小数点型の値が得られる |
■浮動小数点型の四則演算について
左辺と右辺は、どちらも float 型である必要があります。
■使用例
浮動小数点型を使用する
// ------------------------------------------------------------
// 浮動小数点型の変数を宣言する
// ------------------------------------------------------------
float value0;
float value1;
float value2;
// ------------------------------------------------------------
// 小数値をセットする
// ------------------------------------------------------------
value0 = -1.23;
value1 = 456.78;
value2 = 0.0;
// ------------------------------------------------------------
// 任意のデータを小数値に変換
// ------------------------------------------------------------
value0 = float(1);
value1 = float(0);
value2 = float(true);
// ------------------------------------------------------------
// 浮動小数点型の四則演算
// ------------------------------------------------------------
value0 = value1 + 1.23;
value2 += 1.23;
value0 = value1 - 1.23;
value2 -= 1.23;
value0 = value1 * 1.23;
value2 *= 1.23;
value0 = value1 / 1.23;
value2 /= 1.23;
■ベクトル型について
ベクトル型には、以下の種類があります。
ここでは、float 型のベクトルについて解説します。
| 型 | 解説 |
| bool4 | 真偽型の４次元ベクトル |
| bool3 | 真偽型の３次元ベクトル |
| bool2 | 真偽型の２次元ベクトル |
| 型 | 解説 |
| int4 | 整数型の４次元ベクトル |
| int3 | 整数型の３次元ベクトル |
| int2 | 整数型の２次元ベクトル |
| 型 | 解説 |
| float4 | 浮動小数点型の４次元ベクトル |
| float3 | 浮動小数点型の３次元ベクトル |
| float2 | 浮動小数点型の２次元ベクトル |
■任意の番地にアクセスする
任意の番地にアクセスするには、配列アクセス演算子を使用します。
[ 番地 ] と記述します。
以下のプロパティ名を使ってアクセスする事もできます。
| 0 番地 | 1 番地 | 2 番地 | 3 番地 | |
| ベクトル用 | x | y | z | w |
| ピクセルカラー用 | r | g | b | a |
| STPQ 用 | s | t | p | q |
ベクトルの任意の番地にアクセスする
// ------------------------------------------------------------
// ベクトル型の変数を宣言する
// ------------------------------------------------------------
float2 vec2d;
float3 vec3d;
float4 vec4d;
// ------------------------------------------------------------
// 任意の番地に書き込みアクセスする
// ------------------------------------------------------------
vec2d[0] = 0.0;
vec3d[1] = 2.0;
vec4d[3] = 5.0;
// ------------------------------------------------------------
// 任意の番地に読み取りアクセスする
// ------------------------------------------------------------
float v0 = vec2d[0];
float v1 = vec3d[1];
float v2 = vec4d[3];
// ------------------------------------------------------------
// ベクトル用のプロパティ名でアクセス
// ------------------------------------------------------------
vec4d.x = 0.0;
vec4d.y = 1.0;
vec4d.z = 2.0;
vec4d.w = 3.0;
// ------------------------------------------------------------
// ピクセルカラー用のプロパティ名でアクセス
// ------------------------------------------------------------
vec4d.r = 1.0;
vec4d.g = 1.0;
vec4d.b = 1.0;
vec4d.a = 1.0;
■下位次元のベクトルとしてアクセスする
以下の１文字のプロパティ名は、好きな順序で組み合わせる事ができます。
x y z w | r g b a | s t p q
下位次元のベクトルとしてアクセスできるようになります。
下位次元のベクトルとしてアクセスする
// ------------------------------------------------------------
// ベクトル型の変数を宣言する
// ------------------------------------------------------------
float4 vec4d;
// ------------------------------------------------------------
// 書き込みアクセス例
// ------------------------------------------------------------
// [x,y] の順序で書き込む
vec4d.xy = float2( 0.0 , 0.0 );
// [x,y,z] の順序で書き込む
vec4d.xyz = float3( 0.0 , 0.0 , 0.0 );
// [a,b,g,r] の順序で書き込む
vec4d.abgr = float4( 0.0 , 0.0 , 0.0, 0.0 );
// ------------------------------------------------------------
// 読み取りアクセス例
// ------------------------------------------------------------
// (x,y) ベクトルを取得する
float2 vec0 = vec4d.xy;
// (x,y,z) ベクトルを取得する
float3 vec1 = vec4d.xyz;
// (r,r,r,r) ベクトルを取得する
float4 vec2 = vec4d.rrrr;
■任意のデータをベクトル型に変換する
float2() float3() float4() 関数を使用します。
ベクトルを初期化する
// ------------------------------------------------------------
// ベクトル型の変数を宣言する
// ------------------------------------------------------------
float2 vec2d;
float3 vec3d;
float4 vec4d;
// ------------------------------------------------------------
// 初期値をセットする（すべての番地に同じ値を指定する方法）
// ------------------------------------------------------------
vec2d = float2( 0.0 );
vec3d = float3( 0.0 );
vec4d = float4( 0.0 );
// ------------------------------------------------------------
// 初期値をセットする（小数値を順番に指定する方法）
// ------------------------------------------------------------
vec2d = float2( 0.0, 1.0 );
vec3d = float3( 2.0, 3.0, 4.0 );
vec4d = float4( 5.0, 6.0, 7.0, 8.0 );
■２つのベクトルの加算について
ベクトル同士を加算するには、+ 演算子を使用します。
ベクトル同士を減算するには、- 演算子を使用します。
左辺と右辺は、どちらも同じベクトル型である必要があります。
ベクトル同士を加算する
// ------------------------------------------------------------
// ベクトル型の変数を宣言する
// ------------------------------------------------------------
float3 vec3d_a = float3( 1.0 , 2.0 , 3.0 );
float3 vec3d_b = float3( 4.0 , 5.0 , 6.0 );
float3 vec3d_c;
// ------------------------------------------------------------
// ベクトル同士を加算する
// ------------------------------------------------------------
vec3d_c = vec3d_a + vec3d_b;
// ------------------------------------------------------------
// ベクトル同士を減算する
// ------------------------------------------------------------
vec3d_c = vec3d_a - vec3d_b;
■ベクトルのスケーリングについて
ベクトルをスケーリングするには、* 演算子を使用します。
ベクトルに対して、float 型の値で乗算します。
ベクトル同士を加算する
// ------------------------------------------------------------
// ベクトル型の変数を宣言する
// ------------------------------------------------------------
float3 vec3d_a = float3( 1.0 , 2.0 , 3.0 );
float3 vec3d_b;
// ------------------------------------------------------------
// ベクトルをスケーリングする
// ------------------------------------------------------------
vec3d_b = vec3d_a * 1.2;
■ベクトル用の関数一覧
| 関数名 | 解説 |
| length() | ベクトルの長さを取得する |
| distance() | ２つのベクトル間の距離を計算する |
| normalize() | ベクトルを正規化する |
| dot() | ２つのベクトルの内積を計算する |
| cross() | ２つのベクトルの外積を計算する（３次元のみ） |
■ベクトルの長さを取得する
float length( ベクトル )
| 第01引数 | float2 float3 float4 | ベクトルを指定 |
| 戻り値 | float | ベクトルの長さが得られる |
■２つのベクトル間の距離を計算する
float distance( １つ目のベクトル , ２つ目のベクトル )
| 第01引数 | float2 float3 float4 | １つ目のベクトルを指定 |
| 第02引数 | float2 float3 float4 | ２つ目のベクトルを指定 |
| 戻り値 | float | ２つのベクトル間の距離が得られる |
■ベクトルを正規化する
ベクトル normalize( ベクトル )
| 第01引数 | float2 float3 float4 | ベクトルを指定 |
| 戻り値 | float2 float3 float4 | 正規化された新しいベクトルが得られる |
■２つのベクトルの内積を計算する
float dot( １つ目のベクトル , ２つ目のベクトル )
| 第01引数 | float2 float3 float4 | １つ目のベクトルを指定 |
| 第02引数 | float2 float3 float4 | ２つ目のベクトルを指定 |
| 戻り値 | float | ２つのベクトルの内積が得られる |
■２つのベクトルの外積を計算する
float3 cross( １つ目のベクトル , ２つ目のベクトル )
| 第01引数 | float3 | １つ目のベクトルを指定 |
| 第02引数 | float3 | ２つ目のベクトルを指定 |
| 戻り値 | float3 | ２つのベクトルの外積が得られる |
■マトリックス型について
マトリックス型には、以下の種類があります。
| 型 | 解説 |
| float2x2 | ２行２列の浮動小数点の２次元配列 |
| float3x3 | ３行３列の浮動小数点の２次元配列 |
| float4x4 | ４行４列の浮動小数点の２次元配列 |
■任意の番地にアクセスする
任意の番地にアクセスするには、配列アクセス演算子を使用します。
[ 列の番地 ][ 行の番地 ] と記述します。
行列の任意の番地にアクセスする
// ------------------------------------------------------------
// 行列型の変数を宣言する
// ------------------------------------------------------------
float2x2 mtx22;
float3x3 mtx33;
float4x4 mtx44;
// ------------------------------------------------------------
// 任意の番地に書き込みアクセスする
// ------------------------------------------------------------
mtx22[0][1] = 0.0;
mtx33[0][0] = 2.0;
mtx44[3][3] = 5.0;
// ------------------------------------------------------------
// 任意の番地に読み取りアクセスする
// ------------------------------------------------------------
float v0 = mtx22[0][1];
float v1 = mtx33[0][0];
float v2 = mtx44[3][3];
■任意行に対してベクトルとしてアクセスする
[ 列の番地 ] と記述します。
行列の任意行のベクトルにアクセスする
// ------------------------------------------------------------
// 行列型の変数を宣言する
// ------------------------------------------------------------
float2x2 mtx22;
float3x3 mtx33;
float4x4 mtx44;
// ------------------------------------------------------------
// 任意行に書き込みアクセスする
// ------------------------------------------------------------
mtx22[0] = float2( 0.0 , 1.0 );
mtx33[1] = float3( 2.0 , 3.0 , 4.0 );
mtx44[3] = float4( 5.0 , 6.0 , 7.0 , 8.0 );
// ------------------------------------------------------------
// 任意行に読み取りアクセスする
// ------------------------------------------------------------
float2 vec0 = mtx22[0];
float3 vec1 = mtx33[1];
float4 vec2 = mtx44[3];
■任意のデータを行列型に変換する
float2x2() float3x3() float4x4() 関数を使用します。
行列を初期化する
// ------------------------------------------------------------
// 行列型の変数を宣言する
// ------------------------------------------------------------
float2x2 mtx22;
float3x3 mtx33;
float4x4 mtx44;
// ------------------------------------------------------------
// 初期値をセットする（左上から右下の対角線上は指定値、それ以外は 0.0）
// ------------------------------------------------------------
mtx22 = float2x2( 1.0 );
mtx33 = float3x3( 1.0 );
mtx44 = float4x4( 1.0 );
// ------------------------------------------------------------
// 初期値をセットする（行ベクトルを順番に指定する方法）
// ------------------------------------------------------------
mtx22 = float2x2(
float2( 1.0, 0.0 ),
float2( 0.0, 1.0 )
);
mtx33 = float3x3(
float3( 1.0, 0.0, 0.0 ),
float3( 0.0, 1.0, 0.0 ),
float3( 0.0, 0.0, 1.0 )
);
mtx44 = float4x4(
float4( 1.0, 0.0, 0.0, 0.0 ),
float4( 0.0, 1.0, 0.0, 0.0 ),
float4( 0.0, 0.0, 1.0, 0.0 ),
float4( 0.0, 0.0, 0.0, 1.0 )
);
// ------------------------------------------------------------
// 初期値をセットする（小数値を順番に指定する方法）
// ------------------------------------------------------------
mtx22 = float2x2(
1.0, 0.0,
0.0, 1.0
);
mtx33 = float3x3(
1.0, 0.0, 0.0,
0.0, 1.0, 0.0,
0.0, 0.0, 1.0
);
mtx44 = float4x4(
1.0, 0.0, 0.0, 0.0,
0.0, 1.0, 0.0, 0.0,
0.0, 0.0, 1.0, 0.0,
0.0, 0.0, 0.0, 1.0
);
■２つの行列の合成（乗算）について
行列同士を合成（乗算）するには、* 演算子を使用します。
左辺と右辺は、どちらも同じ行列型である必要があります。
行列同士を乗算する
// ------------------------------------------------------------
// 行列型の変数を宣言する
// ------------------------------------------------------------
float3x3 mtx33_a;
float3x3 mtx33_b;
float3x3 mtx33_c;
// ------------------------------------------------------------
// 初期値をセットする
// ------------------------------------------------------------
mtx33_a = float3x3(
2.0, 0.0, 0.0,
0.0, 3.0, 0.0,
0.0, 0.0, 1.0
);
mtx33_b = float3x3(
1.0, 0.0, 0.0,
0.0, 1.0, 0.0,
4.0, 5.0, 1.0
);
// ------------------------------------------------------------
// 行列同士を乗算する
// ------------------------------------------------------------
mtx33_c = mtx33_a * mtx33_b;
■ピクセル型について
ピクセルカラーを取り扱うには、pixel 型のベクトルを使用します。
これは、float 型のベクトルと同等です。
赤、緑、青、透過チャンネルごとに、0.0 ～ 1.0 の値で表現します。
| 型 | 解説 | 同等の型 |
| pixel4 | ピクセルカラー (単位:0.0～1.0) [赤,緑,青,透過] | float4 |
| pixel3 | ピクセルカラー (単位:0.0～1.0) [赤,緑,青] | float3 |
| pixel2 | ピクセルカラー (単位:0.0～1.0) [赤,緑] | float2 |
| pixel1 | ピクセルカラー (単位:0.0～1.0) [赤] | float |
■任意のデータを pixel4 型に変換する
pixel4() 関数を使用します。
pixel4 pixel4( 赤 , 緑 , 青 , 透過 )
| 第01引数 | * | 赤色の値を指定する (0.0 ～ 1.0) |
| 第02引数 | * | 緑色の値を指定する (0.0 ～ 1.0) |
| 第03引数 | * | 青色の値を指定する (0.0 ～ 1.0) |
| 第04引数 | * | 透過色の値を指定する (0.0 ～ 1.0) |
| 戻り値 | pixel4 | pixel4 型のデータが得られる |
ビットマップ関連の機能について
■ビットマップのサイズを取得する
| 名前 | 解説 |
| parameterType | "inputSize" を指定。 |
| inputSizeName | 該当する入力変数名を指定。 |
■ Flash Player で使用する場合
ビットマップのサイズは、取得できません。
ShaderParameter クラスを通じて、サイズ情報を渡す必要があります。
■取得例
ビットマップのサイズを取得して、タイリング描画する
<languageVersion : 1.0;>
// ------------------------------------------------------------
// カーネルを宣言
// ------------------------------------------------------------
kernel MyKernel < namespace:""; vendor:""; version:1; > {
// ------------------------------------------------------------
// 入力変数の宣言（ビットマップ）
// ------------------------------------------------------------
input image4 src0;
input image4 src1;
// ------------------------------------------------------------
// 出力変数の宣言（ピクセルカラー）
// ------------------------------------------------------------
output pixel4 dst;
// ------------------------------------------------------------
// パラメータ変数の宣言
// ------------------------------------------------------------
// ビットマップのサイズ（入力変数 "src0" ）
parameter float2 src0Size
<
parameterType : "inputSize";
inputSizeName : "src0";
>;
// ビットマップのサイズ（入力変数 "src1" ）
parameter float2 src1Size
<
parameterType : "inputSize";
inputSizeName : "src1";
>;
// スクロール値
parameter float2 scroll
<
minValue : float2( -2096.0 , -2096.0 );
maxValue : float2( 2096.0 , 2096.0 );
stepInterval : float2( 0.01 , 0.01 );
defaultValue : float2( 0.0 , 0.0 );
>;
// ------------------------------------------------------------
// ピクセルごとに実行される関数
// ------------------------------------------------------------
void evaluatePixel() {
// 変数の最適化を回避する
bool dummy = false;
if(dummy){
src0Size;
src1Size;
pixelSize(src0);
pixelSize(src1);
}
// 現在のピクセル位置を取得する
float2 pos = outCoord();
// スクロールを加算
pos += scroll;
// 画像のサイズ
float w = src1Size.x;
float h = src1Size.y;
// 位置を画像のサイズ内に収める
pos.x -= floor(pos.x / w) * w;
pos.y -= floor(pos.y / h) * h;
// 位置を指定して、画像からピクセルカラーを取得する（ニアレストネイバー）
pixel4 color = sampleNearest(src1 , pos);
// ピクセルカラーを出力する
dst = color;
}
}
■ビットマップからピクセルカラーを取得する
■関数一覧
| 関数名 | 解説 |
| sampleNearest() | 画像からピクセルカラーを取得する（ニアレストネイバー補間） |
| sampleLinear() | 画像からピクセルカラーを取得する（バイリニア補間） |
■画像からピクセルカラーを取得する（ニアレストネイバー補間）
sampleNearest() 関数を使用します。
pixel4 sampleNearest( image4 , float2 )
| 第01引数 | image4 | ビットマップイメージを指定 |
| 第02引数 | float2 | 位置を指定 |
| 戻り値 | pixel4 | 指定位置のピクセルカラーが得られる（ニアレストネイバー補間） |
■画像からピクセルカラーを取得する（バイリニア補間）
sampleLinear() 関数を使用します。
第02引数で指定する位置は、小数成分が考慮されます。
バイリニア補間された、高品位な結果が得られます。
ピクセルの中心位置は、0.0 ではなく 0.5 です。
sampleNearest() 関数と同じ結果を得るには、小数部に 0.5 を指定します。
pixel4 sampleLinear ( image4 , float2 )
| 第01引数 | image4 | ビットマップイメージを指定 |
| 第02引数 | float2 | 位置を指定（小数部が 0.5 でピクセルの中心） |
| 戻り値 | pixel4 | 指定位置のピクセルカラーが得られる（バイリニア） |
■ブレンド動作時の注意点
１～２枚目のビットマップは、第02引数が無視されます。
得られる結果は、常に現在の位置のピクセルカラーです。
３枚目以降のソース用ビットマップであれば、第02引数は機能します。
しかし、outCoord() 関数は、常に (0.5 , 0.5) を返すでしょう。
■取得例
位置を指定して、画像からピクセルカラーを取得する
<languageVersion : 1.0;>
// ------------------------------------------------------------
// カーネルを宣言
// ------------------------------------------------------------
kernel MyKernel < namespace:""; vendor:""; version:1; > {
// ------------------------------------------------------------
// 入力変数の宣言（ビットマップ）
// ------------------------------------------------------------
// １枚目の入力イメージ（フィルタを適用する直前のグラフィック）
input image4 src;
// ------------------------------------------------------------
// 出力変数の宣言（ピクセルカラー）
// ------------------------------------------------------------
output pixel4 dst;
// ------------------------------------------------------------
// パラメータ変数の宣言
// ------------------------------------------------------------
parameter float scale
<
minValue : 0.0;
maxValue : 16.0;
stepInterval : 0.01;
defaultValue : 5.0;
>;
// ------------------------------------------------------------
// ピクセルごとに実行される関数
// ------------------------------------------------------------
void evaluatePixel() {
// ------------------------------------------------------------
// 現在のピクセル位置を取得する
// ------------------------------------------------------------
float2 pos = outCoord();
// 位置ベクトルをスケーリング
pos *= scale;
// ------------------------------------------------------------
// 位置を指定して、画像からピクセルカラーを取得する
// ------------------------------------------------------------
// ニアレストネイバー補間の場合
// pixel4 color = sampleNearest(src , pos);
// バイリニア補間の場合
pixel4 color = sampleLinear(src , pos);
// ------------------------------------------------------------
// ピクセルカラーを出力する
// ------------------------------------------------------------
dst = color;
}
}