はじめに
Mayaなどでモデリング、アニメーションしたものから作られるfbxファイル。
これをWebGLで描画できるようにファイルの中身をパースして必要なデータを作る作業をしています。
描画にはWebGLの国産ライブラリであるGLBoostを使っています。
結論から言うと、静止しているモデルのメッシュは読み込んで描画出来るようになりました。
インデックスデータの並びの特徴
fbxの頂点のインデックスデータはがポリゴン１枚ごとに区切られています。その区切りが - 表示で、例えば0,1,2,3というポリゴンのインデックスがあったとすれば0,1,2,-4という書き方になっています。区切りになるインデックスに-1を掛けてさらにそこから -=1 されています。この数値を直しながらインデックスデータを取得していきます。
ハマった その１
あと、ハマったのがゴミデータが混じっていることがあって、頂点データやインデックスデータの中に半角スペースがあったりします。それを取り除くかスキップする処理を書いてあげないといけないです。もしかするとCinema4Dのバグで、Mayaで作ったら半角スペースが混じったりしないかもしれません。
ハマった その２
もう１つハマったのが法線データの描画の仕方です。
fbxには法線がどのように定義されているかをマッピングモードで表し、データの格納方法をリファレンスモードで定義しています。
僕の持っているCGツールのCinema4Dではfbxファイルの中に
MappingInformationType: "ByPolygonVertex"
ReferenceInformationType: "Direct"
と書かれていました。
マッピングモードには
・ ByControlPoint
・ ByPolygonVertex
・ ByPolygon
・ ByEdge
・ AllSame
があるようです。
リファレンスモードには
・ Direct
・ Index
・ IndexToDirect
があるようです。
詳しくは http://shikemokuthinking.blogspot.jp/2013/07/fbx.html
マッピングモードのByPolygonVertexというのは、ポリゴンに対して法線が定義されています。
リファレンスモードのDirectは、マッピングモードがByPolygonVertexの場合は頂点の順番に法線が格納されています。
以上を考慮した上で法線を取得して並べないといけないのですが、もう１つ問題がありました。
僕がCinema4Dで作ったメッシュは共有頂点を使って描画するようなデータでした。
法線データは共有頂点に対応してないデータだったので、頂点データをバラして共有頂点がないようなデータに並べ替えて、それに対応するように法線データを並べ替えました。
以上が今回までに作ったParserと描画部分でした。
アニメーションについて
アニメーションしているメッシュのfbxファイルがまだパース出来るようになっていません。
その原因は１つ、自分でCGツールでメッシュにボーンを入れてアニメーションさせるということが上手く出来ないからです。
CGツールはCinema4Dを使っています。
ボーンの入れ方のハウツー動画を買って勉強したりしてみましたが上手く出来ません。
Cinema4Dで上手くボーンを扱うことが課題です。
今後
このアニメーションが出来ないというスランプに陥ってしまって、逃げでリバーシのゲームを作っていました。
https://qiita.com/minmin0530/items/b5f55e8128214d1b6c4e
たら話ですが、このリバーシが出来上がったらfbxのアニメーション制作に復帰しようと思っています。
終わりに
fbxパーサーのプロジェクトです。
https://github.com/minmin0530/FBX-Parser-Animater
fbxの読込に少し時間がかかっていますが、メッシュの描画とコードです。
http://ai5.jp/code/head_normal/index.php