基本的な Pixel Bender 3D カーネルの書き方に続いて、Pixel Bender 3D でテクスチャマッピングを行う方法をご紹介します。

テクスチャマッピングは見た目に関する処理なので、関係するのはマテリアルカーネルだけです。

早速、マテリアルカーネルの定義です。まずは、変数の宣言からです。今回新しく登場しているのは input image です。

{
  input vertex float4 UVCoord;
  interpolated float4 interpolatedUVCoord;
  input image4 inputImage;
  output float4 finalColor;           
}

input image の変数宣言の記述は、ちょっと input vertex とは異なります。"input image 型 変数名" ではなくて、"input 型 変数名" です。その際、型として、image1, image2, image3, image4 のどれかを指定するという制限がつきます。

Starling のマイナーアップデートが行われました。

ゆっくりとしたペースながらいちおう開発は行われているようです。パフォーマンスの改善が行われているそうなので、興味のある方はお試しください。

ダウンロードはこちらです。

• PrimaryFeather/Starling-Framework@github

一方で、ND2D の方は、新機能追加も積極的に行われているようなので、比べるとちょっと寂しい感じもします。

前回は、Pixel Bender 3D カーネルの基本構造と変数の定義をカバーしました。今回は、カーネル関数の定義です。

ちょっと復習ですが、カーネルと、カーネルから生成される PB-ASM プログラムの関係は、以下のようになっています。

• 頂点カーネルから生成
  • 頂点位置プログラム：頂点の位置を操作
• マテリアルカーネルから生成
  • 頂点マテリアルプログラム：頂点の見た目を操作
  • 断片マテリアルプログラム：断片の見た目を操作

そのため、頂点カーネルには 1 つ、マテリアルカーネルには 2 つの関数を定義します。（必要に応じて補助用の関数も定義できます）

前回の記事で触れたように、Pixel Bender 3D がこのまま製品化される保証はありませんが、現時点で利用可能なシェーダを記述する手段の 1 つとして、引き続きご紹介を続けます。

今回は、実際に Pixel Bender 3D カーネルを記述する方法の概要です。

Pixel Bender 3D カーネルの基本構造

Pixel Bender 3D カーネルは、下に示すような構造をしています。頂点カーネル、マテリアルカーネル共に、基本的な構造は同じです。

<languageVersion: 1.0;>
vertex kernel カーネル名 
<
  カーネル メタデータ
>
{
  カーネル メンバー（変数と関数の定義）
}

最初の行は、記述する言語のバージョンを指定します。現時点では、ここは常に 1.0 です。

もう 2 ヶ月経ってしまいましたが、Pixel Bender 3D のプレビュー 3 が Adobe Labs に公開されています。 （Adobe Pixel Bender 3D Preview@Labs）

Pixel Bender 3D は Pixel Bender を Stage3D 用に拡張したもので、Stage3D のシェーダの記述に使えます。AGAL は機械には分かり易い言語でも、人間が読んだり書いたりするのは困難です。Pixel Bender 3D を使えば、シェーダの開発も効率的になりそうです。

ところが、プレビュー 3 発表時のブログによると、現在のプレビュー 3 では、

• コマンドラインでの操作が必要
• Stage3D の制限を簡単に超えてしまう

などの問題があるものの、これ以上の Pixel Bender 3D の開発は、数ヶ月以内に、コミュニティからの強い要望が集まらない限り行われないだろうと書かれています。

現在の状況を鑑みて、プレビュー 3 以降が出てくることは期待薄にも思えますが、現バージョンでも十分に役には立つので、気を取り直して、そして開発の継続を期待して、Pixel Bender 3D のご紹介です。

今回は、Stage3D 利用時の考慮点をいくつか紹介します。

一般的な GPU プログラミングは、OpenGL や DirectX の提供する API を使います。この方法は、ほぼ直接 GPU の機能を利用できるため、最大限のパフォーマンス実現が期待できますし、最新の GPU の機能だって利用可能です。

一方、Stage3D を使う場合は、1 つレイヤーが増えるため、直接 OpenGL や DirectX を利用する場合よりも余分な負荷が発生します。また、利用できる機能も限定されます。パフォーマンスや機能性の面からは、Stage3D は不利な感じです。

その代わり、Stage3D アプリは、複数の環境でそのまま動作することになっています。これは、Stage3D が環境間の差異を吸収してくれるるからです。

という見方からは、Stage3D は少し遅くて機能の限定された "仮想の GPU" と考えることができそうです。そして、利用できる開発言語は Context3D や Program3D のような ActionScript の API と、シェーダ記述用の AGAL ということになります。

テクスチャマッピングは、テクスチャ （ビットマップ） を 3D オブジェクトの表面、すなわち 3 角形のメッシュに貼り付ける作業です。Photoshop 等で加工した画像を使って、オブジェクト表面に質感を与えることができます。

今回は、Stage3D でテクスチャマッピングを行う方法をご紹介します。

UV 座標

テクスチャマッピングの処理は、大雑把に表現すると、3 角形の上にビットマップを重ねて、3 角形内部の各ピクセルの色を、その上に位置するピクセルの色とする、というイメージです。

その際、ビットマップのどのあたりが 3 角形の上に重なるのか、という情報が必要になります。そこで、ビットマップ内の位置を指定するのに用いられる 2 次元座標が UV 座標です。

UV 座標では、ビットマップの左下が基準点として使われ、U は横方向、V は縦方向の座標です。UV 座標が (0, 0) なら左下の角、(1, 1) なら右上の角の指定になります。

前回の記事 （Stage3D のシェーダのアップロードと AGAL の基本情報） までで、Stage3D で 3D モデルの形状とシェーダを GPU にアップロードする手順を紹介しました。後は、GPU に描画指示を出す手順だけ理解すれば Stage3D の基本は完了です。

Stage3D で描画をする場合、中心になるクラスは Context3D です。今までも、Context3D は、頂点バッファやインデックスバッファ作成のサンプルコードの中で登場してました。覚えてなければ、後で確認してみて下さい。

Context3D は、描画するリソースやその状態を管理します。GPU が利用できないとき、ソフトウェアの描画エンジンにフォールバックするのも Context3D の役割です。

これまで紹介してきた GPU 描画の仕組み、例えば、2 つのシェーダを描画処理パイプラインで使えること、常に 3 角形を使って 3D の形状を記述すること、2D 描画にも対応できること、なども、どれも Context3D の仕様です。

前回 （Stage3D と 2 つのシェーダと頂点情報） は、3D モデル情報を Stage3D に渡す方法をご紹介しました。今回は、シェーダ関連の Stage3D の API の紹介です。

それから、AGAL （Adobe Graphics Assembly Language） も、少しだけ紹介します。

シェーダのアップロード

始める前に、今回ご紹介するサンプルでは、AGAL Mini Assembler というサンプルツールを使っています。今のところ、実行時に AGAL をコンパイルする機能を提供する正式なツールは提供されていないので、動作確認には、こちらをダウンロードしてお使い下さい。

早速ですが、以下が AGAL で記述された頂点シェーダと断片シェーダの例です。

// 頂点シェーダを記述
private const VERTEX_SHADER:String =
  "m44 op, va0, vc0    \n" +
  "mov v0, va1"
// 断片シェーダを記述
private const FRAGMENT_SHADER:String =
  "mov oc, v0";

前回の記事 （Stage3D の裏側のお話） では、GPU （Stage3D） が 3 角形の描画を得意とすること、描画処理が大きく 2 つの段階に分けられ、それぞれの段階にシェーダと呼ばれるプログラムが必要となること、までカバーしました。

今回は、シェーダの役割をもう少し詳しく確認してから、シェーダに頂点情報を渡す Stage3D の API の使い方に話題を移します。

頂点シェーダと断片シェーダ

GPU 描画では、2 種類のシェーダが使われます。頂点シェーダと断片 （ピクセル） シェーダです。

実行される順序は、頂点シェーダ → 断片シェーダの順です。頂点シェーダが各頂点の位置を確定すると、断片シェーダが頂点の間の断片 （ピクセル） を色づけします。

下の図は、直方体を 2 種類のシェーダそれぞれが処理する様子を示したものです。

Flash Player 11 から追加された Stage3D は、GPU を Flash コンテンツからフル活用するための機能です。

3D 描画だけでなく 2D 描画にも利用できるので、Stage3D という名前はいささか誤解を招くものかもしれません。従来の、CPU で描画される Stage との違いを明確にするには、StageGPU とかのほうが合っているような気がします。

で、どんなときに Stage3D が使えて嬉しいかと考えてみたときに、高度な 3D 描画を実現したい場合というのは分かり易い例かもですが、デバイス （スマホ／タブレット） 向けコンテンツのパフォーマンスを向上させたい場合の方が、もしかすると多くなるような気もします。

CPU 描画は、1 画素ずつ CPU で描画データを計算します。そのため、CPU のスペックが低くて、描画する画素数が多い環境は苦手とします。

そうすると、一般的なデバイスは PC より CPU のスペックが低い割には小さな画面でも高画素と、CPU 描画には厳しい条件を持っているようです。今後、CPU の性能が向上していくとしても、ディスプレイの精細度も向上するだろうと考えると、当面 CPU 描画に厳しい状況は続きそうです。

少し経ってますが、Adobe Labs に Proscenium のプレビュー版が公開されました。（Proscenium@Labs）

Proscenium は Flash Player 11 / AIR 3 の新機能 Stage3D に対応した、アドビ製の 3D フレームワークのコードネームです。評価用のプロジェクトと位置付けられていて、具体的な製品化計画はまだ無いとのことです。

Proscenium のダウンロードはこちらです。（Labs Downloads/Proscenium） Proscenium を試すには Flash Player 11 / AIR 3 の開発環境が必要です。（Flash Professional CS5.5 で Flash Player 11 と AIR 3 を使う方法）

なお、ビデオドライバーが古いとクラッシュするという報告があるようです。同様の症状に出会った場合はドライバーの最新版をインストールしてみて下さい。また、Windows では、DirectX のエンドユーザ用ランタイムが必要とのことです。