Adobe
製品
Acrobat
Creative Cloud
Creative Suite
Digital Marketing Suite
Digital Publishing Suite
Elements
Photoshop
Touch Apps
その他の製品一覧
ソリューション
デジタルマーケティング
デジタルメディア
教育
金融機関
Web Experience Management
その他のソリューション
ラーニング サポート ダウンロード 会社情報
ご購入
アドビストア 安心のサポート& サービス
アカデミックストア 学生、教職員、個人向け
アドビライセンスストア 中小企業向け
ボリュームライセンスについて 企業、教育機関、官公庁向け
販売パートナー
キャンペーン情報
検索
 
情報 サインイン
ようこそ、 さん カート 注文状況 マイアカウント
マイアカウント
注文状況
アカウント情報の変更
コミュニケーションの設定を変更
サインアウト
サインインの目的 お客様のアカウントや体験版ダウンロード、製品の拡張機能、コミュニティエリアへのアクセスなどを管理するため
Adobe
製品 セクション ご購入   検索  
ソリューション 会社情報
サポート ラーニング
サインイン サインアウト 注文状況 マイアカウント
先行予約の提供開始予定日Date. 商品が発送されるまで、クレジットカードには課金されません。提供開始の予定日は変更される場合があります。 先行予約の提供開始予定日Date. ダウンロードの準備が整うまで、クレジットカードには課金されません。提供開始の予定日は変更される場合があります。
個数:
ご購入には学生・教職員個人版の購入資格の確認が必要です。
小計
カートの中身を見る
Adobe Developer Connection / Flashデベロッパーセンター /

ADC MEETUP ROUND03 レポート Flash SESSION2: Stage3Dの利用で広がるFlashの表現と可能性

著者 池田 泰延氏

池田 泰延氏
  • http://clockmaker.jp/

著者 黄 聖實氏(ホァン ソンシル)

黄 聖實氏(ホァン ソンシル)
  • 株式会社ミツエーリンクス

Content

  • 1 Stage3D_アップグレードされたグラフィック表現
  • 2 従来のFlash Playerとのパフォーマンス比較
  • 3 Stage3Dを用いた事例
  • 4 Stage3Dを利用するためのフレームワーク
  • 5 Stage3D導入のための環境設定
  • 6 GPUが使えない環境でのフォールバック

作成日

24 November 2011

ページ ツール

Facebookでシェア
Twitterでツイート
LinkedInでシェア
ブックマーク
印刷

タグ

必要条件

ユーザーレベル

すべて

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で見られたポリゴン欠けが発生しなくなるという。

図1.1 Zバッファ処理前(左)と処理後(右)
図1.1 Zバッファ処理前(左)と処理後(右)

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

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

  • マシン名:MacBook Pro 17inch Mid-2010
  • OS:Mac OS X Lion 10.7
  • CPU:2.66 GHz Intel Core i7
  • メモリ:8 GB 1333 MHz DDR3
  • グラフィックカード:NVIDIA GeForce GT 330M 512 MB
  • ブラウザー:Safari 5.1

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

図2.1 Flash Player 10の場合、約2,000個のポリゴンで約40FPS
図2.1 Flash Player 10の場合、約2,000個のポリゴンで約40FPS
図2.2 Flash Player 11(Stage3D)の場合、約8,000個のポリゴンで約60FPS
図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.3 Flash Player 9の場合、16個のモデリングデータで約9FPS
図2.4 Flash Player 10の場合、16個のモデリングデータで約13FPS
図2.4 Flash Player 10の場合、16個のモデリングデータで約13FPS
図2.5 Flash Player 11(Stage3D)の場合、125個のモデリングデータで約60FPS
図2.5 Flash Player 11(Stage3D)の場合、125個のモデリングデータで約60FPS

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

図2.6 Flash Player 10の場合、40個ほどの表示が限界
図2.6 Flash Player 10の場合、40個ほどの表示が限界
図2.7 Flash Player 11(Stage3D)の場合、100個以上表示しても滑らかに動く
図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枚の表示でも問題ない
図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 スクウェア・エニックス社のデモコンテンツ
図3.1 スクウェア・エニックス社のデモコンテンツ

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

fig3-2

図3.2 Customize your Nissan JUKE (C)NISSAN

fig3-3

図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の描画面
図4.1 Flash Player 11の描画面

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

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

図4.2 Stage3DのAPI構造
図4.2 Stage3DのAPI構造

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

図4.3 Starlingの機能
図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 パブリッシュ設定画面
図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普及率
図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

製品

  • Acrobat
  • Creative Cloud
  • Creative Suite
  • Digital Marketing Suite
  • Digital Publishing Suite
  • Elements
  • モバイルアプリ
  • Photoshop
  • Touch Apps

ソリューション

  • デジタルマーケティング
  • コンテンツオーサリング
  • Web Experience Management

業種別ソリューション

  • 教育
  • 金融機関

サポート

  • ヘルプ&サポート
  • 注文と返品
  • ダウンロードに関するヘルプ
  • ユーザー登録に関するヘルプ

ラーニング

  • ADC: Adobe Developer Center
  • Adobe TV
  • Design Magazine
  • Photoshop Magazine
  • Focus In

ご購入方法

  • アドビストア
  • アカデミックストア
  • アドビライセンスストア
  • ボリュームライセンスについて
  • 販売パートナー
  • キャンペーン情報

ダウンロード

  • Adobe Reader
  • Adobe Flash Player
  • Adobe AIR
  • Adobe Shockwave Player

会社情報

  • プレスルーム
  • パートナープログラム
  • 企業の社会的責任(英語)
  • 採用情報
  • 投資家の皆様へ(英語)
  • イベント&セミナー
  • Legal(英語)
  • セキュリティ
  • お問い合わせ
国・地域および言語の選択 日本(変更)
国・地域および言語の選択 閉じる

North America

Europe, Middle East and Africa

Asia Pacific

  • Canada - English
  • Canada - Français
  • Latinoamérica
  • México
  • United States

South America

  • Brasil
  • Africa - English
  • Österreich - Deutsch
  • Belgium - English
  • Belgique - Français
  • België - Nederlands
  • България
  • Hrvatska
  • Česká republika
  • Danmark
  • Eastern Europe - English
  • Eesti
  • Suomi
  • France
  • Deutschland
  • Magyarország
  • Ireland
  • Israel - English
  • ישראל - עברית
  • Italia
  • Latvija
  • Lietuva
  • Luxembourg - Deutsch
  • Luxembourg - English
  • Luxembourg - Français
  • الشرق الأوسط وشمال أفريقيا - اللغة العربية
  • Middle East and North Africa - English
  • Moyen-Orient et Afrique du Nord - Français
  • Nederland
  • Norge
  • Polska
  • Portugal
  • România
  • Россия
  • Srbija
  • Slovensko
  • Slovenija
  • España
  • Sverige
  • Schweiz - Deutsch
  • Suisse - Français
  • Svizzera - Italiano
  • Türkiye
  • Україна
  • United Kingdom
  • Australia
  • 中国
  • 中國香港特別行政區
  • Hong Kong S.A.R. of China
  • India - English
  • 日本
  • 한국
  • New Zealand
  • 台灣

Southeast Asia

  • Includes Indonesia, Malaysia, Philippines, Singapore, Thailand, and Vietnam - English

Copyright © 2012 Adobe Systems Incorporated. All rights reserved.

利用条件 | プライバシーポリシーとCookie (更新)

Reviewed by TRUSTe: site privacy statement