MAX2010

Adobe MAX 2010レポート 3日目 Flash 3Dのこれから

Adobe MAX 2010から「Flash Player 3D Future」のセッションレポートです。
将来のFlash Playerに搭載される、コードネームMolehillという3D機能が紹介されました。これによって、数千ポリゴンしか描けなかったFlash 3Dの世界は、一気に60fpsで数百万ポリゴンという世界になります。MAXで実際に動いているものを見た僕らは、度肝を抜かれました。
今回のMAXで紹介された3D機能は、2011年の真ん中ごろにパブリックベータ版が公開されるそうです。同じ時期に公開される予定のAway3D 4.0やAlternativa3D 8でも、Molehill対応が決まっています。
まずは、Molehillというものがどういうものか、変に日本語に訳さず掲載します。
・No retained mode
・Vertex and index buffers
・Programmable pipeline only: Fragment and vertex programs
・Programs are uploaded as low level bytecode
・Texturing
・Simplified render to texture
・Blending, depth buffer, stencil buffer
・DirectX9, OpenGL 1.3, OpenGL ES 2, ソフトウェアレンダリング
次に実際のActionScript 3.0コードをみながら、Molehillを理解していきましょう。OpenGLに詳しい方なら、抵抗なく受け入れられるコードかもしれません。

初期化

まずはContext3Dを作成し、ステージに置きます。

context3D = new Context3D(Context3DRenderMode.AUTO));
stage.stage3Ds[0].attachContext3D(context3D);
stage.stage3Ds[0].viewport = new Rectangle(0, 0, 688, 528);
context3D.setupBackBuffer(688, 528, 1, true);

stage3Dsは、次期Flash Player追加される2つのハードウェアレイヤーのうちの1つです(もう1つはStageVideo)。Stage3Dは、StageVideoの手前、DisplayListの奥に位置します。このためSpriteなどの要素は、必ず3Dレイヤーの手前に表示されます。
次に頂点バッファーを作成します。フォーマットはx,y,z,r,g,bの順です。ここでは3つの頂点を定義しています。

vertexbuffer = context3D.createVertexBuffer(3, 6);
vertexbuffer.upload( Vector.([
-1,-1,0,    255/255,0,0,
0,1,0,      193/255,216/255,47/255,
1,-1,0,     0,164/255,228/255
]), 0, 3);

最後の引数は、オフセット0からはじまり、3個ということです。
次にインデックスバッファーを作成します。

indexbuffer = context3D.createIndexBuffer(3);
indexbuffer.upload(Vector.([ 0, 1, 2 ]), 0, 3);

これも最後の引数は、オフセット0からはじまり、3個ということです。
初期化の最後は、FragmentとVertex Programのアセンブルです。

var av:AGALMiniAssembler = new AGALMiniAssembler();
av.assemble(Context3DProgramType.VERTEX,
"m44 op, va0, vc0\n"   // AGAL:transform and output
"mov v0, val\n"  // AGAL:copy color
);
var af:AGALMiniAssembler = new AGALMiniAssembler();
af.assemble(Context3DProgramType.FRAGMENT,
"mov oc, v0"  // AGAL:output color
);

ここで、AGAL(エーギャル)とは、Adobe Graphics Assembly Languageの略です。
・バイナリのバイトコードで、ByteArrayとして入力します。
・AGALは、AGALMiniAssembler.asか、Pixel Bender 3Dで作ります。
・仕様は完全にドキュメントになっていて、とてもシンプルなレイアウトです。
・約20個のOpcodeからなります。
・条件分岐や繰り返し処理はありません(このバージョンでは)。
・VertexとFragment Programsで同じように使えます。
・固定長のトークンストリームで、1つのトークンは196bitsです。
以上で初期化は完了です。

毎フレームごとの処理

フレームをクリアーします。

context3D.clear(192/255, 181/255, 169/255, 1);

プログラムをセットします。

context3D.setProgram(program);

vertex streamsをセットします。

context3D.setVertexStream(0, vertexbuffer, 0, Context3DVertexFormat.FLOAT_3);
context3D.setVertexStream(1, vertexbuffer, 3, Context3DVertexFormat.FLOAT_3);

ここまでの関係を図であらわすとこうなります。

program constantsをセットします。

context3D.setProgramConstantsMatrix(Context3DProgramType.VERTEX, 0, modelMatrix, true);

modelMatrixは、回転させるためのMatrix3Dです。
そしてついに描きます!

context3D.drawTriangles(indexbuffer, 0, 1);

表示させます。

context3D.swap();


実行結果。リボンはDisplayListにあるオブジェクトですね。
さらに次のようなものも用意されています。

テクスチャー

context3D.createTexture
context3D.createCubeTexture
context3D.setTexture

ラスター

context3D.setBlending
context3D.setDepthTest
context3D.setStencilTest

フレームバッファー

context3D.setRenderToTexture
context3D.drawToBitmapData
なお、紹介した各クラスの関係は次のようになっています。

Molehillは、次期Flash Playerで動作する3Dエンジンです。非常に低レベルのAPIが提供されます。小規模なものではこれを直接使って書いてもよいでしょう。しかし実際の制作では、なんらかのフレームワークを使用する事になると思います。フレームワークには、Alternativa3D、Away3D、Flare 3D、Proscenium、Sophie3D、Yogurt3D、Frimaなどがあります。あるいは、必要な機能だけを実現し、動作を高速化するために独自のエンジンを開発することもできます。
DirectXやOpenGLがサポートされている端末でFlash Playerが動く環境なら、どのPC、モバイルデバイス、テレビでも3Dが高速に表示できると思います。Nintendo Wiiなど、コンテンツとの関わり方に特徴があるものを除けば、特定のモバイルデバイスやゲーム機、PC向けにのみコンテンツを作る意味は、ますます薄れてきそうです。
余談ですが、個人的にはMicrosoft Flight SimulatorがFlash Playerで動く日を楽しみに待ちたいと思います。いろんな意味で。


Author

  • Shuichi Ishikawa
    Shuichi IshikawaShuichi
    Ishikawa
  • MikasaHideyuki
    Hideyuki MikasaHideyuki
    Mikasa
Shuichi Ishikawa
執行役員/インタラクションデザイングループ

フロントエンド開発からクラウドサーバー構築まで、新しいことに興味がありすぎて時間が足りない制作部門リーダー。Adobeインフルエンサー。九州芸術工科大学→ドリームキャスト→サーバーサイド→フロントエンド→執行役員→早稲田大学大学院→Kinect v2

好きな飛行機
B787-8
好きな空港
SXM
好きな航空路
Y28
Hideyuki Mikasa
オーサリングエンジニア

mikasa's text