‘MMD’ タグのついている投稿

1 2 3 4 5 6 7

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

 プログラム,
 公開日:2012年9月4日 / 更新日:2013年9月13日

前回
MMDなミクさんを表示することが出来ましたが、
踊らせることは未だできていません。
ただ、いろいろ分かって来たこともあるので
メモっておきたいと思います。

まず、
PMD+VMDをCollada(DAE)に変換できるツールがあることが分かりました。
それはこちらのMMDfromColladaです。
で、Three.jsで再現すべく色々やってみたのですが、
うまく行ってません。
ColladaLoaderはDAEのGeometryとMaterial情報から
SkinnedMeshを作ってくれるのですが、
そのSkinnedMeshにはBone情報が設定されてなく、
各頂点がどのBoneから影響受けるのか、
及びその影響度(重み)情報も設定されていないようです。
ColladaLoader.jsを見てみると、

というようにコメントアウトされている関数があるのを見つけました。
現状では自前でこれをどうにかしないといけない感じです。
当然Animation情報もThree.jsで扱えるようにしないといけないわけですね。
ということで保留・・・(^_^;)

ときに、
Three.jsはリビジョンが50に上がったようです。
んで、こんなのを見つけました。
BoneというかSkeletonアニメが良い感じに動いています。
ShadowMapな影もどうやってるのか参考になりそうですね。
これをミクさんでやりたいのです。
中身を覗いてみたところ、データはjson形式になっており、
“Blender 2.63 Exporter” というテキストを見つけました。
調べた所、BlenderというオープンソースなCGソフト向けの
jsonエクスポータをThree.js側で用意していることが分かりました。
さらに、こここことかここ
PMDやVMDのインポータやエクスポータがあることも発見しました。
Blenderに読み込ませてThree.jsなjsonで書き出せば
バッチリ行けるんぢゃないのか!?

ということで、
意気揚々でやってみたところ、
Blender上で踊ってくれるようになりました。
おお!
んじゃ、あとはThree.jsなjsonで出力すれば!!
Three.jsで再現できるはず!?

・・・残念ながらうまく行ってません。
正確にはモーションさせることは出来たのですが、
結果がわけわかめなことになってます・・・。
なんかもう不気味な踊りになってしまっています(^_^;)

ん~・・・
現状の自分のスキルでは埒が明きそうにないので、
まずはThree.jsの中身を解析して、
より理解を深める所から始めた方がよさそうです(^_^;)

ちなみに、
ちょっと分かったコトは、Blenderを経由すると
MaterialのAmbientやDiffuseの値がおかしくなっている感じです。
少なくともPmdEditorのエクスポータを利用して出力した
DAEの内容と一致していません。
どうやらBlenderの内部のMaterialでは、
Ambientは色(RGBA)としては保持してなくて、
明るさ的な情報だけしか保持していないっぽいようです。
Diffuseが一致してくれないのはイマイチよくわかりませんでした。
なんにしてもBlenderでPMDやPMDから直接変換されたDAEを読み込むと、
一部の情報がうまく再現できなくなってしまう感じです。

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

 プログラム,
 公開日:2012年8月29日 / 更新日:2014年8月27日

three.js の examples を眺めた結果、
どんな機能があって、どう書けば良いのか、
大体の要領がつかめて来た感じです。

そこで、
MMDなミクさんを表示してみることにしました。
同梱されているモデルファイル(PMD)を利用します。

ただ、
PMDまたはPMXなファイルを読み込むローダが
three.jsには無いので、
PmdEditorまたはPmxEditorColladaエクスポータを利用して
Collada(DAE)形式にいったん変換します。

あとは、
sceneを作って、
適当にcameraとlightを追加。
さらに、
ColladaLoaderで読み込んだDAEを追加。
WebGLRendererを作ってsceneとcameraを渡す。
基本的にはこれだけ。
あっさり表示できてしまいました(^_^;)

実際には、
モデルのスケールの調整とか、
地面のグリッドとか、
FPS表示のためのStatsや
カメラ操作のためのTrackballControlsなどを
導入していますが、
ちょっとの手間で簡単に出来ました。

ちなみに、
ミクさんは細かい所までよく出来ているので、
全体にテクスチャを貼ってるのかと思ってましたが、
実際に貼ってあるのは眼だけで、
基本的に単色ポリゴンで構成されてるのが意外でした。

ということで、
three.jsで表示させてみたWebGLなミクさんはこちらです。
マウスでグリグリ動かせます。
※WebGL対応のブラウザで見てください。Chromeが良いと思います。

mytest3

なお、
残念ながら現状では踊ったりしません(^_^;)
モーションファイルであるVMDを変換して導入する術が
現状ではみつかりませんでした。
ただ、PMDから変換されたDAEを見てみると、
ボーンっぽい情報が含まれているようなので、
VMDからフレーム情報を抽出して適用できれば、
もしかしたら動くようにできるかもしれない
というか、したいなぁ(^_^;)

参考までにソースは以下の通りです。(three.js r49)

1 2 3 4 5 6 7