Stage3D+Away3DでR2D2を作ってみた(準備編)


Flash Player11の目玉機能、Stage3Dを試そうと思いますが、Stage3DのAPIを直に利用するのは難しいので、Adobe Stage3Dのサイトで紹介されているようなフレームワークやライブラリを利用します。その一つである「Away3D」を試してみました。単に球体や立方体を表示するだけだとつまらないので、「R2D2」を作ってみました!その手順をご紹介したいと思います。

(作ったR2D2のデモサンプルの公開は開発編で!)

Away3Dについて

まずAway3Dについてですが、Away3D自体は以前より存在するFlash Playerの3D表現のためのフレームワークです。その「Away3D 4.0」ではStage3Dを利用しています。現在はAlpha版が公開されており、リポジトリから日夜開発されている様子が伺えます。リリースのロードマップも公開されています。

Stage3DのフレームワークとしてはAdobe製のProsceniumAlternative3D等がありますが、Away3Dは、

  • 比較的とっつきやすいAPI
  • Away3D 3.0以前で作られたコンテンツのサンプルが参考になる
  • PrefabというUVマッピングツールがある
  • という点がメリットだと思いました。

    開発環境を整える

  • Flash Builder + Flex SDK
  • 何はともあれFlash BuilderやFlexSDKの開発環境を整えなくてはなりません。ここのBlog「FlashPlayer 11 対応コンテンツを FlashBuilder 4.5 で作る」やMolehill を搭載した Flash Player 11 インキュベーターリリースが公開等が参考になるかと思います。

  • プロジェクトの作成
  • ActionScriptプロジェクトを作成します。プロジェクトプロパティで追加コンパイラー引数に

    -swf-version=13

    の追加をお忘れなく。

  • html-templateの書き換え
  • Stage3DはGPU処理によって3D描画を行うなので、それをSWFがエンベッドされるhtmlに指定する必要があります。プロジェクト>html-templateフォルダ>index.template.htmlをテキストエディタで開いて、下記の一行をparamsあたりに追記します。

    params.wmode = “direct”;

  • Away3Dの設定
  • ソースコードをここからDLし、ソースパスにsrcフォルダを追加する等でプロジェクトにパスを通します。

    ここまででひとまずFlashの準備を整えたところで、3DCGの行程に入ります。

    モデリングを行う

    3Dオブジェクトの作成を行います。3DCGは専門ではないのでソフトウェアについては詳しく述べませんが、自分は昔から慣れているSTRATAを使っています。ただ3DCGソフトウェア選びは検証が必要で、そのソフトウェアがエクスポートするオブジェクトデータなりテクスチャ・マッピングデータなりが、使いたいStage3Dフレームワークがデータを読み込んできちんと構成できるか、というのはかなり試行錯誤が必要だなーと強く感じました。因みにAway3D 4.0では未だColladaファイル形式がパースできないようなので、今後に期待です。

    ところで、なんでR2D2を作るかというと、形状が単純なのと、テクスチャマップの貼り方をいろいろ試せるからです(少なくともC-3POよりは作りやすい)。但し、実際にパフォーマンスを気にする場合はポリゴンメッシュを単純にしたり、それなりにノウハウと時間がかかる作業かと思いますが、今回はAway3Dのお試しということでざっくりとモデリングしました。

    テクスチャマップを作成する

    R2D2のオブジェクトに貼付けるテクスチャマップを作成します。今回はテクスチャマップとして、

  • 基本的な色情報を与える拡散マップ(Diffuse)
  • デコボコを表現する法線マップ(Normal)
  • 反射を強度与えるスペキュラマップ(Specular)
  • を用意します。Normalマップは3Dソフトウェアが生成したり、Photoshopのプラグイン等で作成できるものがあったりします。自分はSmartNormalというFlash・AIRのツールを使いました(それぞれのマップは雰囲気をつかみたいだけで適当に描いています…)。

    テクスチャマップを作成したら3DCGソフトウェア上でッピングの設定等を行い、イメージをつかみます。

    …とここまで書いたらだいぶ長くなってしまったので、今回は準備編にしてActionScriptは開発編にします!