Stage3Dコンテンツ制作入門
作成日
9 November 2011
ページ ツール |
必要条件
Stage3DはFlash Player 11の目玉機能で、GPUを活用することで従来の1,000倍以上のグラフィックレンダリングができると言われています。本記事では、Flash Professional CS5／CS5.5とFlash Builder 4.5のユーザーを対象にStage3Dの導入方法を解説します。
Stage3Dとは
Stage3Dとは、Flash PlayerからGPUを利用するための仕組みのことです。Stage3Dは低レベルのAPI（ほぼアセンブラ）となっているため、一般の開発者に対する使いやすさはあまり考慮されていません。そのため、通常はAlternativa3D／Away3D／Starlingといったフレームワークを経由して利用します。
Stage3Dでは、表示リスト（DisplayObjectツリー）とは別の描画面を使って2D／3Dを表示します。レイヤー順はStageVideoの描画面が最下層にあり、その上側にStage3Dの描画面（複数の描画面があります）、一番上側には表示リストがのります。
Stage3Dで注意しておきたいのは、全てのハードウェア環境でGPUを利用できるとは限らない点です。アドビのページ「Stage3D unsupported chipsets, drivers | Flash Player 11, AIR 3」では、Stage3Dがサポートしていないチップセットが紹介されています。
ではStage3D非対応のハードウェア環境ではどのようになるのでしょうか。Stage3Dは自動的にGPUからCPUによる描画機能にフォールバックします。GPUが使えないためパフォーマンスは下がりますが、同じ描画結果を得ることができます。
ちなみにCPUによる描画機能にフォールバックした場合でも、Flash Player 11には高性能なソフトウェアレンダラーが搭載されているため、Flash Player 10までのFlash 3D表現（例：Papervision3D 2.1、Away3D 3.xなど）よりも高速に処理されると言われています。
Flash Professional CS5／CS5.5でのセットアップ方法
拡張機能のインストール
出荷状態のFlash Professional CS5／CS5.5ではFlash Player 11の書き出しをすることはできませんが、Flash Player 11の書き出しを可能にする拡張機能がアドビのブログ「Adding Flash Player 11 support to Flash Pro CS5 and CS5.5」で公開されています。まずは、これをセットアップしましょう。
- Flash Professional CS5.5ユーザーはページの中盤にあるリンク「CS 5.5 MXP - FP11Publish_cs55.mxp」を、Flash Professional CS5のユーザーは「CS 5 MXP - FP11Publish_cs5.mxp」をダウンロードします。
- 次にAdobe Extension Manager CS5.5（またはCS5）を使ってMXPファイルをインストールします。Extension Managerを起動したら、［インストール］ボタンをクリックし、先ほどダウンロードした「FP11Publish_cs55.mxp/CS 5 MXP - FP11Publish_cs5.mxp」ファイルを選択します。
以上でFlash Professional CS5／CS5.5のセットアップは完了です。
flaファイルごとの設定
Flash Playerの書き出しのバージョンはflaファイルごとに設定する必要があります。Flash Player 11の書き出しを行う場合は次の手順で設定してください。
- メニューの［ファイル］→［パブリッシュ設定］を選択します。
- ［パブリッシュ設定］ウィンドウの上部で、［Player］が「Flash Player 11.0」、［スクリプト］が「ActionScript 3.0」であることを確認します。Stage3Dを利用するにはFlash Player 11以上が必要になるためです。
- 左側メニューの［パブリッシュ］の［Flash(.swf)］にチェックを入れ、右下の［ハードウェアアクセラレーション］で［レベル1-ダイレクト］を選択します。 ※もしくは左側メニューの［その他の形式］の［HTMLラッパー］にチェックを入れ、［テンプレート］で［Flash WMODE Direct］を選択します。
- ［OK］ボタンをクリックします。
3の［ハードウェアアクセラレーション］で［レベル1-ダイレクト］という設定は、HTMLにSWFを埋め込む際にwmodeパラメーターを「direct」に指定することを示しています。wmodeパラメーターの値がdirectに設定されていない場合にStage3Dを利用しようとすると、次のランタイムエラーが発生します。
Error #2044: ハンドルされていない ErrorEvent : text=Error #3702: Context3D を使用できません。
Flash Builder 4.5でのセットアップ方法
Flex SDKの準備
Flash Builder 4.5も出荷状態ではFlash Player 11の書き出しができないので、セットアップする必要があります。Flash BuilderのSWFの書き出しはFlex SDKに依存するので、Flex SDKを設定することでFlash Player 11対応のSWF書き出しが可能になります。以下は、Flash Player 11対応のFlex SDKの設定方法です。
- まずはAdobe Flash Playerサポートセンターのページ内にある「Download the playerglobal.swc to target the 11.0 APIs」リンクから、Flash Player 11対応の「playerglobal.swc」をダウンロードします。ファイル名が「playerglobal11_0.swc」となっているので、「playerglobal.swc」にリネームしておきます。
- Flash Builderのアプリケーションフォルダー内のsdksフォルダーを開きます。通常は次のディレクトリです。「4.5.1」フォルダーがあるので、それを中身ごと複製して別名をつけます。ここでは「4.5.1_FP11」としておきます。この複製したフォルダーに新しいFlex SDKを追加します。
- Windows C:\Program Files\Adobe\Adobe Flash Builder 4.5\sdks
- Mac /Applications/Adobe Flash Builder 4.5/sdks
- 「4.5.1_FP11」フォルダー内の「frameworks/libs/player/」のパスを開き、「11.0」というフォルダーを作成し、STEP01でダウンロード＆リネームしたplayerglobal.swcファイルを格納します。
- Flash Builderを起動します。メニューから［ウィンドウ］→［設定］（Macの場合は［Flash Builder］→［環境設定］）を選択して［環境設定］ウィンドウを開き、左側のメニューから［Flash Builder］→［インストールされている Flex SDK］を選択します。右側の［追加］ボタンをクリックし、先ほど設定したFlex SDKのパスを設定します。これでFlash Player 11に対応したFlex SDKとなります。
以上でFlash Builder 4.5のセットアップは完了です。
プロジェクトごとの設定
Flash Builderも、Flash Player 11の書き出しを行う場合はプロジェクトごとに設定する必要があります。
- メニューより［ファイル］→［新規］→［ActionScriptプロジェクト］を選択し、Flash Player 11用の新規プロジェクトを作成します。
- プロジェクトを作成したらメニューより［プロジェクト］→［プロパティ］を選択し、［プロパティ］ウィンドウを開きます。左側の一覧から［ActionScript コンパイラー］を選択します。
- ［特定のSDKを使用する］は、Flash Player 11対応のFlex SDKを選択します（※手順通りにすると図8のように「4.5.1 (build 21328)」が表示されます）。［Adobe Flash Player オプション］の［特定のバージョンを使用］に「11.0.0」を入力します。［追加コンパイラー引数］に「-swf-version=13」を入力します。
- ［OK］をクリックします。
- 次にwmodeの設定を行います。［パッケージエクスプローラー］パネルから「html-template/index.template.html」ファイルを選択し、右クリックから［アプリケーションから開く］→［テキスト・エディター］を選択します。
- HTMLのソースコードで、wmodeがdirectとなるように次の赤色部分のコードを追記します。
var params = {};
params.quality = "high";
params.bgcolor = "${bgcolor}";
params.allowscriptaccess = "sameDomain";
params.allowfullscreen = "true";
params.wmode = "direct";
以上でFlash Builderのプロジェクトごとの設定は完了です。
2Dフレームワーク「Starling Framework」
Starling Frameworkは、Stage3D上に構築された、オープンソースの2D描画用ActionScriptフレームワークです。FreeBSDライセンス下で配布されており、現在バージョン 0.9が公開されています。Starling Frameworkは、Flashの表示リストのAPIに似せて開発されているため、使い方を直感的に理解しやすいという特徴があります。簡単なサンプルを通して、使い方を学んでみましょう。ここでは、Flash Professionalをベースに解説します。
Starling Frameworkのサイトからソースコードをダウンロードします。
- Flash Professional CS5／CS5.5ではドキュメントクラスに次のMainクラスを割り当てます（Flash BuilderではMainクラスをデフォルトのアプリケーションに設定します）。Starling Frameworkでは、Starlingクラスのコンストラクタへの第1引数に自作のクラス（ここではMySpriteクラス）を、第2引数にstageの参照をセットします。
ドキュメントクラス
package {
import flash.display.Sprite;
import starling.core.Starling;
public class Main extends Sprite {
public function Main() {
var star:Starling = new Starling(MySprite, stage);
star.start();
}
}
}
- 自作のクラス（MySpriteクラス）は、starling.display.Spriteクラスを継承したサブクラスとして作成します。flash.display.Spriteクラスではないので注意してください。コンストラクタではEvent.ADDED_TO_STAGEイベントのハンドリングを記述します。これはStage3Dの初期化が完了し、画面に表示されたタイミングで発生するイベントです。なお、ここでのEventクラスも「starling.events.Event」クラスであり、「flash.events.Event」クラスではありませんので、import文の記述には注意ください。以下のコードがStarling Frameworkを利用する上で最小のコードです。
MySpriteクラス
package {
import starling.display.Sprite;
import starling.events.Event;
public class MySprite extends Sprite {
public function MySprite() {
addEventListener(Event.ADDED_TO_STAGE, addedToStageHandler);
}
private function addedToStageHandler(event:Event):void {
// ここから記述
}
}
- 次に簡単な四角形が表示されるコードを試してみましょう。addedToStageHandler()関数に次のコードを記述します。
private function addedToStageHandler(event:Event):void {
// ここから記述
// 赤い四角形を作成
var rect:Image = new Image(Texture.empty(128,128,0xFFFF0000));
rect.x = 200;
rect.y = 200;
addChild(rect);// 画面に表示
// エンターフレーム
addEventListener(Event.ENTER_FRAME, function():void{
// 2度ずつ回転(ラジアン角)
rect.rotation += 2 * Math.PI / 180;
});
}
Imageクラスはビットマップを表示するクラスです。ここでは単色塗りの128px四方の四角形を作成し、XY座標（200, 200）の位置に四角形を配置しました。エンターフレームでrotationプロパティーを加算することで、四角形が時計回りに回転するアニメーションを設定しています。Starling Frameworkの場合、角度はラジアン角となります。
- コードを記述したら、Flash Professional CS5／CS5.5のユーザーはメニューから［ファイル］→［パブリッシュプレビュー］→［デフォルト(HTML)］を選択して、パブリッシュプレビューをします。Flash Builder 4.5のユーザーは［実行］を選択してブラウザーで確認します。
※Flash Professional CS5／CS5.5のムービープレビューでは、ムービープレビューに使っているプレイヤーがFlash Player 11に対応していないためランタイムエラーが発生します。
※Starling Framework v0.9だと「starling.events. TouchMarker」クラスの22行目でコンパイルエラーが起こる場合があります。その場合は「[Embed(source = "media/textures/touch_marker.png")]」となっている箇所をコメントアウトすることで、コンパイルエラーを解消することができます。
Starling Frameworkの基本的な使い方ということで非常にシンプルなサンプルを用いましたが、筆者のサイトではStage3D+Starling Frameworkの魅力を体験できるサンプルをソースコードとともに公開しています。
3Dフレームワーク「Alternativa3D」
Alternativa3Dは、Stage3D上に構築された、3D用ActionScriptフレームワークです。オープンソースではありませんが、ライセンスに関するルールを守れば無償で利用することができます。
Alternativa3DはFlash Player 10の頃から注目を集め始めており、Flash Player 11対応も早く、またAPIの豊富さやパフォーマンスの高さで今後に期待できるフレームワークです。Adobe Labsで公開されている純正のProsceniumもフレームワークとしてありますが、ナレッジが増えているという点でここではAlternativa3Dを紹介します。簡単なサンプルを通して、Alternativa3Dの使い方を学んでみましょう。ここでは、Flash Professionalをベースに解説します。
- Alternativa3DのサイトからSWCファイルをダウンロードします。Stage3Dに対応しているのはバージョン8からで、執筆時点ではバージョン8.17.0が公開されています。
- ダウンロードしたSWCファイルを設定します。Flash Professional CS5／CS5.5の場合、メニューから［ファイル］→［ActionScript3.0設定］を選択し［ActionScript3.0の詳細設定］ウィンドウを開きます。［ライブラリパス］タブを選択し、［+］ボタンをクリックしてFLAファイルからみたSWCファイルを格納しているフォルダーへの相対パス（絶対パスでも可）を記述します。
Flash Builder 4.5での場合、メニューから［プロジェクト］→［プロパティ］を選択し［プロパティ］ウィンドウを開きます。左側の一覧から［ActionScriptビルドパス］を選択し、［ライブラリパス］タブを選択し、［SWCの追加］ボタンを選択して参照したいSWCファイルを選択します。
次にAlternativa3Dを利用するためのテンプレートのコードを紹介します。Alternativa3Dにはカメラ、ビューポート、3D空間の概念があるのでそれらを初期化し、エンターフレームイベントではレンダリングを実行するという処理を記述しています。Flash Professional CS5／CS5.5ではドキュメントクラスに次のMainクラスを割り当てます（Flash BuilderではMainクラスをデフォルトのアプリケーションに設定します）。
package {
import alternativa.engine3d.controllers.*;
import alternativa.engine3d.core.*;
import alternativa.engine3d.materials.*;
import alternativa.engine3d.primitives.*;
import alternativa.engine3d.resources.*;
import flash.display.*;
import flash.events.*;
public class Main extends Sprite {
private var camera:Camera3D; // カメラ
private var scene:Object3D; // シーン(3D空間)
private var view:View; // ビューポート
private var stage3d:Stage3D; // Stage3Dオブジェクト
public function Main() {
stage3d = stage.stage3Ds[0];
stage3d.addEventListener(Event.CONTEXT3D_CREATE, context3DCreateHandler);
stage3d.requestContext3D();
}
private function context3DCreateHandler(event:Event):void {
init3D();
initModels();
}
private function init3D():void{
// ビューポート作成
view = new View(stage.stageWidth, stage.stageHeight);
addChild(view);
// カメラ作成
camera = new Camera3D(1, int.MAX_VALUE);
camera.view = view;
// カメラの座標制御のコントローラーを作成
var cameraCtrl:SimpleObjectController = new SimpleObjectController(this, camera, 1);
cameraCtrl.setObjectPosXYZ(0, -1000, 0); // カメラのXYZ座標を設定
cameraCtrl.lookAtXYZ(0, 0, 0);// カメラの目標点のXYZ座標を設定
// 3Dシーン作成
scene = new Object3D();
scene.addChild(camera); // 3D空間にカメラを追加
addEventListener(Event.ENTER_FRAME, render3D);
}
private function initModels():void{
// ここにコンテンツ部分を記述
}
private function render3D(event:Event):void {
// レンダリング
camera.render(stage3d);
}
}
記述方法において、従来の3Dフレームワーク（Alternativa3D ver 7やPapervision3D 2.1など）と異なる点として、Alternativa3D ver8では「Stage3Dオブジェクトへの参照」が必要になります。Stage3Dオブジェクトはstage.stage3DsプロパティーにVector.<Staeg3D>型の配列として格納されています。Stage3Dオブジェクトは初めに初期化する必要があるので、requestContext3D()メソッドを使って初期化処理を呼び出します。
※先述のStarling FrameworkでもStage3Dオブジェクトの初期化が必要ですが、この部分の処理がフレームワークに内蔵されています。
- ここでは単色塗りの平面を作成し、回転のアニメーションをつけてみましょう。関数initModels()の部分に次のコードを記述します。
private function initModels():void{
// ここにコンテンツ部分を記述
// マテリアル作成
var material:FillMaterial = new FillMaterial(0xFF0000);
// プリミティブ作成
var plane:Plane = new Plane(1000, 1000);
plane.setMaterialToAllSurfaces(material);
scene.addChild(plane); // 3D空間に追加
// リソースへのアップロード
for each (var resource:Resource in scene.getResources(true)){
resource.upload(stage3d.context3D);
}
addEventListener(Event.ENTER_FRAME, function():void{
// オブジェクトのモーション
plane.rotationX += Math.PI / 180;
plane.rotationY += Math.PI / 180;
});
}
上記スクリプトの処理の概要は次の通りです。4つ目の項目がAlternativa3D特有のコードですので、忘れずに記述しましょう。
- マテリアルを作成。
- 平面を作成。
- 平面にマテリアルを適用。
- 3D空間内の全てのリソースにcontext3Dオブジェクトをアップロード。
- エンターフレームイベントでは、rotationXとrotationYプロパティーに1度ずつ加算して回転するアニメーションを適用。Alternativa3Dでは角度は全てラジアン角です。
- コードを記述したら、Flash Professional CS5／CS5.5のユーザーはメニューから［ファイル］→［パブリッシュプレビュー］→［デフォルト(HTML)］を選択して、パブリッシュプレビューをします。Flash Builder 4.5のユーザーは［実行］を選択してブラウザーで確認します。
※Flash Professional CS5／CS5.5のムービープレビューでは、ムービープレビューに使っているプレイヤーがFlash Player 11に対応していないためランタイムエラーが発生します。
Alternativa3Dの基本的な使い方ということで非常にシンプルなサンプルを用いましたが、筆者のサイトではStage3D+Alternativa3Dの魅力を体験できる様々なサンプルをソースコードとともに公開しています。
おわりに
これまでFlashの処理速度低下のボトルネックは、描画フェーズに存在することが多いと言われてきました。Flash Player 11で搭載されたStage3DはGPUを活用することで圧倒的なパフォーマンスを得ることができ、描画負荷をさらに軽減できるため、表現の可能性が広がったと言えます。2Dにも3Dにも使えるStage3Dを活用して、新しい表現に挑戦してみましょう。
