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

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

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

この回で、
拘束条件とボーン位置合わせな剛体に関して
ナンかうまく行かない感じのことを書きましたが、
どうすれば改善できるかが少し見えて来ました。

それは、
拘束条件の BT_CONSTRAINT_STOP_ERP パラメータの調整です。
以前試みた時は、極端な値でやっていたせいか
そのことに気づかなかったようです。
ERP というのは Error Reduction Parameter の略で、
シミュレーションのステップごとに発生する計算誤差を
減少させるためのパラメータのようです。
現在値から目標値への収束速度に関わっているのではないかと思い、
これを調整してみたら、
データ側を変更しなくてもスカートの挙動が以前より良くなった感じです。

このパラメータの設定可能範囲は 0~1 のようです。
拘束条件で軸がロックされている状態で
最大の 1 に設定すれば誤差ゼロで即収束するのかと思い、
やってみたんですが、
完全に追従させることはできませんでした。

むしろ、
大きくするとかえっておかしくなってしまう感じです。
今回いろいろやってみた感じではデフォルトの 0.2 に対して
0.4 ~ 0.5 くらいが良さそうな感じでした。
モーションの激しさとか重力とかに応じて、
その都度調整するようにするといいのかもしれません。

ちなみに、
BT_CONSTRAINT_STOP_ERP の他に
BT_CONSTRAINT_ERP というのがありますが、
いまいち違いは分かってません。
ただ 6DofSpring な拘束条件では使われてないようです。

ときに、
今回はもう一つ。

three.js での Bone Skinning なアニメーションにおける
キーの補間は基本的に線形ですが、
MMDでは3次ベジェです。
やるのをすっかり忘れてました。
VMDファイルにカメラやライトのモーションがあったことも・・・(^_^;)

ということで独自の実装に変更する作業を行いました。
MMDでは4つの制御点による3次ベジェ(Cubic Bezier)曲線を
利用して2つのキーの補間をしています。
数式はこんな感じです。
MMDでの3次ベジェ補間では、
4つの制御点のうち、始点は(0,0)、終点は(1,1)相当に固定されています。
ちょうど、CSSにおけるtransition-timing-functionと同様です。

曲線の始点が t=0 終点が t=1 として、
曲線の点は x = B(t), y= B(t) と表されますが、
補間では y=F(x) の形にする必要があります。
つまり、媒介変数 t を消去した式にする必要があります。

が・・・。
実際にやってみるとこれが難しい。
というか3次方程式ってどうやって解くの? って感じ。
もはや自分の数学スキルでは無理ゲーなので(^_^;)
どうやってるんだろって思って、
こちらやこちらのソースを参照してみたら、
ニュートン法や2分法で求めてました。
どうやら数値計算的手法でないとうまく解けないっぽい。
道理で難しいわけだ(^_^;)

今回、
独自の実装に変更してしまうので、
three.jsでのJSONなデータ形式との互換性を取る必要はないのですが、
とりあえず後方互換の形にしておきました。
キーにMMDの補間情報を追加しただけですけどね。

あと、
補間時の注意点として
2つのキーをK0,K1とした場合に、
K1側に付加された補完情報を使うようにします。
実は当初K0側でやっててハマりました(^_^;)
微妙に挙動が変になったりしました。

ということで、
スカートの挙動を改善&ベジェ補間を導入なミクさんはこちらです。

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

mytest17

関連記事
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で遊んでみる(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で遊んでみる

コメントする キャンセル

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

投稿ナビゲーション

three.jsで遊んでみる(13)
消費電力をモニターできるワイヤレスな電力計

カテゴリー

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

タグ

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

アーカイブ

© Everyday Pieces ::