Everyday Pieces ::
  • Webサービス
  • ブログパーツ
  1. ホーム
  2. プログラミング

three.jsで遊んでみる(6)

2013年10月24日 2012年10月11日 プログラミング MMD, three.js

前回の続きです。

頂点モーフによる表情アニメを実現すべく、
シェーダーとかいじってみたりしてました。
だいたい期待した通りな感じになってくれたのですが、
なぜかShadowMapがおかしくなる・・・。

そんな折、
ふとthree.jsのGitHubを覗いてみると、
リビジョンが r51 に上がっている。
しかも skinning + morph に対応したっぽいことが書いてある。
それをどうにかしようと色々いじっていた苦労がぁ・・・(^_^;)

マメにthree.jsのGitHubをチェックする必要がありそうですね。
というか、GitHubで更新あったら通知してもらえると嬉しいかも。
どうやればいいんだろ?

それはともかく、
確かにExampleにこんなのが増えてます。
こちらでは変化の加減を調整できたりしますね。

ということで、シェーダーとかいじらなくても、
MMDなファイルから取り出したmorph情報を
キーフレームにしたがって駆動するだけで良いことになります。
morph頂点の情報はthree.jsでは morphTargets という名前になっています。
中身は頂点データの配列です。
x,y,z なので頂点数×3個の値が並ぶことになります。
さらにこれが表情の数だけ存在するので、
データ量はわりと大きくなることが想像できます。

ところで、
MMDでは変化する頂点のデータだけを保持しています。
具体的にはmorphする頂点の番号と位置オフセット量です。
three.jsで扱うには全頂点の数だけ列挙しなければなりませんが、
ミクさんのモデルは頂点数が9000くらいあるので、
ローディング時間を考えるとファイルサイズが気になります。

そこで、
MMDのmorphデータを素直にjson化して、
それを独自ローダーで morphTargets に展開する手法にしました。

ということで、
bone skinning + IK + morph なミクさんの結果はこれです。

諸般の事情でちょっとローディングに時間がかかりますが、しばらく待ってみてください。なお、ChromeなどのWebGL対応のブラウザで見てください。PCパワーもそれなりに必要となるかもしれません。あまりにも時間がかかり過ぎるようならば、リロードして再度試してみてください。

mytest9

ちなみに、
頂点や面情報で構成されたmeshがレンダリングされる際、
各要素は属するmaterial単位に分割されて処理されます。
materialに関連する情報を切り替えるのはコストがかかるので、
最適化するためにこのような処理が行われているのだと思います。

これに関連して、morphについて注意すべきことがあります。
それは、頂点morphはmaterial毎に同時に最大8つまでしか行えないことです。
しかも、法線morphも行う場合は頂点、法線それぞれ4つまでとなります。
この制限を超えるような場合は、
重み値のより小さいものを対象外とすることで処理されるようです。

ところで、
morphに関するシェーダーのコードは以下のようになっています。

#ifdef USE_MORPHTARGETS

    vec3 morphed = vec3( 0.0 );
    morphed += ( morphTarget0 - position ) * morphTargetInfluences[ 0 ];
    morphed += ( morphTarget1 - position ) * morphTargetInfluences[ 1 ];
    morphed += ( morphTarget2 - position ) * morphTargetInfluences[ 2 ];
    morphed += ( morphTarget3 - position ) * morphTargetInfluences[ 3 ];

    #ifndef USE_MORPHNORMALS

    morphed += ( morphTarget4 - position ) * morphTargetInfluences[ 4 ];
    morphed += ( morphTarget5 - position ) * morphTargetInfluences[ 5 ];
    morphed += ( morphTarget6 - position ) * morphTargetInfluences[ 6 ];
    morphed += ( morphTarget7 - position ) * morphTargetInfluences[ 7 ];

    #endif

    morphed += position;

#endif

MMDではオフセット値として扱っているので、
頂点値ではなく、オフセット値として渡せば
計算を減らせると思って、
当初は以下のようにやってました。

#ifdef USE_MORPHTARGETS

    vec3 morphed = position;
    morphed += morphTarget0 * morphTargetInfluences[ 0 ];
    morphed += morphTarget1 * morphTargetInfluences[ 1 ];
    morphed += morphTarget2 * morphTargetInfluences[ 2 ];
    morphed += morphTarget3 * morphTargetInfluences[ 3 ];

    #ifndef USE_MORPHNORMALS

    morphed += morphTarget4 * morphTargetInfluences[ 4 ];
    morphed += morphTarget5 * morphTargetInfluences[ 5 ];
    morphed += morphTarget6 * morphTargetInfluences[ 6 ];
    morphed += morphTarget7 * morphTargetInfluences[ 7 ];

    #endif

#endif

morphはこれでうまく行ってくれたのですが、
なぜか ShadowMap がおかしなことになってしまうのです。
原因は不明ですが、余計なことはせずに、
three.jsでの流儀にしたがって、
morphオフセット値は素直に頂点に加算した方が良さそうです(^_^;)

次回は、
toon shading や edge 処理とかをやる予定。

関連記事
three.jsで遊んでみる(46) three.jsで遊んでみる(45) three.jsで遊んでみる(44) three.jsで遊んでみる(43) three.jsで遊んでみる(42) three.jsで遊んでみる(41) three.jsで遊んでみる(40) three.jsで遊んでみる(39) three.jsで遊んでみる(38) three.jsで遊んでみる(37) three.jsで遊んでみる(36) three.jsで遊んでみる(35) three.jsで遊んでみる(34) three.jsで遊んでみる(33) three.jsで遊んでみる(32) three.jsで遊んでみる(31) three.jsで遊んでみる(30) three.jsで遊んでみる(29) three.jsで遊んでみる(28) three.jsで遊んでみる(27) three.jsで遊んでみる(26) three.jsで遊んでみる(25) three.jsで遊んでみる(24) three.jsで遊んでみる(23) three.jsで遊んでみる(22) three.jsで遊んでみる(21) three.jsで遊んでみる(20) three.jsで遊んでみる(19) three.jsで遊んでみる(18) three.jsで遊んでみる(17) three.jsで遊んでみる(16) three.jsで遊んでみる(15) three.jsで遊んでみる(14) three.jsで遊んでみる(13) three.jsで遊んでみる(12) three.jsで遊んでみる(11) three.jsで遊んでみる(10) three.jsで遊んでみる(9) three.jsで遊んでみる(8) three.jsで遊んでみる(7) three.jsで遊んでみる(5) three.jsで遊んでみる(4) three.jsで遊んでみる(3) three.jsで遊んでみる(2) three.jsで遊んでみる

コメントする キャンセル

アドレスが公開されることはありません。が付いている欄は必須項目です。

投稿ナビゲーション

WordPressをバックアップなBackWPup
シムシティの最新作が何かスゲー!

カテゴリー

WordPress つぶやき トピック プログラミング

タグ

AS3 enchant.js FamilyTreeVis Flash Geolocation gif.js kinect Linux MMD MoneyTrackNote notifier.js OpenCV PDFカレンダー RISC-V three.js セキュリティ テーマ自作 ブログパーツ 動物 動画 麻雀

アーカイブ

© Everyday Pieces ::