Adobe Developer Connection（ADC）と連動する開発者向けイベント「ADC MEETUP ROUND3」では、General Sessionの他にHTML関連情報とFlash関連情報の2つのトラックが設けられた。FlashトラックのSession2では、池田泰延氏により、Flash Player 11の新機能であるStage3Dのデモや解説、そして活用方法などの紹介が行われた。

 

• セッション資料

 

1　Stage3D_アップグレードされたグラフィック表現

Stage3Dは、GPUを利用することで2D／3Dのグラフィック表示を格段に向上させるFlash Player 11の新機能で、Adobe Flash Platformランタイム（Flash PlayerとAdobe AIR）が動作するPC／モバイル／TVなどの様々なデバイス上で利用できる。

従来のFlash Playerは数千のポリゴンを30Hz（Hzは1秒に描画する数）で表示できたが、Stage3Dを使うとHD級の解像度でも数万のポリゴンを60Hzで表示可能になる。また、Stage3DではZバッファで処理するため、Flash Player 9と10で見られたポリゴン欠けが発生しなくなるという。

 

2　従来のFlash Playerとのパフォーマンス比較

続いて、従来のFlash PlayerのコンテンツとStage3Dを利用したFlash Player 11のコンテンツを用いてパフォーマンスを比較するデモが行われた。なお、デモに使用したマシンのスペックは以下の通り。

まずは、立方体表示するデモ。Flash Player 10では約2,000個のポリゴンを表示して約40FPSだったのに対して、Flash Player 11では約8,000個のポリゴンを表示したにも関わらず、約60FPSという結果となった。

図2.1　Flash Player 10の場合、約2,000個のポリゴンで約40FPS

図2.2　Flash Player 11（Stage3D）の場合、約8,000個のポリゴンで約60FPS

次は、XML形式の3次元グラフィックデータのファイルフォーマットであるColladaを利用した際の比較デモ。Papervision3Dを使ったFlash Player 9では16個のモデリングデータで約9FPS、Flash Player 10では同じ数で約13FPSだったのに対して、Stage3Dを適用してAlternativa3Dを使ったFlash Player 11では125個のモデリングデータにも関わらず、約60FPSという結果となった。

図2.3　Flash Player 9の場合、16個のモデリングデータで約9FPS

図2.4　Flash Player 10の場合、16個のモデリングデータで約13FPS

図2.5　Flash Player 11（Stage3D）の場合、125個のモデリングデータで約60FPS

続いてのデモは、テキスチャを適用して光源が表面に映った際の表現できる立方体の数の比較だった。池田氏によると、Flash Player 10までは40個ほど表示するのが限界だったが、Flash Player 11では100個以上の数を表示しても滑らかに動作するという。

図2.6　Flash Player 10の場合、40個ほどの表示が限界

図2.7　Flash Player 11（Stage3D）の場合、100個以上表示しても滑らかに動く

より実用的なデモとして、アップル社のiTunesで使われているカバーフローのようなインターフェイスを表現したデモも紹介された。池田氏によると、Flash Player 9でPapervision3Dを使った場合は表示できるスライドの数は20枚ほどが限界で、Flash Player 11のStage3Dを利用すると200枚の表示でも問題ないという。

図2.8　Flash Player 11（Stage3D）では200枚の表示でも問題ない

池田氏が調べたところによると、Papervision3Dを使ったFlash Player 9では約6,000個のポリゴンを10FPS、Alternativa3Dを使ったFlash Player 10では約6,000個のポリゴンを15FPS、Stage3DでAlternativa3Dを使ったFlash Player 11は約100,000個のポリゴンを60FPSで表現できるようだ。

このように圧倒的なパフォーマンスの向上を受けて、「GPUを使うことで、Flash Player 10まで表現が難しかったことが色々と実現できるようになった」と池田氏は語る。

 

3　Stage3Dを用いた事例

池田氏は実案件でStage3Dが利用されている事例も紹介した。まず、国内事例として紹介されたのは、スクウェア・エニックス社のオンラインサービス「SQUARE ENIX MEMBERS」の3Dアバター用のコンテンツだ。来年春を公開予定で、池田氏本人も開発に関わっており、「ブラウザー上で動くコンシューマゲームとして挑戦している」という。

図3.1　スクウェア・エニックス社のデモコンテンツ

海外事例としては、日産自動車のジューク（JUKE）のヨーロッパ向けプロモーションサイト、そしてAdobe MAX 2011で紹介されたAngry BirdsのPCブラウザー版コンテンツが紹介された。

図3.2　Customize your Nissan JUKE　(C)NISSAN

図3.3　Angry Birds　(C)2011 Rovio Entertainment Ltd. Angry Birds. Privacy Policy. EULA.

 

4　Stage3Dを利用するためのフレームワーク

描画面の際、Stage3Dはどう扱われるのか。Flash Player 11では、通常のMovieClipやSpriteを生成してどんどん重ねっていく既存のStageとは別に、GPU処理をするために別のレイヤーが存在する。その中で2D／3Dのグラフィック処理のために存在するレイヤーがStage3Dだという。

図4.1　Flash Player 11の描画面

池田氏はStage3Dの記述方法として、AGALを使って開発するのも1つの手であるが、記述が難しく開発工数が増えてしまうので、それを簡単に使えるように設計されているフレームワーク使うことをすすめている。

ちなみにAGAL（Adobe Graphics Assembly Language）とは、ポリゴンの拡大／縮小／移動／色の適用／照明処理／テキスチャ反映などを処理する際に、ActionScriptで指示した内容をGPUに翻訳してくれる、アドビで定義したアセンブラ言語（assembly language）だ。

図4.2　Stage3DのAPI構造

まず、2Dフレームワークとして紹介されたStarlingの特徴について、「パーティクル効果やスプライトシート、ビットマップフォント処理などの機能を持っていて、直感的に操作できるAPIであり、FlashのAPIに似た構造になっているので使いやすい。そしてオープンソース」と池田氏は説明する。

図4.3　Starlingの機能

3DフレームワークとしてはAlternativa Platform、Away3D、Flare3D、そしてAdobeで公開したProsceniumを紹介した。下表は、池田氏が紹介した各フレームワークの特徴をまとめたものだ。

Stage3Dに利用できる3Dフレームワーク

Alternative Platform	・無償利用可 ・ロシアで開発されているゲーム向け3Dライブラリ ・マルチプレイヤー用のサーバー、物理エンジン、シーンエディター ・カメラ／プリミティブ／ライト／マテリアル ・プラットフォームのツール: Alternativa3D、AlternativaEditor、Alternativa Physics、AlternativaCore、AlternativaGUI
AWAY3D	・Apache License 2.0のオープンソースの3Dライブラリ ・Away Physics（業界標準のBulletエンジンの開発も進んでいる） ・AWDフォーマットでモデルデータの読み込みが可能（AWDフォーマットはColladaに比べて12分の1ファイルサイズ） ・MayaやBlenderをサポートしており、さらに3ds MaxとCINEMA 4Dをサポート予定
FLARE3D	・無償利用可 ・アニメーション／ライト／マテリアル／物理演算・衝突判定入力補助／パーティクル／3Dでのドラッグ＆ドロップ ・ファイルサポート: 3dsmax、Collada、Obj ・Flare3D Studio（Flash Professionalに似たタイムラインを持ったインターフェイスのIDE）
Proscenium	・無償利用可 ・アドビ製の3Dフレームワーク ・評価用のプロジェクト

池田氏は「自分自身もAlternativa3Dをよく使っていて、簡単に利用できるようにするライブラリをSpark projectにコミットしている」と語る。

 

5　Stage3D導入のための環境設定

続いて、Stage3D向けのコンテンツを開発するための環境設定方法について、Flash Professional CS5／CS5.5をベースに説明が行われた。出荷状態のFlash Professional CS5／CS5.5ではStage3Dを利用できないが、同製品のプロダクトマネージャーであるリチャード・ガルマン氏が自身のブログで公開している拡張機能をインストールすることで、Flash Player 11向けの開発が可能になる。

まず、ガルマン氏のブログ「Adding Flash Player 11 support to Flash Pro CS5 and CS5.5 « Galvan on Flash」からMXPファイルをダウンロードし、拡張機能マネージャーを利用してインストールするとFlashの出力設定にFlash Player 11の項目が追加される。

Stage3DはGPUを使うため、HTMLにSWFを埋め込む際にwmodeパラメーターをdirectに設定する必要があり、通常のムービープレビューでは確認できないので、HTML上で書き出す必要がある。書き出し作業を短縮するために、［パブリッシュ設定］ウインドウの［ハードウェアアクセラレーション］で［レベル1-ダイレクト］を選択すると、wmodeパラメーターが自動でdirectに設定される。

図5.1　パブリッシュ設定画面

なお、Flash Builderの場合’は、Flex SDKにFlash Player 11対応のplayerglobal.swcを入れることで対応可能になる。

 

6　GPUが使えない環境でのフォールバック

池田氏は「PC用のFlash Player 10の普及率はすでに99%になっている。最近は新しいバージョンが発表され、1年くらいで普及率が実案件で使える程度までに上がる。Flash Player 11についても、同様の展開が期待できる」と語る。

図6.1　2011年6月時点でのFlash Player普及率

ただ、いくらFlash Player 11が普及しても、再生マシンのスペックによってはStage3Dを利用できないこともある。Stage3Dでは、そうした状況を見越して、GPUを使えない環境では3Dレンダリング処理をCPUに自動で切り替えるフォールバック機能が実装されている。CPUでの処理になったとしても、Flash Player 11ではバージョン9や10よりもパフォーマンスが非常に高くなっている。

実際にフォールバックのデモとして、Flash Player 9と10で作ったコンテンツとStage3Dで強制的にフォールバックしたコンテンツのパフォーマンス比較が行われた。その結果は、Flash Player 9では約10FPS、Flash Player 10では約15FPS、Flash Player 11では約30FPSという結果となった。

検証する際、Stage3Dには「SOFTWARE（CPU）」「AUTO（GPU/CPU、GPU優先）」などのようにレンダリング方法の指定ができるため、強制的にCPUで処理したければ以下のように記述すればよいとのこと。

stage3d = stage.stage3Ds[0];
stage3d.addEventListner(Event.CONTEXT3D_CREATE, handler);
stage3d.requestContext3D(Context3DRecderMode.SOFTWARE);

なお、Stage3Dのフォールバックの際は、GPUに対応してないマシンに対し、OpenGL ES2やDirectX 9.0とともに一番速いソフトウェアレンダラーであるTransGamingのSwiftShaderを使ったCPU処理に自動的に切り替わるようだ。

最後にStage3Dのサポート環境に関する情報として、以下の記事を紹介した。

• Stage3D unsupported chipsets, drivers | Flash Player 11, AIR 3
• Stage3D hardware accelaration available GPU list

なお、ADCには池田氏による、Stage3Dを始める上でのツールのセットアップ方法や、StarlingとAlternativa3Dの初歩的な使い方をまとめた「Stage3Dコンテンツ制作入門」があるので、こちらも参考にしていただきたい。

 

関連記事

ADC MEETUP ROUND03 レポート

• SESSION1： General Session from Adobe MAX 2011
• HTML SESSION2： Adobe new tools : Introduction of Edge, Muse and Proto
• HTML SESSION3： HTML5でユーザビリティを高めるためのフォーム構築法
• HTML SESSION4： Design Tips & Development with jQuery Mobile and PhoneGap
• Flash SESSION3： AIR3の新機能：Captive Runtime + Native Extensions
• Flash SESSION4： What's new in Flex 4.6 SDK

著者について