ActionScript Stage3D フレームワーク Proscenium プレビュー版公開

Proscenium の位置づけ

もうすでに、いくつもの Stage3D に対応した 3D フレームワークが存在する状況で、何故新しいフレームワークをいまさら開発？ という点について、開発側からは Proscenium は Flash 上で簡単に 3D コンテンツを試せるようにするためのもの、という説明がされています。

本格的なゲーム開発にも使える高機能 3D フレームワークを目指すのではなく、3D の基本機能はカバーした上での使い易さが重視されているようです。おそらく、最初に 3D コンテンツの作り方を学ぶためとか、手早くプロトタイプ開発を行いたい場合が想定されているのではないかと思います。

ちょっと話題はそれますが、今年の MAX のスニークピークでは、2 次元の画像を解析し 3 次元の空間として認識する技術がデモされていました。この技術が製品化されたら、写真 1 枚あれば 3D 空間モデルを作れることになります。そしたら、単純な 3D コンテンツならごく簡単に作れる時代がやってくるかもしれません。

その際には 3D フレームワークが必要だから Proscenium を開発している、というのはちょっと期待しすぎでしょうか？ いずれにせよ、いつかは Flash Professional に統合されて欲しいものです。

Proscenium の機能

Proscenium をダウンロードすると、ASDoc と チュートリアルが含まれています。ドキュメントにはまだ殆ど説明がありませんが、チュートリアルのサンプルはシンプルな記述になっているので、Proscenium の主要な機能の理解には便利です。

以下は、チュートリアルに含まれる機能の簡単な説明です。

1. 3 次元空間の生成
   X,Y,Z 軸を持つ空間を定義。空間内のオブジェクトは SceneGraph クラスに保持する。
   簡単に SceneGraph を利用できるように Sprite のサブクラスとして BasicScene クラスが用意されている。BasicScene のオブジェクトには scene という名前の属性として SceneGraph のインスタンスが定義されている。
   

   import com.adobe.scenegraph.*;
    
   public class Demo extends BasicScene
   {
     // ここにオブジェクトやイベントハンドラを定義
   }

   　
2. 光源の追加
   空間内に複数の光源を追加可能。光源の種類は、distant, spot, point の 3 種類から選択。BasicScene を使う場合は initLights() を上書きして光源を追加する。
   

   // 光源を scene に追加
   override protected function initLights():void
   {
     var light:SceneLight = new SceneLight();
     light.setPosition( -20, 20, 20 );
     scene.addChild(light);
   }

   　
3. カメラの設定
   空間内のカメラの位置やアングルを指定できる。BasicScene を使う場合、カメラの設定には resetCamera() を上書き。
   

   // カメラの位置と向きを調整
   override protected function resetCamera():void
   {
     var activeCamera:SceneCamera = scene.activeCamera;
     activeCamera.identity();
     activeCamera.appendTranslation( 0, -2, 0 );
     activeCamera.appendRotation( -15, Vector3D.X_AXIS );
   }

   　
4. 単純な形状の 3D 図形の生成
   MeshUtils クラスを使って、球、円錐、円柱、立方体、平面等を生成できる。BasicScene を使う場合、オブジェクトの追加には initModels() を上書き。
   

   // 立方体を scene に追加
   override protected function initModels():void
   {
     var cube:SceneMesh = MeshUtils.createCube(5);
     cube.appendTranslation(0,6,0);
     scene.addChild(cube);
   }

   　
5. アニメーションの設定
   BasicScene を使う場合、onAnimate() を上書きすることでアニメーションを実現できる。2 つ目の引数は前回の呼び出しからの経過時間。
   

   // オブジェクトの属性を更新する
   override protected function onAnimate(t:Number,dt:Number):void
   {
     cube.setPosition(Math.cos(t) * 3, 6 ,Math.sin(t) * 3);
   }

   　
6. オブジェクト表面の質感を指定
   Material オブジェクトを使って 3D オブジェクトに表面の色や質感の指定ができる。オブジェクト生成後に再設定することも可能。
   

   // オブジェクトの表面の色を指定
   var material:MaterialStandard = new MaterialStandard();
   material.diffuseColor.set(0,1,0);
   var cube:SceneMesh = MeshUtils.createCube(5, material);
   scene.addChild(cube);

   　
7. ビットマップからテクスチャーを作成
   読み込んだビットマップを Material オブジェクトに設定してテクスチャーとして使用。
   

   // 画像ファイルの埋め込み
   [Embed( source="myTexture.jpg" )]
   protected static const MyTexture:Class;
    
   // ビットマップデータをマテリアル素材として使用
   var myTexture:BitmapData = new MyTexture().bitmapData;
   var textureMap:TextureMap = new TextureMap(myTexture);
   material.diffuseMap = textureMap;
   var cube:SceneMesh = MeshUtils.createCube(5, material);
   scene.addChild(cube);

   　
8. オブジェクトの影を投影する
   SceneLight には影を付ける機能が組み込まれている。shadowMapEnabled 属性を true にして、addToShadowMap() メソッドで影を作る対象を指定すると影が表示されるようになる。addToShadowMap() に scene を指定すると、scene の子オブジェクト全てが対象になる。
   

   // 光源に影の対象となるオブジェクトを追加
   if (light.shadowMapEnabled)
   {
     lights.addToShadowMap(scene);
   }

   　
9. 外部ファイルからモデルの読み込み
   OBJ, DAE フォーマットのファイルからモデルを読み込んでシーンに追加できる。
   

   // 外部ファイルからモデルを読み込む
   loader = new OBJLoader("myModel.obj");
   loader.addEventListener(Event.COMPLETE,onLoad);
    
   // モデルを取り出して scene に追加する
   protected function onLoad(event:Event):void
   {
     var myModel:SceneNode = new SceneNode("myModel");
     var manifest:ModelManifest = loader.model.addTo(myModel);
     scene.addChild(myModel);
   }

   　
10. 読み込んだモデルとアニメーションの再生
    DAE XML フォーマットからモデルとアニメーション情報を取り出して再生できる。
    

    public var loader:ColladaLoader;
    // 外部ファイルから読み込んだアニメーションをシーンと関連付ける
    public function onLoad(event:Event):void
    {
      var manifest:ModelManifest = 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);
    }

    　
11. 物理エンジンの使用
    PelletManager クラスを利用して物理エンジンに対応したオブジェクトを生成できる。アニメーション用のメソッドも提供される。
    

    var mSim:PelletManager = new PelletManager();
    // 物理エンジン対応の立方体を生成
    var cube:SceneMesh = mSim.createBox(5, 5, 5);
    cube.appendTranslation(0, 6, 0);
    scene.addChild(cube);
     
    // 物理エンジンを使ったアニメーションの実現
    override protected function onAnimate(t:Number, dt:Number):void
    {
      mSim.stepWithSubsteps(dt, 2);
    }

    　

その他、後処理としてフィルタを適用して全体をぼかす等の効果も実現できます。

など、以上が主な機能です。