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

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

2013年9月13日 2012年9月4日 プログラミング MMD, three.js

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

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

//createBones( geometry.bones, skin, hierarchy, skeleton, null, -1 );
//createWeights( skin, geometry.bones, geometry.skinIndices, geometry.skinWeights );

というようにコメントアウトされている関数があるのを見つけました。
現状では自前でこれをどうにかしないといけない感じです。
当然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で遊んでみる(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で遊んでみる(6) three.jsで遊んでみる(5) three.jsで遊んでみる(4) three.jsで遊んでみる(2) three.jsで遊んでみる

コメントする キャンセル

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

投稿ナビゲーション

three.jsで遊んでみる(2)その猫、約30倍(通常比)

カテゴリー

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

タグ

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

アーカイブ

© Everyday Pieces ::