Adobe MAX 2011から「Deep Dive into Molehill (Stage 3D)」のセッションレポートです。
Prosceniumの話です。前半のStage 3Dの最適化の話は前のレポートをご覧ください。
例によって、あまりに専門的な部分は翻訳できていません。すみません。
Prosceniumとは
Proscenium（プロセニアム）は、ActionScriptを使って3D表現を簡単に行えるようにしたAdobe製の、いわば純正のフレームワークです。Adobe Labsで公開されています。プロセニアムというこの聞き慣れない単語は、劇場において、舞台の上と左右についているアーチ型の枠のことのようです。
Prosceniumは、一部Pixel Bender 3D(AS3)と連携して動作します。また、Adobeの製品を使ったワークフローとしては、Photoshop Extendedを使って3Dモデルを書き出し、Proscenium（Flash Player 11）で動かすということも実現可能なようです。
Scene Graph（シーングラフ）
Prosceniumの中のオブジェクトは、シーングラフという構造で管理されています。例えばStageの子として、城と馬があって、馬の子として騎士がいて、騎士の子として槍と盾があります。人の形をしたものの場合も同じで、それぞれのパーツが親子関係を持って管理されています。
シーンに配置するオブジェクトは、他の3Dモデリングソフトで作成したものを読み込んだり、Prosceniumの中で作ったりします。
シーンが用意できたあとは、ライト、カメラ、アクションです。
コードの断片をみながら、Prosceniumがどのように動いているか見てみましょう。
シーンの準備
Prosceniumの最小のプログラムは次のようなものになります。必要なことはすべてBasicSceneクラスに書かれています。
import com.adobe.scenegraph.*;
public class Demo extends BasicScene
{
}
シーンにライト、カメラ、オブジェクトを追加
ライト
override protected function initLights():void
{
var light:SceneLight = new SceneLight();
light.setPosition(3, 4, 5);
scene.addChild(light);
}
カメラ
override protected function resetCamera():void
{
scene.activeCamera.identity();
scene.activeCamera.appendTranslation(0, 2, 10);
scene.activeCamera.appendRotation(-15, Vector3D.X_AXIS);
}
オブジェクト
override protected function initModels():void
{
scene.addChild(MeshUtils.createCube(2));
}
このように、わずか数行のコードでそれぞれを記述できます。
シーンにアニメーションを追加
public var cube:SceneMesh;
override protected function initModels():void
{
cube = ProceduralGeometry.createCube(2);
scene.addChild(cube);
}
override protected function onAnimate(t:Number, dt:Number):void
{
cube = appendRotation(dt * 30, Vector3D.Z_AXIS);
cube = appendRotation(dt * 50, Vector3D.Y_AXIS);
}
Prosceniumは、GPUを使って描画するので、大量のインスタンスを配置してもなめらかに動きます。
Model Loader（モデルローダー）
.OBJ
ASCIIファイルフォーマット。三角とポリゴンのメッシュの集合。
メッシュごとに複数のマテリアルを持てる。フォンマテリアルモデル。
COLLADA/KMZ
.DAEのXMLフォーマット。OBJフォーマットの情報に加えてライト・カメラ、オブジェクトの階層、スキン付きキャラクター、アニメーションのデータが加わる。
独自のバイナリフォーマット
.DAEの情報を持ちつつ、さらなる圧縮率と短いロード時間を実現します。
Mesh Processing（メッシュプロセッシング）
Mesh Processingを使えば、3000行もの行を書かなくてすみます。内部では次のようなことを行います。
・全メッシュデータを三角形のリストに変換する
・サーフェイスの法線とtangentを自動的に生成
・GPUでのキャッシュの一貫性を最大化するように三角形の順序を入れ替え
・ハードウェアの制約の中で残るようにメッシュを分割
Basic Scene : モデルの読み込み
import com.adobe.scenegraph.loaders.*;
import com.adobe.scenegraph.loaders.collara.*;
public var loader:ColladaLoader;
override protected function initModels():void
{
loader = new ColladaLoader("model.dae");
loader.addEventListener(Event.COMPLETE, onLoad);
}
public function onLoad(event:Event):void
{
loader.model.addTo(scene);
}
Basic Scene : 読み込んだモデルへのアニメーションの適用
public var animations:Vector.<AnimationController>, initialized:Boolean;
public function onLoad(event:Event):void
{
loader.model.addTo(scene);
animations = loader.model.animations;
for each(var anim:AnimationController in animations)
anim.bind(scene);
initialized = true;
}
override protected function onAnimate(t:Number, dt:Number):void
{
if(!initialized)
return;
for each(var anim:AnimationController in animations)
anim.time = (t % anim.length) + anim.start;
}
画像フォーマット
TARGA
TGAファイル。アルファチャネルをサポート。ランレングス圧縮(RLE)
TIFF
TIFFファイル。LZW、ZIP圧縮。チャンネルごとの高いビット深度の可能性を持っている。
マテリアル
マテリアルはオブジェクトのサーフェス（表面）の見た目を定義する。
読み込んだモデルは、それらのマテリアルもそのまま持ってくる。
マテリアルやアトリビュートの作成、変更のためのAPIが用意されている。
AGALやPixel Bender 3Dで書いたシェーダーを使って、基本のマテリアルクラスを拡張できる。
Basic Scene: マテリアル
override protected function initModels():void
{
var material:MaterialStandard = new MaterialStandard();
material.diffuseColor.set(1, .9, .3);
cube = MeshUtils.createCube(2, material);
scene.addChild(cube);
}
マテリアルの色、マッピング、値の設定
Diffuse, Specular, Opacity, Bump, Emissive, Ambient, Environment, Normal
ライトの設定
・Distant, Point, Spotの３種類
・Shaders express material properties as well as geometry deformations
・Skinned Animations, Morphs
テクスチャマップとライトの種類の組み合わせごとに、AGALのvertexおよびfragmentシェーダーが必要。爆発的に増加する。
Standard Material Shader Factory
・MaterialStandardShaderFactoryは、マテリアル、メッシュ、ライトのプロパティのセット
・自動的に適切なvertexおよびfragmentのAGALプログラムを生成する
・組み合わせの数を減らすために、ライトのタイプや頂点のアトリビュートなどのようなプロパティを統合
Render Graph
・高度なレンダリング機能（Bitmapped shadows、Reflections、Billboards、In-scene video screens）
・Automatically generates a dependency graph
・Orders and consolidates rendering targets using strong component analysis of the graph
・Indentified cycles in the graph and resolves them by using prior frames as content
大気エフェクト
影
ビルトインのpoint, spot, distantライトのshadow
透過
order-independentな透過、FSAA互換、Casts transparent shadows
Post Processing Effects
PixelBender3Dフィルタを使って実現。Render graphによって簡単にマルチパスエフェクトを実現。Bloom filter。自分で拡張可能。
パーティクルシステム
GPU-based
vertex shaderを使用。Procedural motion in shader。パーティクルごとに状態は保持できない。雪、銀河、花火などを表現。30万パーティクル。
CPU-based
ActionScriptを使う。モーションには複雑な機能を持たせられる。パーティクルごとに状態を保持できる。5000パーティクル。
Rigid Body Dynamics（物理エンジン）
ActionScript「Pallet」エンジン
Bullet Engineのサブセット。剛体力学と衝突、ボックスとカプセル、地形、任意の固定メッシュをサポート。
2Dの流体
PixelBender 2Dを使用
Stage 3Dはすごい。でもAdobeが用意したのは低レベルのAPIだけでした。一体どうやって普通のFlashエンジニアが使うのだろうと筆者は思っていました。
サードパーティ製のフレームワークを使うしかないのか、と思っていたところに発表されたのが、Prosceniumです。Adobe純正ならではの安心感のようなものがありますね。5人くらいのチームで開発したそうです。
次のFlash Proには、簡単な3Dオブジェクトを配置したり、テクスチャを貼ったりする機能がつくのでしょうか。
Prosceniumは、単に3Dフレームワークだけでなく、ゲームやインタラクションを作る場合に不可欠なパーティクル、物理エンジンまで付けてきました。思っていたよりも使えるフレームワークのようです。
Alternativa3DやAway3Dなどと比較しながら勉強してみるのもおもしろいかもしれません。
それにしても、Flashエンジニアは一体どこまで勉強したらよいのでしょうね。大変な時代になってきました。
