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

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

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

前回の続きです。

次は頂点モーフによる表情アニメでもやろうとかと思ったのですが、
BoneによるSkinningと頂点モーフが
現状のthree.jsでは共存できないことが分かりました。
シェーダー関連をいじってどうにかしないといけない感じです。
なんか手間ヒマ掛かりそうなので、IKを先にやってみることにしました。
基本的にはBoneのマトリクス操作だけで済むはずですので、
three.jsに対する追加や修正はそんなに大きくならないと思われます。

ときに、
IKとは Inverse Kinematics、逆運動学とか言うそうです。
前回やったBoneによるSkinningは、言わばFK。
Forward Kinematics、順運動学とか言うっぽいようです。

IKという言葉とか、それがどういうモノなのか、
というのはそれなりに知ってはいましたが、
実際にやってみるのは初めてだったりします。

さて、まずは
MMDなファイル内のIK情報を変換してJSONへ追加する作業を行いました。
three.jsオリジナルのJSONLoaderでは、
MMDなIK情報は当然サポートしてないのでLoaderも独自に作りました。
といっても、中身はJSONLoaderとほぼ同じだったりしますが。

つづいて、
IKはどうやってプログラムすればいいのかググって情報収集しました。
そしたら既にWebGLでMMDをやられている方を発見しました!
しかもイチからスクラッチで作ってしまったようです。凄いっす!!
ソースも公開されているので参考になりますね。
アルゴリズム的にはこちらがとても参考になります。
サンプルプログラムが公開されているのもありがたい。
手法としてはCCD-IKとかParticle-IKとかがあるようです。
MMDのIK情報には演算の繰り返し数というのがあるので、
CCD-IKを採用すれば良さそうです。
それからソースコード的にはこちらやこちらの第8回が参考になります。

ということでIKやってみました。結果はこれです。

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

mytest8

なお、スポットライトはミクさんを追いかけるようにしてあります。

とりあえず、だいぶそれっぽく踊ってくれるようになりました(^_^)
でも、まだ十分にうまく行ってない感があります。
特に足もとが床にめり込んでしまうのが気になりますね。
IKターゲットを追いかければ、
本来はそういうことにはならないはずだと思うのですが・・・。
床にめり込まないようにするのは、
別途処置が必要なのかもしれません。とりあえず保留としておきます。

あと、
IK解決はそれなりに計算量が多いようです。
ブラウザでプロファイルをとってみると処理時間は多めなようです。
ベクトルや行列演算などを繰り返すので、しょうがない感じではあるのですが
差がある一定以内になったら計算を打ち切る等の
対策をやった方がいいかもしれませんね。
あるいは、Workerスレッドを使って並列にやらせる手もありそうですが、
どこかで同期を取る必要があるので手間かかるかもしれないですね。

次回は表情モーフに挑戦する予定です。
ついにシェーダー周りをいじくることになりそうです(^_^;)

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

コメントする キャンセル

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

投稿ナビゲーション

Kawamuraさんがデザインな「どこでも寝枕」
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 ::