※改訂前過去記事【Live2D解説】ハンドトラッキング対応モデルの作り方②上腕
Added 2022-12-08 19:34:53 +0000 UTC気付けば12月ですねー！
しばらく更新が出来ずごめんなさい。
ちょっと色々トラブルとかもあって創作全般へのモチベが下がってました…。
(察した方は多分それの事で合ってます。知らない方は知らないままで大丈夫です。)
ようやくYouTubeの方も動画作ったり出来るようになってきたので、
Fanboxも少しずつ記事更新できたらと思ってます。
という事で前回に引き続きハンドトラッキングのお話！
今回は上腕の作り方について解説します。
※最初に言っておくと今日の解説は力技です
数値の話も大量に出てきますが感覚で作っているので、
もしかしたらより良い方法があるかもしれません。
(数学の公式とか使えばもっと早く効率的に出来るかもしれませんが知識が無く…；；)
ーーーーーーーーーーーーーーーーーーーーーーーーー
というわけで、解説用に肘から下を消失させました
こんな感じでぐりぐり動きます。シュールですね
前回作った体の動きが良く活きています。
bandicam 2022-12-08 03-44-31-166
腕の関節って本当に凄い柔軟で可動域も広くて、
上腕なんてほぼ360°いろんなところに変形させることができるんですよ
じゃあこれをLive2Dで表現するにはどうすればいいのか？
特に大きな理由が無い限り、皆さん腕は回転デフォーマに入れて作ってらっしゃると思います。では、腕を最大限いっぱい動かしたいときは回転デフォーマを360°回転させればそれでOK！……という訳にはいかないんですね。
bandicam 2022-12-08 03-48-57-662
普通に回転させただけじゃこんな感じで途中で肩が脱臼しますし、描画順もおかしいので服に腕がめり込みます。
その辺の問題を気合で解決した時の動きがこんな感じでしょうか？
bandicam 2022-12-08 03-53-59-420
これだけでも1か月くらいかかってますが、まだこれでも不十分です。
更に腕は「手前に動かす」という動きが出来るんです。
bandicam 2022-12-08 03-57-03-231
これ、途中で腕の上下がひっくり返るので難しさ倍増です。(Live2Dやったことある方ならわかると思います)
更に厄介なのが、外側内側に動かした時はひっくり返らないんですよ
bandicam 2022-12-08 03-59-53-783
「ある地点だけパーツの上下の位置関係がひっくり返るが他では角度が変わるだけ」という処理をしなくてはいけません。
その処理を気合で行って初めて冒頭の動きが出来ます。
bandicam 2022-12-08 03-44-31-166
…と、サラッと動きを説明するだけでも頭が痛くなってきますが、ひとまず順番に見ていきます。
まず、紐づけるパラメータの考え方にコツが必要です。
通常の作り方であれば、Live2Dの腕は「上げるか」「下げるか」の2択なので1パラメータで作ることが多いと思います。
bandicam 2022-12-08 04-26-26-489
「じゃあいっぱい動かしたいときはこのまま角度を増やせばいいのだー！180°動かすぞー！」
とやってしまうと、トラッキングやアニメーションで上手く動かせません。
ワイパーみたいな動きになってしまいます。
bandicam 2022-12-08 04-28-03-385
冒頭で説明した立体感のある腕の動きを作るには「X軸」「Y軸」に腕の動きを分けてやるのが大切です。
なんかめっちゃ点打ってありますがそれは一旦おいといて、
これデフォルト位置なんですがめっちゃマイナスに偏ってますよね。
X0,Y0だとこうなります。
ど真ん中！の真ん前！に手を突き出した状態になります。
これをニュートラルだと考えて、
bandicam 2022-12-08 04-38-21-684
そこから方向別に腕の長さを伸ばしてやります。
こうすることで、上下左右前後が組み合わさった立体感のある動きを無駄なく表現できます。
次に、アートメッシュはこんな感じです
(ヌオーって書いてあるやつはスルーしてください)
基本となるベタ塗り・線画・影はこんな感じで別になってます。
線画は塗りつぶして一番奥に置いてます。
bandicam 2022-12-08 04-08-48-515
更に、角度別にディティールを加えるための影がいくつかあります。
例えばこれは腕が体の手前に来た時にだけ表示する影アートメッシュ。
非表示にしたい部分には点を打たないことで一瞬で消えるように処理しています。
bandicam 2022-12-08 04-12-26-321
こちらは腕を下げているときの腋の肉の影。
不透明度の変化と点を打たない処理を組み合わせて腕を上げると徐々に消えるようになってます。
bandicam 2022-12-08 04-15-49-510
これは腕を上げたときに見える腋の影です。
ただ不透明度を上げ下げするだけでなくデフォーマでの変形も使って腋の立体感を付けています。腋作りこむとテンション上がりますね！！
bandicam 2022-12-08 04-44-04-561
お次はデフォーマ構造です
(斜線引いてあるのは肘から下のデフォーマなので一旦無視してください)
根本となる回転デフォーマは前回解説した肩の上下デフォーマに入ってます。
デフォーマを動かせば腕も着いて来ます。
bandicam 2022-12-08 04-50-27-689
次の「腕のONOFF」は差分用なので無視してください。
その次の「腕の位置」は体のXYに追従させる用です。大元のデフォーマである程度追従させてくれるので変形は微調整で済みます。
bandicam 2022-12-08 04-52-35-138
腋関連のデフォーマはそのすぐ下に入ってます。
体XY用デフォーマ＞腕XY用デフォーマ＞アートメッシュ の順です
bandicam 2022-12-08 04-56-15-586
同じ階層に腕に紐づいている方の肩アートメッシュも入ってます。
(前回解説したやつですね)
このように体側と腕側でアートメッシュを分けてやることにより、腕に合わせて繊細な変形が出来ます
bandicam 2022-12-08 05-03-13-654
さて、その下にある「上腕の回転」
こちらが今回一番難しく厄介な変形をしなければならないパラメータです。
冒頭でもお話しした通り、今回は
「ある地点(X,Y=0)だけパーツの上下の位置関係がひっくり返るが他では角度が変わるだけ」という処理をしなくてはいけません。
例えばですよ、「なるほど、ひっくり返ればいいのね？」と考えた時
多くのモデラーは安易にこういう変形をします(私はしました)
bandicam 2022-12-08 05-11-06-152
0の地点を境に上下左右を伸ばす感じですね。簡単ですね。
そしてこの時点ではとても綺麗に見えます。
でも斜めの変形はどうなるでしょうか。4隅の形状を自動生成してみます。
bandicam 2022-12-08 05-12-59-548
ギャーーーーーーーーーー！
腕ではなく食パンになりました。
bandicam 2022-12-08 05-17-17-901
頑張って無理やり腕の形にしてみます。
bandicam 2022-12-08 05-18-14-611
…ダメみたいですね。
間にもっとめちゃくちゃ細かく点を打って無理やり変形させれば何とかなりますが、
仕上がりはとっても汚くなります。
このように、安易に上下左右の変形を入れ替えてしまうと、間の補完が酷いことになってしまうので、この方法は使えないんですね。
なので、デフォーマではあくまでもこのように腕を伸ばす変形しかしません。
bandicam 2022-12-08 05-21-17-270
方向は回転デフォーマで作ります。
bandicam 2022-12-08 05-22-39-493
こちらの手法にも欠点があって、まず、XとYどちらかの値が振り切れている場合はこれくらいのシンプルな点で綺麗に動きますが、Xの限りなく0に近い値(例えば0.01)に点を打つ必要があります。
bandicam 2022-12-08 05-27-50-325
これが無いと回転デフォーマの数値が逆戻りして一か所だけ動きが破綻してしまうからです。
bandicam 2022-12-08 05-29-09-190
Xの値を0と0.01の間一瞬でプラスマイナスを入れ替えることでこの戻る動きを回避しています。(これに関しては後でもう少し解説します)
bandicam 2022-12-08 05-29-46-634
もう一つの欠点。XとYの値どちらかが振り切れている場合は↑の手法だけで大丈夫ですが、間の変形はそうもいきません。特にどちらの値が0の時。このように変に湾曲したような動きになってしまいます。
bandicam 2022-12-08 05-31-42-425
これを防ぐにはさらに多くの点を打たなければいけません。
結果こうなりました。
いつ見ても点あり過ぎてキモイですね…。
一応節操なく打っているわけではなく一定の法則があります
まず、X軸・Y軸共にパラメータの値は「-10,0,10」です。
そして、①の値はその半分、5(もしくは-5)です。
②はその半分の2.5、③は更にその半分の1.25、④は更に更にその半分の0.625…
と、徐々に半々になって間隔が狭くなっていき0の値に近づいていきます。
次に、それぞれの値の回転デフォーマの角度です。
(一気に記入したら画面がごちゃごちゃしたのでまずはメインとなる角度だけ)
一番外側はこんな感じです。→周りだと＋、←周りだと-の値に45°ずつ増えていきます。一番下で数字が合わなくなる(180°と-180°)ので、0.001に点を打って、0の時-180°、0.001の時に180°に設定して無理やり辻褄を合わせます。
間の角度は、先ほどと同じようにメインとなる角度を半々にしていきます。
例えば右上であれば、
-45°の半分で-22.5°
-22.5°の半分で-11.25°(-11.3°)
-11.25°の半分で-5.625°(-5.7°)
-5.625°の半分で-2.8125°(-2.8°)
です。
回転デフォーマの角度は小数点第一位までしか対応していないので、
それ以下の値は四捨五入します。それが()内の値です。
他の部分も同じように行います。(四捨五入前の数値は省略)
(見にくくてすみません汗)
外周が終わったら、それをそのままスライドさせて1個内側の周に当てはめます。
但し、赤丸の部分(0°、90°、180°)の数値は変わりません。
更に内側、その内側、とスライドを続けますが、間のパラメータの点はどんどん少なくなっていきます。赤丸の部分の数値は変わりません。
(これでちゃんと伝わってるか不安ですが…！)
これを全ての点に行います。
我ながら工数がえげつないですが、1点メリットがあるとすればどんな腕の長さにも適応できるので使いまわしが出来るという事でしょうか…。1回作ってしまえばこちらのものです。
bandicam 2022-12-09 03-54-04-258
この時点で回転デフォーマだけ動かすとこんな感じ！いい感じにくるくる回転します。先ほど変な動きをしていた0付近の動きも、一瞬で反対に切り替わるのであまり違和感がありません。
(すこし回転デフォーマ自体の位置が動いているのは肩に合わせて位置を微調整したからです)
回転デフォーマで頑張って作りこんだので、ワープデフォーマの変形はとてもシンプルです。
bandicam 2022-12-09 04-02-20-738
このように伸ばす変形を作って、
真ん中以外の青丸に張り付けるだけです。
これでOK！……と言いたいところなのですが、これだけだと手を上に上げたときに線画や影がめり込んでしまいます。
bandicam 2022-12-09 04-16-48-120
なので、線画と影アートメッシュに点を打って違和感のないように変形させます。
(ベタ塗りデフォーマの下に線画デフォーマを置いたのがここで活きてきます)
bandicam 2022-12-09 04-18-14-828
特に真ん中付近は角度がコロコロ変わるので細かく点を打つ必要があります。
マジで力技ですみません……。
こうして出来上がったのがこの動きです。
bandicam 2022-12-09 04-04-44-649
出来た～～～～～！！！！！
立体感のある高稼働の腕だ～～～～！！！！！
やった～～～～～～～！！！！！
ちなみに描画順は
フォルダに点を打って変えてます。
腕Xの値が0から0.6になる時、Yの値が0から10になる時に描画順を変えて腕が前に来るようにしているのですが、それだと手を体の後ろに持っていけないので、◇←手前後パラメータを新しく作って手を奥に出来るようにしています。
bandicam 2022-12-09 04-09-25-198
実際に動かすときは、↓のように物理演算で肩や体の動きをブレンドして更に自然な動きになるよう調節しているのですが、そのやり方はまたおいおいお話しします。
bandicam 2022-12-09 04-21-07-608
今回の解説は以上です！
過去最高に難解かつ長文な解説でしたが、大丈夫でしたでしょうか？
皆さん着いてきてますでしょうか？＞＜
なるべくかみ砕いて説明するように心掛けてはいますが、
そもそもの作業量が多いのでここからはどうしても今回みたいな
複雑な説明が多くなってしまうと思います。
語彙力が至らない部分も多く申し訳ないですが、
今後も出来る限り言語化できるように頑張りますので
引き続きどうぞよろしくお願いいたします。
次回は肘から下の解説します！
それでは！
Comments
力作ありがとうございます！ 読むだけでも、凄く時間がかかったのに、この文章を作るのにどれぐらいかかったことが！ 配信とかでもあまり触れられてこなかった部分なので、とても新鮮です！デフォルトが「前ならえ」の位置になることから、納得でした。（腕にタトゥ有ったりしたら地獄だろうな） こういうところ（プラスマイナス反転させなきゃなんない）ってシステム的にサポートされてるべきな気がしました。live2dさん頑張ってくれないかな。 解説記事楽しみにしてます、頑張ってください！
たかき
2022-12-08 21:19:48 +0000 UTC
