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

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

2020年10月10日 2019年5月28日 プログラミング MMD, three.js

 前回の続きです。
ということで、ようやくSDEFの実装にかかります。

 技術的にはこちらが参考になるものの、
MMDのSDEFには中心点以外にR0,R1なる謎のパラメータがあります。
それらに関する情報も含めて、
どうやって実装すべきなのか?
ネットの情報を漁ってみました。

 そして、みつけたのが、
こちら、こちら、そしてこちらの3つ。
ヒット数は少ないものの、
いずれも具体的なコードが書かれているので、
参考になりそうです。

 そんなわけで、
技術的な裏付けがはっきりしているこちらと、
こちらの論文を参考にして、
謎なパラメータはとりあえず使わずに、
回転中心点を使った実装を試してみることにしました。

 BDEFの単純な線形補間に比べて、
SDEFの球状補間ではクォータニオンを扱うことになります。
頂点シェーダーでの実装は以下のようになりそうです。
1)2つのマトリクスから回転成分をクォータニオンとして抽出。
2)2つのクォータニオンを slerp を使って重みで球状補間。
3)中心点と補間後のクォータニオンを使って対象頂点を回転。
4)2つのマトリクスを重みで積和(線形補間)した結果で中心点を変換。
5)3)の結果に4)の結果を加算。
6)法線も補間後のクォータニオンを使って回転。
※ slerp は球状補間の関数名です。

 上記の処理をシェーダー内でやるわけですが、
ちょっと気になるのが slerp 。
こちらの three.js の実際のコードにあるように、
atan2 や sin などの三角関数を使うことになります。
つまり、それなりに重めな計算処理になります。
幸いにも先の記事によると、
クォータニオンを単純に線形補間してもそれほど誤差がないそうです。
実際に比較しているこちらを見るとよく分かります。
桃色のが頂点を積和しただけの線形補間、
青がslerp、赤がqlerpです。
個人的に調べた感じでは、平均で5度、最大で8度くらいの差になるようです。
360度に対してせいぜい2%程度になるわけで、このくらいなら許容できそうですね。
なので、slerp ならぬ qlerp でやります。
クォータニオンを使っての回転はこちらをそのまま使わせてもらいました。
また、マトリクスからクォータニオンを抽出するのは、
three.js のこちらの setFromRotationMatrix を参考にしました。

 で、
実際にやってみた結果ですが、
BDEF と大差ないような感じです。
差が分かるようなデータとかあれば、
よりハッキリするかもしれませんが・・・。
やはり、謎なパラメータであるR0とR1を使わないといけないようです。

 ところが、
先に上げた3つのコードを比較してみると、
実装がまちまち・・・。
どれが正しいのか分からなかったので、
ひと通り試してみることにしました。
いずれも基本的には変換後の中心点を、
R0とR1を使って補正するような感じっぽい?

 結論から言うと、
うち2つはどうもうまく実装できませんでした。
なんかわけわからんことになってしまいます(^_^;)
コードの意味をちゃんと理解できてないのかもしれません。
結局、こちらを採用することにしました。
結果的に計算量が3つの中では一番少なくて済むことになりました。
ただ、果たして本家と同様な正しい実装なのかどうかは不明です。
なので、あくまで参考実装ということにします(^_^;)

 ちなみに、
BDEF と SDEF の結果の違いは以下のような感じになりました。
髪の毛の曲がり具合がSDEFだとより自然な感じになっているように見えますね。

 なお、
かつて実験的に実装したけど
旧作のViewerでは使っていなかった、
グループモーフとボーンモーフも導入してみました。
とりあえずは動くはずですが、
十分には検証できてなかったりするので、
うまく行かないことがあるかもしれません。ご了承ください。

 また、
こちらを参考に物理演算のパラメータを調整し直してみました。
エラー低減なパラメータであるSTOP_ERPは若干強めに。
そして拘束力に関するパラメータであるSTOP_CFMについては、
既定のゼロだと制約が厳しいようなので、少し緩くしてみました。
剛体同士の衝突に「遊び」を認めるようにすることで、
旧作にくらべてソフトな感じになっているはずです。
ただし剛体同士がめり込み易くなるので、
おかしなことになってしまうこともあるかも(^_^;)

 それから three.js については、
Viewerとして必要ないモジュールとかはばっさり切って、
ファイルサイズが小さくなるようにビルドし直してあります。

 ということで、
現時点での最新版である three.js r104 を改造して、
SDEF を参考実装した「MMD Viewer 改」を試すにはこちらからどうぞ。
旧作と異なる点や改善点についても書いてあります。

★2019-10-28追記。
ボーンモーフの対応が不十分だったのを修正しました。右手系へ変換するのをすっかり忘れてました(^_^;)

★2019-11-06追記。
ボーンに対する頂点の重み処理が不十分だったのを修正。重みの合計は基本的に1となりますが、個々の重みとしては負の値をとることがあるようです。てっきり全て正の値になるものと思い込んでいたのが問題でした(^_^;)

★2020-10-10追記。
BDEF と SDEF の結果の違いがより分かり易くなる画像がとれたので、
更新しました。

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

コメントする キャンセル

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

投稿ナビゲーション

three.jsで遊んでみる(36)
スマートごみ箱

カテゴリー

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

タグ

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

アーカイブ

© Everyday Pieces ::