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

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

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

今回は、
MMDなデータファイル(PMXとかVMD)を直接扱えるようにしてみました。

three.jsのskinningアニメーションなサンプルが
データをjson形式で扱っていたというのを発端に、
Blender向けのjsonエクスポータを研究するなどして
作業を進めてきたという経緯もあり、
(参考までに関連投稿はこちら)
いままでずっと
独自作成のコンバータで出力したjsonなデータファイルでやってました。

jsonはテキストファイルなので、
内容をすぐに変更できたりしてデバッグ的に便利なこともあったのですが、
新しい要素に対応するたびにコンバータを変更しなければいけなかったりで、
ワリと手間暇かかっていた感じでした。

コンバータでは複数のモデル対応を想定してなかったこともあり、
いちいち変更するのもいい加減メンドーになって来たので(^_^;)
直接扱えるようにした次第です。

MMDなモデルデータにはPMDとPMXがありますが、
PMXを扱うようにしました。
PMXはPMDから変換できるということと、
形式の詳細が公開されているというのが理由です。
両方の形式に対応するのがメンドーというのも大きいけど(^_^;)
ただし、
PMX固有の拡張要素にはあまり対応してません。
現状は、PMDの代わりっぽく使っている感じになっています。

バイナリを扱うことになるわけですが、
DataViewを利用するとワリとあっさり行けますね。
苦労したのが文字コード変換。
UTF16やUTF8は自前でどうにかしたのですが、
SHIFT-JISがちょっと厄介でした。
変換ライブラリとか公開されているのがあるので
素直にそれを使えば良いのですが、
nativeな変換関数とか無いのが何か腑に落ちないので(^_^;)
ググって見つけたこちらの手法でやってみることにしました。
正直ちょっと回りくどいのがアレですが、
しかも非同期にならざるをえないので扱いにくいのですが、
敢えてこのやり方にこだわってみました(^_^;)

そんなこんなで、
ローダー系やモデル構築の処理に大幅に手を入れるハメになりましたが、
複数のモデルに対応できるようになりました。
ただ、Chromeのタスクマネージャとかで見てみると
なんかメモリの使用量が大きく増えてる感じなのがちょっと気になる。
自前でバイナリをデコードするようになったからかもしれないんですけどね。

ということで3体ほど表示させたみたのがこちらです。
流石に処理が重くなってたりします。
その旨ご了承ください(^_^;)

ChromeなどのWebGL対応のブラウザで見てください。PCパワーもそれなりに必要となるかもしれません。あまりにも時間がかかり過ぎるようならば、リロードして再度試してみてください。

mytest21

ところで、
影の処理がまだ不十分だったりします。

シャドウマップに関しては、
以前に直ったようなことを書いたのですが、別な問題が起こっていました。
シャドウマップでは光源を仮想視点としてみた時の、
ポリゴンの「背面」描画によって深度マップを作成するのですが、
モデルの袖やスカートの内側にはポリゴンが貼られてなかったりする関係で
不自然な影となってしまっています。
「前面」描画でやると一見直ったようにみえるのですが、
本来影にならない所にも影が落ちてしまっていました。
袖やスカートに対して特別な処理をすれば
改善できることは分かっているのですが、
データ側からはどれが袖やスカートなのかが判別できなかったりします。
でも本家MMDではうまく出来ているので、
何か見落としているのかもしれません。

また本来なら、
カメラのパラメータによって設定される視錐台の
全体を覆うように深度マップを作るべきですが、
(より厳密には、視錐台内に影を落とす可能性のある全てのオブジェクトを覆うように)
現状では、
メインとなるモデルを中心に手動で設定した範囲内にしか影が落ちてません。
(その反面、影の解像度が上がってたりするのですが・・・)

これらは今後の課題ですね。

関連記事
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で遊んでみる(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で遊んでみる(3) three.jsで遊んでみる(2) three.jsで遊んでみる

コメントする キャンセル

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

投稿ナビゲーション

JavaScriptのクラスの書き方の考察
Cooking With Dog at YouTube FanFest

カテゴリー

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

タグ

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

アーカイブ

© Everyday Pieces ::