※改訂前過去記事【Live2D解説】ハンドトラッキング対応モデルの作り方③前腕
Added 2023-01-28 05:21:20 +0000 UTC予告通り、ハンドトラッキング解説の続きを行います。
前回は「上腕」の作り方について解説しました↓
※改訂前過去記事【Live2D解説】ハンドトラッキング対応モデルの作り方②上腕
気付けば12月ですねー！ しばらく更新が出来ずごめんなさい。 ちょっと色々トラブルとかもあって創作全般へのモチベが下がってました…。 (察した方は多分それの事で合ってます。知らない方は知らないままで大丈夫です。) ようやくYouTubeの方も動画作ったり出来るようになってきたので、 Fanboxも少しずつ記事更新できた...
今回は「前腕」の作り方についてです。
ということで、前回のように「手首から先を消失させた」モデルを用意しました
bandicam 2023-01-25 11-22-37-340
肘から下もぐりぐり動かせます。物理演算で「前腕の動きに少し上腕の動きが連動する」ようにしてますのでより自然な動きになっていると思います。
例えば「前腕を上に上げると上腕も少し上がる」とか
bandicam 2023-01-25 11-27-14-391
「前腕を外側にひねると上腕は内側に」
「前腕を内側にひねると上腕は外側に」
bandicam 2023-01-25 11-28-33-511
みたいな感じ！
更に上腕の動きには物理演算で腋の動きが追従してますので前腕の動きで微かに腋の肉も動いてますね。
物理演算を頑張ればこのように人体の繊細な連動も再現することが出来るのですが、
その解説は今日はしません(一旦変形を指先まで作らないと出来ません)
一体物理演算解説が出来るのはいつになるんでしょうかね；；気が遠いですがコツコツ頑張ります…。
ーーーーーーーーーーーーーーーーーーーーーーー
さて。前回の記事で
「腕の関節って本当に凄い柔軟で可動域も広くて、
上腕なんてほぼ360°いろんなところに変形させることができるんですよ」
とお伝えしましたが、肩間接に比べ肘関節は可動域がぐっと狭くなります。
狭いというか、「一方向に150°くらいしか動きません」
簡単に図にするとこんな感じ。肘の関節はまるで蝶番のようになっていて、
前腕を「伸ばす」か「曲げる」ことしかできません。
上の図の矢印のように横には動かないんです。
にもかかわらず、Live2D上では360°分の前腕の動きを作る必要があります。
なんでかっていうと、肩の動きに連動している分の動きを考えないといけません。
bandicam 2023-01-25 11-27-14-391
肘関節は↑のように上下の動き(これを肘Yの動きとします)しかできません。
しかしその肘関節がくっついてる上腕は360°自在に動きます。
bandicam 2022-12-08 03-44-31-166
なので、肩関節を外側・内側にひねると↓
連動して肘も外側内側に動きます
(これを肘Xの動きとします)
bandicam 2023-01-25 11-44-35-672
「肘関節単体の動き(肘Y)」「上腕と連動した動き(肘X)」が合わさって実際の前腕の動きが出来上がります。
bandicam 2023-01-25 11-22-37-340
なので結局X軸とY軸の２つのパラメータが必要になります。
更にもう一つ大変なのが肘の形状です。
真っすぐ伸ばしたとき
外側 or 内側に曲げている時
正面向きに曲げている時
手前に突き出している時
上腕ごと上にあげているとき
もっと角度を付けたとき
等々、これらすべて微妙に肘の形状が異なります。
なので、肘のデフォーマやアートメッシュはその多くが
パラメーター４種付けをする必要があります。
上腕のときよりもゴリ押し戦法になってしまうということです。
めちゃくちゃ大変ですが、作りこんだ分自然な立体感になってるんじゃないかと思います。
bandicam 2023-01-27 11-16-45-938
(↑上腕と一緒に動かすとこんな感じ)
また、360°全方向に動かすテクニックは上腕と基本的に同じなので、一部デフォーマやアートメッシュは上腕のものを使いまわせます。そこは少し楽を出来るということです。
今回は試行錯誤をしながらの制作でしたのでゴリ押しに頼らざるを得なくなった面も大きく、今後ハンドトラッキングの研究を進める中でもう少し効率的な変形方法も考えたいとは思ってます。
肘の動きの仕組みと難易度について語ったところで、必要なパーツ(アートメッシュ)を見ていきます。
まずは基本のべた塗り・線画・影パーツです。
bandicam 2023-01-27 10-47-13-506
前回言及しそびれましたが、これらのパーツは
PSDを読み込んだ時の初期形状は丸です。
これをうにょーんと伸ばして腕の形に整えています。
こうすると何がいいかって、
元の形状が単純なので変形がしやすいのと、さっきチラっとお伝えした通り上腕と前腕でパーツを使いまわせます。
同じパーツを使いまわすとテクスチャアトラスもその分場所を取らなくて済むというメリットもあります。下の画像の青丸の部分で左右の上腕と前腕の線画パーツとべた塗りパーツのテクスチャを全て担ってます。
このテクスチャ削減術はハンドトラッキングに限らず色々な所で使えるテクニックなので覚えて損はないと思います。
勿論使い回さない前腕専用パーツもいくつかあります。
まずは肘の影パーツ。
内側用と、
bandicam 2023-01-27 11-12-26-103
外側用があります。
bandicam 2023-01-27 11-13-17-905
この肘の影パーツがないと見た目がめちゃくちゃのっぺりします
↓無いとき
bandicam 2023-01-27 11-29-41-039
↓あるとき
bandicam 2023-01-27 11-31-35-298
ね？一目瞭然です。
肘の内側パーツはコピペして二つ作り、一つは前腕にクリッピング(下図の黄色)、一つは上腕にクリッピング(下図の水色)します。二つは同じデフォーマで動かす(下図の青丸)ので全く同じ動きをします。
この状態で前腕にクリッピングしているパーツだけ、上腕の時の脇の影のように非表示にしたい部分には点を打たないことで一瞬で消えるように処理しています。こうすることで肘の上下が入れ替わったときに不必要な影が表示されるのを防いでいます。
bandicam 2023-01-27 11-43-16-792
必要なパーツについては以上です。
お次はデフォーマの構造です。
斜線が引いてあるデフォーマは手首から先に関わるデフォーマなので今回は無視します。
根本となる回転デフォーマは前回解説した「上腕の長さ」デフォーマに入ってます。
…と思ったら前回、どのデフォーマが「上腕の長さ」デフォーマなのか明言してなかった…。
＞回転デフォーマで頑張って作りこんだので、ワープデフォーマの変形はとてもシンプルです。
から始まる説明のデフォーマです。
この中に腕のデフォーマが一通り入ってます。
「←前腕の回転」「←前腕の位置微調整」「←前腕の長さ」と名前がついているデフォーマはそれぞれ上腕の使い回しです。
作り方の順序としては、
①上腕をフォルダごと全選択してコピペする
bandicam 2023-01-27 12-48-54-770
②脇の影など不要なパーツ・デフォーマを消す
bandicam 2023-01-27 12-50-13-979
③名前を「上腕」から「前腕」にする(「検索と置換」機能使うと便利)
bandicam 2023-01-27 12-52-45-567
④紐づきパラメータを肩から肘に移動させる
bandicam 2023-01-27 12-56-00-138
⑤一番親のデフォーマである「前腕の回転」の親に更に回転デフォーマを作り(これは後で位置の微調整に使います)、肘部分に移動させる
bandicam 2023-01-27 12-57-37-596
⑥作った親デフォーマを「上腕の長さ」デフォーマに入れる
bandicam 2023-01-27 13-01-08-274
⑦形を整えていく(「形状のコピー&ペースト」を最大限活用します)
bandicam 2023-01-27 13-01-49-299
……みたいな感じです。こうやって上腕のパーツ・デフォーマを流用することで、
前回
「-45°の半分で-22.5°……-22.5°の半分で-11.25°……」
みたいに必死に説明していた
この超絶めんどくさい回転デフォーマの角度調整を丸々スキップ出来ます
bandicam 2023-01-27 13-08-25-760
この通り、まだ細かい調整は必要ですが基本の動きは既に出来ています。
が、しかし…
肝心の「細かい調整」がこれまた地獄なんですよねぇ…ｗ
まず、「トラッキングしやすい肘の動き」に最適化してやる必要があります。
先ほどの「作り方の順序」の
「⑦形を整えていく(「形状のコピー&ペースト」を最大限活用します)」
まで終えた段階だと、肩のXYパラメータを動かすと肘もそれに合わせて角度が自動的に変わります。
bandicam 2023-01-27 18-06-39-158
これを「前腕より下は角度を変えずに位置のみ上腕に追従させる」形にしたいのです。
bandicam 2023-01-27 18-11-10-296
パッと見は前者の方が自然な動きに見えるかと思います。後者は所々不自然な腕ポーズになっていますよね。でも実際は物理演算で上腕と前腕の動きを連動させて可動域を制御するので、不自然なポーズは出ないようになります。
bandicam 2023-01-27 18-19-38-834
↑肩Yパラメータだけを直接動かすとこのように不自然な腕になりますが…
↑肘Yの物理演算の入力には肩のYパラメータが入っているので
bandicam 2023-01-27 18-17-57-170
↑実際には肩Yパラメータを動かすと前腕も自動的に付いてきます。
(勿論肘だけ動かすことも可能です)
逆に、一見自然に見えるこの動き↓
bandicam 2023-01-27 18-06-39-158
実はこの作り方だと、肩Yパラメータの上下で肘Xの動きが丸っきり逆になってしまいます。
bandicam 2023-01-27 18-30-07-882
↑肩Yがマイナスの時、肘Xをプラスに動かすと前腕は→側に、マイナスに動かすと←側に動いていますが、肩Yがプラスの時は逆になっているのが分かりますね
この状態だと正直めちゃくちゃ使いづらいんですよね。
肩Yの位置によって肘Xが動く方向を逆にする、という複雑な処理の物理演算を組まなきゃいけないし、アニメーションを作るときも頭が混乱します。
つまり、肩XYの動きは肘下の角度になるべく干渉しないように作るのが好ましい、というわけなんです。
今は上腕のデフォーマの中に前腕のデフォーマが入っているので、強制的に動きが連動してしまってます。
bandicam 2023-01-27 18-43-13-973
そこで、「前腕の回転」デフォーマの親に新しい回転デフォーマを作り、「常に前腕が一定の方向を向くように」角度を調整します。↓の動画を見ると、インスペクタタグの「角度」の数値がくるくる変わっているのが分かると思います
bandicam 2023-01-27 18-48-26-311
やり方を詳しく解説すると、
例えば、肘XYの値が↓の位置にあるときは、
肩XYの数値がどうなろうと肘はこの角度になっていて欲しいわけです。
で、恐らく初っ端からこの角度がずれていることが多いので、まずは先ほど前腕パーツを丸ごと動かすときに使った回転デフォーマを使って直します
bandicam 2023-01-28 11-14-27-626
そしたら画面下のスナップショット機能でこの前腕の角度を撮っておき…
肩XYの全ての数値で前腕が同じ角度になるようデフォーマを弄っていきます。
スナップショットで撮った腕が半透明で表示されるので目安になりますし、現在の前腕の角度であれば回転デフォーマの針部分が常に上を向くみたいなのでそれも指標にします。グリッドも参考になりますね
bandicam 2023-01-28 11-18-57-704
で、上の動画のように調整する場所が9点だけであればめちゃくちゃ楽なんですが、
実際はこのようにどこかで回転バグが起きるので、
bandicam 2023-01-28 11-26-06-535
肩Xの0.1に点を打って0°を一瞬で360°に変えることで戻る動きを回避する必要がありますし
bandicam 2023-01-28 11-27-21-865
↑の調整を行っても中途半端な数値の時は全く同じ角度になってくれないので
bandicam 2023-01-28 11-30-36-424
結局↓くらい細かく点を打つ必要があります。
正直この辺はめちゃくちゃ非効率でよくない作り方だなーと思ってます。
もっと効率よくスマートな作り方を思いついたら別の記事書きたいです。
(ただ、こちらも上腕の回転デフォーマと同じで一度作ってしまえば使い回せるのは大きな強みかなと思います。)
角度の調整が終わったら、いよいよ前腕制作のラスボス、肘の形状の調整です。
本記事の最初の方で
肘の形状は腕の形で微妙に異なる、というお話をしたかと思います。
勿論、これら全て手動調整でございます！(自慢げだが全く自慢するところではない)
上腕から流用してきた「前腕の長さ」デフォーマにいっぱい点を打ってゴリ押し調整します。
bandicam 2023-01-28 11-50-26-282
一体何か所調整しなければいけないんだ…と絶望したくなりますが、実際は
こんな感じで上下の形状は大体同じなのでコピペで結構流用が出来ます。
全体の形だけでなく、線画と影も調整が必要です。
こんな感じで未調整だと線画と影が不自然に残って違和感がありますので、
線画はべた塗りパーツの裏に押し込み、影は範囲外におしやることで見た目を整えます
線画の紐づけパラメータ↓
影の紐づけパラメータ↓
どちらも気の遠くなるような作業量です…。
これが終われば前腕完成まであともう一息です。
「肘の影」を作ります。
まずは内側の影。
本記事の最初の方で「肩関節を外側・内側にひねると、連動して肘も外側内側に動きます」とお伝えしたかと思います。
bandicam 2023-01-25 11-44-35-672
↑の動画をもう一度よく見ていただくと、肘の向き自体が変わっているのが分かりますでしょうか。
この「肘の方向変化」を分かりやすくするために肘の影が活躍します。
bandicam 2023-01-28 13-12-00-374
↑のように、前腕の左右の角度に合わせて影も左右にひねってやります。
一定以上に達すると前腕にクリッピングしている影パーツは点を打たないことで非表示になりますので、無理にデフォーマを裏返す必要はありません。
bandicam 2023-01-28 13-15-46-589
同じく肩XYの方もパーツは非表示になる部分はデフォーマ変形は適当です。
bandicam 2023-01-28 13-16-19-688
内側が出来たら次は外側。
外側の影はこのように２本の線があります。
これを、前腕の角度に合わせて
bandicam 2023-01-28 13-20-38-344
左右どちらかを表示させてます
前腕にクリッピングしているので範囲外は非表示になります。表示させたくないときはデフォーマを外側にぐにゃっと変形させてます
bandicam 2023-01-28 13-23-24-978
おまけで描画順について。
上腕は胴体との干渉があったので肩XYパラメータに点を打って細かく管理する必要がありましたが、前腕はフォルダごと「手前後」パラメータに点を打って変えればOKです。非常にシンプル！
bandicam 2023-01-28 13-41-38-624
ー－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
これで前腕は完成です！
bandicam 2023-01-25 11-22-37-340
いえーい！
bandicam 2023-01-27 11-16-45-938
めっちゃぐりぐり動くー！！！
改めて解説して思いましたがホント地獄のような作業工程ですね！！
よく完遂できたもんです。四六時中Live2Dやってても苦にならない性格でよかった……。
ちなみに次回以降の手の制作に比べればここまでの工程はおもちゃみたいなものです。それくらい手はヤバいです。覚悟して楽しみにお待ちいただければ幸いです。
正直、この解説を見て「参考になりました！私もやってみます！」といえる狂気のモデラーが果たして存在するのかというと疑問なんですが、
・「Live2D突き詰めればこんなもの作れるんだ」という証明
・「ここまでパーツ数デフォーマ数増やしまくっても動くんだ」という証明
・荒削りではあるが今後のLive2Dハンドトラッキングへの研究材料
にはなるんじゃないかなぁと思います。一時一句真似しなくてもLive2D詳しい人なら構造だけ理解してもっと効率的な作り方発明できるかもしれませんし！(※したら是非教えてほしい…)
次回以降の手の解説は恐らく一記事にはとてもまとめきれないので数回に分けての更新になると思います。ようやくハンドトラッキングの「ハンド」の解説が出来る喜びよ！引き続きどうぞよろしくお願いいたします。
それでは！
Comments
説明ありがとうございました。私はまだ初心者なので、これらのテクニックを試してみるべきかどうか迷っています。でも、Live2Dがうまくできるようになったら、プロジェクトに追加してみたいと思っています。その時のために、Vtube Studioの手と腕のトラッキングシステムが改善されればいいなと思います。wwww
Bitsy-TheBitzr
2023-02-12 23:40:39 +0000 UTC「雑談しながら肘の形状整えるlive配信X時間」なんてどうですかね？！ って提案したくなるくらいには、ひものさんの狂気にあてられました。力作投稿ありがとうございます/お疲れ様です！ 肘の関節だけの自由度は低くて、肩関節が回ったり捻ったりすることで、腕の自由度が表せるというのが、目からウロコでした。いやぁ面白いです！！ これより、さらにややこしいって想像つかないですが、次の解説も今から楽しみです！
たかき
2023-01-28 12:32:18 +0000 UTC
