Simplestar Game

How do I create a 3D game ?
http://simplestar.syuriken.jp/
since 17/01/2009
  • BACK
  • HOME
  • NEXT
  • |

:::::::::::035話 シェーダマテリアルA:::::::::::

あけましておめでとうございます。星姫です。
さて、前回でGUIの外側の実装を終えたので、残りのプレビュー表示までを実装してみましょう。

ところで初詣行きました?
おみくじを引いたところ、「吉」でした。今年もいいことありそうです。

ここから本題に入ります。

中間データのXMLファイルのフォーマット

みなさんは「モデル・ビュー・コントローラ」って単語を知ってますか?
GUI作成入門とか、その類のテキストに最初に紹介されているだろう知識です。
詳細↓

Model View Controller (MVC)

調べれば、たくさん出てくるけど、何が言いたいかというと
中間データXMLファイルを解析してデータを保持するデータクラスを作るとして、
これがMVCでいうところのModelになるよねってこと。

そのデータクラスを作成する上で、まず考えないといけないことは何なのでしょうか?
…固まっていてもしょうがないので、最初は考える材料として、中間XMLデータのフォーマットを確認してみましょう。

まずBlenderでどのように中間XMLデータを作成するのかおさらいしてみます。

キューブを追加した後、「オブジェクトモードでVキーを押す」と頂点ペイントができるようになります。
左上のカラーピッカーで色を決定し、ブラシを頂点にあてて左クリックで着色できますので、図のように適当に着色します。
右下の赤枠の部分に現在表示しているの頂点カラー情報が現れます。
「+」ボタンでいくつでも頂点カラーを設定できます。その都度名前を決めてあげて下さい。

とりあえず2つ頂点カラーを設定しました。

※頂点カラーを設定してから新たに頂点カラーを追加すると、前回のペイント情報を
そっくり持ち越すので表示上変化が見られません、混同に注意しましょう。

さて、ここで6つの面に対して、別々のマテリアルを設定します。
1〜3つ目はマテリアルを設定しないようにし
4つ目は単色のマテリアルを設定します(テクスチャなし)
5つ目はテクスチャが1つのマテリアルを設定し
6つ目はテクスチャが2つのマテリアルを設定し、テクスチャ座標も2つ設定します。
(マテリアルの最大テクスチャ数と、テクスチャ座標数は必ず同じになるようにしてください。)

ということで、設定が完了しました。
あとはSimplestar Game のツールの SimpleExporter でXMLファイルを出力します。
※出力するときは必ずオブジェクトモードにしなければなりません。
Blenderの良くないところで、エディットモードのときは頂点カラーとか出力してくれません。
注意しましょう。出力設定は初期値を使いました。(初期値の場合、モデルデータだけ出力します。)

さぁ、XMLファイルをXMLNotepadで見てみましょう。

ルートタグの下にファイル情報タグ、ルートフレームタグ、オブジェクトタグが確認できます。

ファイル情報には、マジックコードとバージョン番号がテキストで入っています。
ルートフレームには座標系をDirectXに合わせるための行列が入っています。

オブジェクトタグの属性にはオブジェクト名があるだけです。
オブジェクトタグの下には、ローカルのフレームマトリックス(今回は単位行列)とメッシュタグがあります。

メッシュタグの中がちょっと複雑です。

上から順に頂点情報、頂点インデックス情報、法線情報
メッシュマテリアルリスト、メッシュ頂点カラーリスト、メッシュテクスチャ座標リストがあります。

タグの中身を展開するとこんな感じ↓

何のデータが入っているか分かりますでしょうか?
詳しいドキュメントは、ビューアが一段落着いたら書く予定です。

追記:Simple XML ドキュメント ←こちらにまとめました。

さぁ、あとはこれらを読み込んでデータを保持するクラスというものを作ってみましょう。

中間XMLデータファイルの解析、データ保持クラスの作成

前回の進捗より、ツール側はXMLファイルのパスを取得するところまで出来てますので、このパスを渡すと解析を行い
ファイルのデータを保持するクラスというものを実装してみましょう。名前は「XMLModelData」です。

インタフェースはこんな感じ↓

        //------------------------------------------------------------------------
        // Public Functions
        //------------------------------------------------------------------------
    public:

        XMLModelData();                    //!< コンストラクタ
        virtual ~XMLModelData();        //!< デストラクタ

        // -- 解析 --
        bool                        LoadXML                    ( const CString& xmlFilePath );    // XMLファイルの読み込み

        // -- 取得 --
        const CString&                GetXMLFilePath            () const;                        // 作成元ファイルパスの取得
        UINT                        GetObjectNum            () const;                        // オブジェクト数の取得
        const OBJECT_INFO_TYPE_ST&    GetObjectInfo            ( UINT index ) const;            // オブジェクト情報の取得

…コレ実装してみましたけど、結構疲れました。ソースは2000行くらいかな。
(これからアニメーション情報の読み込みも書かなければなりません。)
XML中間モデルファイルのフォーマットが分かっていれば単純作業なのですが…単純作業だからつまらない!?

さて、読み込みに成功したデータをドキュメントに持たせるようにします。
実装がこちら↓

            // ドキュメントに読み込んだモデルデータを追加
            SimpleDoc* pDoc = dynamic_cast<SimpleDoc*>(((CFrameWnd* )AfxGetMainWnd())->GetActiveDocument());
            if (pDoc)
            {
                pDoc->AddXMLModelData(xmlModelData);
            }

メインのビュークラスには GetDocument() という便利な関数が最初から用意されていますが、
その他のビューでは、こう↑呼べばドキュメントを取得できます。
(ほか、メインフレームにドキュメントを返す関数を用意する、という方法もあります。
メインのビューを取得する関数を用意する必要がありますが)

とりあえずモデルを表示できるか試してみたいと思います。

SimpleDX10 はエフェクトファイルを登録して、頂点バッファとインデックスバッファを設定すると
描画関数にてインデックス数、オフセット情報、ストライドを指定することで描画できるというものです。

まずはエフェクトファイルを用意しないといけないのですが、毎回出力したモデルに対して手書きで用意するというのは難しいと思います。
ここで考えたのが、自動作成です。ちょっと細かい話になりますが、マテリアルごとにプリミティブというメッシュを小分けにしたデータを作成し
ディフォルトで頂点レイアウトを決めて、そのレイアウトでエフェクトファイルが自動的に作成されるようにします。

…で、必ずマテリアルをモデルに適用しないといけなかったり、
マテリアルのテクスチャ数を、テクスチャ座標セット数以下にして出力しないといけないなど
気を付けて出力しなければならないという課題を残しましたが、とりあえず自動生成するように実装しました。
下の図のように、エフェクトファイルが出力されることを確認できました。

次に描画テストを行います。結果がこちら↓

描画できることを確認しました。
(※頂点カラーとかテスト中に変更してます。データ的には期待通りの結果が出力されています。)

描画するには頂点レイアウトを作成して設定する工程がありますが、ここもユーザが毎回コードを書いて用意するのは現実的ではないです。
そこで、fxファイルを解析して自動で頂点レイアウトを作成するようにしました。
実装する際、ちょっと悩みましたが「セマンティクス」のキーワードが全てを解決してくれました。
セマンティクスとは、シェーダー入力またはシェーダー出力に付加されている文字列のこと。
情報ソース↓

セマンティクス (DirectX HLSL)

描画を確認できたところで、アニメーションの読み込みまでやってみましょう。

テスト用に Blender でスキンメッシュアニメーションとオブジェクト単体のアニメーションを作成しました。
この辺の操作は Blender の入門ドキュメントを2,3回読めば簡単に出来るようになります。

そうして出力した中間XMLデータファイルがこちら↓

いろいろなアニメということで、「IroIro」アニメが出力されています。
基本、一つのXMLファイルには一つのアニメーションしか出力されません。
「ANIMATION」タグの下にオブジェクトのアニメーション「OBJECT_ANIM」タグがズラリと並びます。
その中には、位置と回転と拡縮の「LOCATION」「ROTATION」「SCALE」タグがあります。
それらの中にある「KEY_INFO」タグには、key属性にキーのフレームカウント、そして「キー値」が格納されています。

キー値はそれぞれ「LOCATION」ならば位置(X,Y,Z)
「ROTATION」ならば四元数(w,x,y,z)、「SCALE」ならば拡大率(sx,sy,sz)になっています。

また細かい話になりますが、これらの値は Blender の座標系(Z-UPの右手系)の値です。
出力時に指定した座標系に直すには「FRAME_ROOT」タグにある行列をかけてから扱う必要があります。

アニメーション部分の実装前に、ボーンの姿勢行列を単位行列に固定して、スキンメッシュの描画テストを行いました。

表示に関しては問題なさそうです。
では、フレームごとに補間された姿勢行列を取得し、対応するエフェクト変数に設定する部分を実装してみましょう。

まずは、XML中間データからアニメーションの情報を読み込みます。
確認したところ、オブジェクトごとにアニメがまとめられていましたね。
これらの情報をモデルの階層構造とともにアニメーションを管理するクラスに渡すことにします。

クラス名は「TimeSpace」にしました。時空間という意味で、平行世界のイメージで複数管理します。
実装内容の話で、内部では「XMLModelData」クラスから描画用のモデルデータとして「MDLData」クラスへ変換しています。
この「MDLData」クラスとオブジェクトごとのアニメーション情報を持った「Animation」クラスを「TimeSpace」へ渡すようにします。

よくよく考えてみると、モデルのアニメなのだからMDLDataがAnimationをリストで持つようにしました。
ですが、渡されたTimeSpaceも計算する上でAnimationクラスを必要とします。
今の実装だと、MDLDataにAnimationがありTimeSpaceにも同じAnimationがあることになります。
ゲームではもちろん重複しないようにしなければなりませんので、登録後にクリアするようにしました。

登録の様子はこんな感じ↓

    // 描画用時空にモデルデータを登録
    TimeSpace& timeSpace = GetTimeSpace();
    int animAcsrIndex = timeSpace.RegisterMDLData(mdlData);

登録後はアニメ情報をモデルからクリア

                // モデルが持つアニメーション情報リストの解放(TimeSpaceへ渡したので今後持つ必要は無い)
                mdlData.ClearAnimationList();

アニメのタイムコントロール

さて、時間軸の変化とともにアニメーションするわけですが
スライダを用いてアニメのカレントフレームを操作できるようにできたらいいですね。

そこでドッキングするフォームビューというものを作ります。
Tips ページを新たに設置し、そちらに作成方法をまとめました。

Tips

興味ある方は「フォームビューをドッキングウィンドウにする方法」で調べてみてください。

フォームビューをドッキングウィンドウにする方法

はい、ということで、こんな感じ↓でフォームビューをドッキングウィンドウに乗せてみました。

この動画では Blender 2.57b からSimpleExporter でエクスポートして xml ファイルを出力し
そのxmlファイルを読み込んで、MFCアプリで回転オブジェクトアニメーションをプレビューしています。

まだスキンアニメに未対応でして、スキンアニメが確認できたら、35話をまとめようと思います。

オブジェクトアニメーション

スキンアニメの前にオブジェクトアニメとボーンアニメが順番として先ですね。
SimpleExporterのバージョンを1.6に更新、これに対応するようにSimpleConverter も更新しました。
次に進捗報告用の動画を貼り付けておきます。

スキンメッシュアニメーション

スキンメッシュアニメも再生できるようになりました。進捗報告用の動画を貼り付けておきます。

上のモデルじゃすごさが伝わらないとの連絡を受けまして、Kio Miku モデルで再チャレンジ、おまけ動画です。

次回、SimpleExporter のドキュメントと、モデルデータの読み込みと表示、再生について詳細を示したいと思います。
お楽しみに!

2011/01/09 初記。
2011/02/13 追記。
2011/05/15 追記。
2011/07/18 追記。
2011/07/31 追記。

:::::::::::035話 シェーダマテリアルA:::::::::::

  • BACK
  • HOME
  • NEXT
ホームページ制作 フリー素材 無料WEB素材
Copyright (C) Simplestar All Rights Reserved.