【Live2D解説】特大ニュース！ハンドトラッキング制作に革命が起きました
Added 2023-04-29 12:54:20 +0000 UTC★前置き
最早恒例の事ですが、今回の記事もめちゃくちゃ長いです。
手順だけを説明するならもっと短くて済むのですが、皆様には「なぜこうなるのか」「なぜこうするのか」という原理もしっかりお伝えしたいのでどうしても文字数が多くなってしまってます。
「既にここに書いてあることは理解してるわ～」という部分がございましたら適宜読み飛ばしつつご覧いただけば幸いです。
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
こんにちは。
今日は皆さんに特大ニュースがあります。
ここ数か月、ゆっくりとハンドトラッキング用Live2Dの解説記事をあげているのですが、それを読んだ方なら分かる通り、基本的に私のハンドトラッキング制作は力技&力技、工数をかけ時間を犠牲にしまくってクオリティを上げるタイプの作り方です。
しかし、先日とあるFanbox支援者さんから
「ハンドトラッキング用の腕制作の簡略化手法を発見した」
という情報提供を頂きまして、
結果、
【Before】
【After】
とんでもない簡略化に成功しました
正直、今までのやり方は余りにもめんどくさすぎてとても真似できるようなものじゃないと思っていたんですけど、この手法ならば皆様も気軽に取り入れられるようになったと思います！というかハンドトラッキング以外にも使える手法になっていると思いますまじですごい…。
(※但し、ある意味Live2Dの仕様の裏を突いたバグ技的な手法なので、VTSでは動くことを確認しているものの、他のアプリやゲームでの動作は保証しません。ある程度仕様が決まっている商業案件…特にゲーム系案件では使用しない方がいいと思います。また、今の所Cubism4だけでなくCubism5alpha版でも同じ挙動になることも確認済みですが、将来的にどうなるかは分かりません。)
情報提供者のてみけるさん(Twitterリンク)とご相談して、
ご厚意でまずは私のFanboxにてこの技法を解説させていただくことになりました。
こんな目から鱗の技をご共有していただいたことに感謝の念が絶えません＞＜
最後に改めてリンクを貼りますが、てみけるさんのTwitterにて腕のサンプルcmo3ファイルも配布していただけるとの事なので、
この記事だけではよく分からなかった、という方も是非てみけるさんのTwitterをフォローしてデータをDLしていただければと思います！！
それでは早速解説行きます！！
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
まずはどれ程簡略化出来たかについて
こちらが前回、前々回の記事です。
※改訂前過去記事【Live2D解説】ハンドトラッキング対応モデルの作り方②上腕
気付けば12月ですねー！ しばらく更新が出来ずごめんなさい。 ちょっと色々トラブルとかもあって創作全般へのモチベが下がってました…。 (察した方は多分それの事で合ってます。知らない方は知らないままで大丈夫です。) ようやくYouTubeの方も動画作ったり出来るようになってきたので、 Fanboxも少しずつ記事更新できた...
※改訂前過去記事【Live2D解説】ハンドトラッキング対応モデルの作り方③前腕
予告通り、ハンドトラッキング解説の続きを行います。 前回は「上腕」の作り方について解説しました↓ 今回は「前腕」の作り方についてです。 ということで、前回のように「手首から先を消失させた」モデルを用意しました 肘から下もぐりぐり動かせます。物理演算で「前腕の動きに少し上腕の動きが連動する」ようにしてま...
上の記事でお伝えした通り、基本的には下の動画のように
bandicam 2023-04-25 07-23-12-702
回転デフォーマに大量の点を打って力技で角度を制御しています。
特に肩(肘)X・Yの数値0付近は、点同士の間が見えなくなるくらいに細かく点を打つ必要があるし、そこまでしてもゆっくり動かすと粗が目立ちます。
bandicam 2023-04-25 07-30-56-771
しかし、修正後はこの大量の点打ちから解放され、さらにXYの値0付近の動きの粗も一切なくなるという驚異の改良が出来ています。
bandicam 2023-04-25 07-34-19-431
一体こんな魔法みたいな角度調節をどうやっているのでしょうか？
↑の動画で感づいた方がいたらめちゃくちゃ鋭いですが、
この動きは「ブレンドシェイプ」と「回転デフォーマをワープデフォーマーで動かす」技法の合わせ技になっています。
「回転デフォーマをワープデフォーマーで動かす」って意味不明だと思いますが今からちゃんと解説するのでご安心くださいｗ
(おさらい)ブレンドシェイプとは
そもそもブレンドシェイプとは何かについて、YouTubeでは講座配信をやったことがあるのですが↓
Fanboxではあまり語ってこなかったので改めて簡単に説明します。
ブレンドシェイプとは、動きの掛け合わせが出来る特殊なパラメータのことです。
例えば、普通のパラメータ2種類にこのように髪揺れの動きを付けたとします。
bandicam 2023-04-25 08-53-49-914
上の動画のようにただ揺れを付けただけの段階だと、二つの動きは連動していません。
この二つの動きを組み合わせるには「四隅のフォームを自動生成」などの手法を使い自主的に動きを作らなければいけません。
bandicam 2023-04-25 08-56-24-333
しかしブレンドシェイプは、この「二つの動きを組み合わせる作業」が要りません。
bandicam 2023-04-26 12-15-51-011
このように、動きを作ってしまえば自動的に動きを掛け合わせてくれます。
揺れものの動きを作るのが本当に楽になりました。
更にもう一つブレンドシェイプには革新的な機能があります。
それは「重みの調整」
例えば、「ブレンドシェイプでジト目を作ったけど、閉じた目がおかしくなっちゃった…」という時。
bandicam 2023-04-26 12-25-55-213
これが通常パラメータであれば、閉じ目の時の形状を直接調整できますが、ブレンドシェイプは「自動的に」動きを掛け合わせてくれる機能なので、一部だけ形状を変える、という事が出来ません。
しかし、「重みの調整」を使えば「一部だけブレンドシェイプの変形の効き具合を調節する」事が可能です。
重みの調整はこんな感じでグラフを管理する形になっています。
グラフの重みの数値は0％から100％まであって、100％が「ブレンドシェイプで変形を付けたそのままの状態」です。0％に近づくほど変形度合が少なくなっていき、0％で「完全にブレンドシェイプでの変形が効かない状態」になります。
なので、今回の「ジト目の時の閉じた目がおかしくなっちゃった」という場合の対処法は、「閉じた目の時だけジト目の重み数値を0％にする」と改善するので、
←目でジト目の時に変形したパーツを選択して、ブレンドシェイプの重みの設定で
「右目 開閉」でグラフを作り、
右目開閉が0(閉じた目)の時は重み0％
1～1.2(開けた目)の時は重み100％
になるように調節すればOKです。
※私は目開閉パラメータをデフォルト状態から弄っており、1.2で見開き目を追加しているのでこのような数値になっていますが、通常通り0～1でまばたきを作っている方は1.2の時の数値は無視して大丈夫です。
→目も同じように設定すれば、閉じた目の時に動きがおかしくなることは無くなりました！
bandicam 2023-04-26 12-38-56-474
かなりざっくりと説明しましたが、これがブレンドシェイプの基本的な使い方です。
ちなみに、現行版(Cubism4)ではブレンドシェイプに変形を紐づけられるのはワープデフォーマーとアートメッシュの動きだけです。
回転デフォーマの動き・描画順・透明度はCubism5から使えるようになります。
しかし今回ブレンドシェイプに紐づけるのはあくまでもワープデフォーマーです。
次に、今回もう一つの要となる技法、「回転デフォーマをワープデフォーマーで動かす」やり方を説明します。
「回転デフォーマをワープデフォーマーで動かす」とは
流石にこの記事を読んでいる方で知らない方は居ないと思いますが、回転デフォーマとはこれの事です。
回転デフォーマの特徴は中に入れたものを形状を変えずに動かすことが出来るという点です。
bandicam 2023-04-26 13-03-55-567
回転デフォーマで出来る動きは「回転」「拡大縮小」「位置の変更」ですが、どれも中のパーツの形状は変わりません。
次に、ワープデフォーマーとはこれの事です。
ワープデフォーマーは回転デフォーマと違い、中に入れたものの形状を変えることが出来ます。
bandicam 2023-04-27 01-55-05-982
回転デフォーマと同じように「回転」「拡大縮小」「位置の変更」も出来ますが、
ここで今回の講座において重大な特徴がありまして、
ワープデフォーマーはそのまま動かした場合、パラメータの点と点の間を直線状に動きます。それが原因で、場合によっては中身の形が歪みます。
ちょっと分かりにくいと思うので動画でお見せします。
回転デフォーマで時計回りに90°回転させると、このように中のものの形状を変えずに回転させることが出来ますが…。
bandicam 2023-04-27 02-05-03-057
同じようにワープデフォーマーで時計回りに90°回転させると、このように途中で中のものの形状が歪みます。(今回の場合は小さくなります)
bandicam 2023-04-27 02-06-37-808
なぜこうなるのか、もっと原理が分かりやすいように図にします。
回転前と回転後のデフォーマを重ね合わせて、分かりやすいように角の4点に印を付けました。
先ほどもお伝えした通り、ワープデフォーマーはそのまま動かした場合、パラメータの点と点の間を直線状に動きますので、赤線のような軌道をたどります。
※見辛いので省略してますが角以外の点も同じように直線上に動いています。
すると、軌道の中間地点(紫色点付近)では、
形が歪んで小さくなってしまうという訳です！
今回は時計回りに90°の回転だったのでこれくらいの歪みで済んでいますが、
これが時計回りに180°回転するとどうなるでしょうか？
回転デフォーマであれば綺麗に180°回転してくれますが、
bandicam 2023-04-27 02-24-23-636
ワープデフォーマーだと…なんということでしょう、中間地点で完全に中身が縮んで無くなってしまいました。
bandicam 2023-04-27 02-26-07-262
それもそのはず、先ほどのように図に表してみると、
180°回転時は4つの角の点が綺麗に交差して入れ替わることとなり、
中間地点は全ての点が重なって「無(限りなくサイズ0に近い状態)」になります。
(こうやって「無になります」とか書いてると改めてバグ技だなぁと思います…ｗｗ)
このワープデフォーマーの歪みは、拡張補完を使ったり、間に更に点を打ったりすることで解決するのですが、
今回は、ある意味不便ともいえるこのワープデフォーマーの歪みこそがカギとなりますのでよく覚えておいてください！
さて、回転デフォーマとワープデフォーマーの特徴を知ったうえでお聞きします。
「ワープデフォーマーの中に回転デフォーマを入れた状態で、ワープデフォーマーを180°回転させると中身はどうなるでしょうか？」
デフォーマー構造で言うとこんな感じです。
一番親がワープデフォーマー＞次が回転デフォーマ＞一番子が動かしたいパーツです。
「回転デフォーマは中のものの形状を変えない」
「ワープデフォーマーは回転させると中間地点で歪む(縮む)」
「ワープデフォーマを180°回転させると中間地点で無になる」
この特徴が合わさった結果…
こうなります。
bandicam 2023-04-27 02-37-30-105
なんと、中間地点で一瞬で角度が切り替わるのです。
「いくらワープデフォーマーが歪んで(縮んで)も中の回転デフォーマと更にその中のものの形状は一切変わらないので、ワープデフォーマーが無まで縮んで反転した瞬間に一気に角度が切り替わる」という訳です。
……この、「一瞬で角度が切り替わる」動き、どこかで使いたいと思いませんか？
そう、腕の動きです。
bandicam 2023-04-27 02-58-23-459
これまで、腕の動きは、
長さの変更はワープデフォーマーで管理し、
bandicam 2022-12-08 05-21-17-270
角度を回転デフォーマで管理していました。
bandicam 2022-12-08 05-22-39-493
これだと、XY0付近での「一瞬で角度が切り替わる」部分の調整に多大な手間がかかり、大量の点を打つ必要がありました。
しかし！この角度管理用の回転デフォーマの親にワープデフォーマーを作り、
回転をワープデフォーマーで行う事により、大量の点打ちから解放されます。
↑いちいちこんな風に少しずつ角度を変更しなくても、
bandicam 2023-04-27 02-37-30-105
↑この回転の原理を使えば一瞬で角度を変えられるからです。
更に、このワープデフォーマーをブレンドシェイプで角度変更することにより、
bandicam 2023-04-27 05-36-30-488
最早肩・肘のXYには一切点を打たずに綺麗に腕を動かすことが出来てしまうのです！
ーーーーーーーーーーーーーーーーーーーーーーーーーーーー
以上が今回の簡略化の原理になります。
続いて具体的なデフォーマ構造を見ていきます。
デフォーマ構造について
本当は上腕・前腕まとめて解説したかったのですが、
あまりにも記事が長くなってしまったので前腕の説明は次回にします！
ということで、上腕の従来のデフォーマ構造はこんな感じです。
赤マーカーを引いたのが角度管理用の回転デフォーマ
青マーカーが長さ変更用のワープデフォーマです。
これが新バージョンだとこうなります。
赤マーカーが角度管理用回転デフォーマ
青マーカーが長さ変更用ワープデフォーマ
そして紫マーカーがブレンドシェイプに紐づける角度用ワープデフォーマです。
(その他微妙に構造が異なっている部分がございますが本記事の趣旨からズレてしまうので今回は割愛します)
赤・青・紫それぞれのデフォーマの変形の仕方を見ていきましょう。
まず青…長さ変更デフォーマ。
これは改善前と殆ど変わりません。
腕の長さを変えるだけのデフォーマです。
bandicam 2023-04-27 14-36-19-991
構造の変更による微調整は必要ですが、変更前に既に動きを作っていたら殆ど流用できるかと思います。
次に赤…角度管理用の回転デフォーマ。
こちらですが、一切動きを付けません。
ただ置くだけです。
この回転デフォーマの意義は
「中身の形状を変えないようにする」ただそれだけです。
↑あんなに頑張って作った大量の点が要らなくなった瞬間であります…(´；ω；｀)
(もし真似して作った方が入らっしゃったら本当に本当に申し訳ございません：：
まさか私もこんなに簡単になるとは思わず…！！！)
最後に紫…ブレンドシェイプに紐づける角度用ワープデフォーマ。
今回のキーとなるデフォーマです。
形は正方形で、変換の分割数は2×2にしておきます。
分割数は何でもいいのですが2×2が見やすいです。
こちらも肩XYには点を打ちません。
打つのは新たに二つ用意したブレンドシェイプパラメータです。
一つ目のブレンドシェイプの名前は「肩角度補正X」とでもしておきましょう。
範囲は最小0、デフォルト1、最大1にしておきます。
なぜ「デフォルト1」なのか、ですが、
①デフォルトが1…つまり「デフォルトでブレンドシェイプがONになっている」状態にする。
②重さの調整で、特定のパラメータの動き(例えば、「笑顔パラメータが1の時」など)
以外ではブレンドシェイプの影響度を0％にする。
③すると、「キー押しなどの特別な挙動」をしなくても、特定のパラメータの動きを
した時のみブレンドシェイプのパラメータを動かすことができる。
例えば、困り眉を作り、笑顔パラメータが1以外の時(つまり0の時)は
影響度を0%にすれば、笑顔目の時だけ眉毛を困り眉にする、
みたいな挙動をさせられる。
…という原理を使いたいからです。
この「デフォルト1にし、重みの調整で影響度を管理することで、特定のパラメータの動きをした時のみブレンドシェイプのパラメータを動かす」テクニックは、
今回の腕に限らずありとあらゆるところで使えますので、覚えておいて損はないです。
ブレンドシェイプを作ったら、デフォルトの位置を、上の図のようにワープデフォーマと中身の腕が斜め←45°になるように調整します。
※何故こんな中途半端な位置にするかは後に説明します。
ワープデフォーマを綺麗に45°に回転させるやり方ですが、シフトキーを押しながら回転させるとこのように45°単位で回転させることが出来ます！
bandicam 2023-04-27 15-19-17-192
次に、先ほど作った肩角度補正Xパラメータに点を打ち、
肩角度補正Xパラメータが1.0の時に斜め→45°になるように回転させます。
bandicam 2023-04-27 15-44-57-592
こちらもシフトキーを押しながら回転させると良いです！
肩との接続部がおかしくなるかもしれませんがそれは後で微調整します。
次に、「肩角度補正X」パラメータの重みの調整をします。
角度補正用ワープデフォーマを選択した状態で「ブレンドシェイプの重みの制限設定」を選びます。
するとこのようにグラフ設定が出てくるので、
「パラメータ」の中から「←肩X」を選び「追加」をクリック
重みの制限グラフのプリセット「直線2」を選びます。
すると、肩Xを動かしたときの挙動はこんな感じになります。
bandicam 2023-04-28 07-38-53-990
肩Xが-10の時はブレンドシェイプの重みが0%なので↓のデフォルトの状態
肩Xが10の時はブレンドシェイプの重みが100%になり↓の状態
その間を直線で結ぶ制限グラフを作ったので…
bandicam 2023-04-28 07-38-53-990
間の動きを自動的に作ってくれるという訳です！
これでXの動きは終わり。
ここまで出来たら、意図せぬ掛け合わせを防ぐため一旦「肩角度補正X」の数値をOFF…つまり0にしておきましょう。
そうしたら今度は「肩角度補正Y」という二つ目のブレンドシェイプパラメータを作ります。範囲は先ほどと同じく最小0、デフォルト1、最大1。
そして、肩角度補正Yが1.0の時、下向きに斜め45°になるように回転します。
bandicam 2023-04-28 07-56-48-519
そして、重みの制限設定でこのようなグラフを作ります。
今度は先ほどとは逆向きのグラフになりました。
パラメータは←肩Y、プリセットは直線3です。
(ちなみに、今回のように一つのオブジェクトに2つ以上ブレンドシェイプを紐づけた場合は、赤丸の部分からブレンドシェイプの切り替えが出来ます)
すると、肩Yを動かしたときはこんな動きになります！
bandicam 2023-04-28 08-02-42-462
肩Yが10の時はブレンドシェイプの重みが0%なので↓のデフォルトの状態
肩Yが-10の時はブレンドシェイプの重みが100なので↓の状態
間の動きを自動的に補完します。
はい。という事で上腕の基本の角度制作は以上になります。
「肩角度補正X」「肩角度補正X」を両方とも1にして動かしてみてください。
bandicam 2023-04-28 08-06-54-280
何という事でしょう…。
綺麗に動いています。
(※新規で作った方は恐らく肩の接続部が荒いと思いますが
もう少し辛抱ください…！)
たった2回、ブレンドシェイプを設定しただけで、
こんなに必死に点を打っていた時と同じ…いや、
それどころかより綺麗な動きが出来てしまいました。
ホント発案者のてみけるさんは天才です…。
ここまでなるべくかみ砕いて説明してきたので、既に原理を理解している方もいらっしゃるかと思いますが、「なんだこの魔法は！？」となっている方向けに
「なぜこうなるのか」をもっともっとかみ砕いて説明します。
説明するのでこの無駄のない美しすぎる技法に酔いしれてください。
まず、今回設定した動きは上の3つのみです。
①がどちらのブレンドシェイプもOFFの時のデフォルト位置です。
最初にデフォルトの角度を中途半端にしたのは、
このグラフの作り方だと肩X-10・肩Y10の時ブレンドシェイプの重み0…つまり「デフォルト位置」になるからなんですねぇ。
②が「肩角度補正X」の重みが100の時の動きです。
③が「肩角度補正Y」の重みが100の時の動きです。
では、肩X10,肩Y10を④だとすると、④はどのような動きになるでしょうか？
①と③を比べてみると、下向きに90°角度が変化しています。
④は「肩角度補正X」「肩角度補正Y」両方の重みが100、
つまり②と③が掛け合わさった動きです。
なので、②を下向きに90°回転させるとこうなります。
間の動きもブレンドシェイプが補完してくれるのでバッチリです。
そして、一番の問題である肩X0,肘X0(⑤とします)ですが、
ここに到達した瞬間、
bandicam 2023-04-28 18-32-27-648
先述した「デフォーマが歪む」原理により、角度補正用ワープデフォーマが無になり一瞬で角度が切り替わります。
どういう構造で動いているかご理解いただけたでしょうか？
最後に、最初に作った「長さ変更デフォーマ」を少し変形させて肩との接続部を微調整します。簡略化のおかげで調整点は3×3の9点で済むはずです。
bandicam 2023-04-28 18-48-03-423
線画アートメッシュも同様に3×3の9点を微調整し、余分な線画を消します。
bandicam 2023-04-28 18-49-20-482
腋の影などは改善前と全く変わらない手法で作れるので説明は割愛します。
これで上腕は完成です！
説明はクソほど長くなってしまいましたが、実際の工数は涙が出るほど少なくなっているかと思います。改めてこんな革命的な技法をご共有いただいたてみけるさんに多大なる感謝を申し上げます！
てみけるさん側で今回の技法を使用したサンプルデータを無償配布中です。
↓↓↓
https://twitter.com/temikerurero/status/1652281582777159681?s=46&t=Tv74DG_u8zVyf0fhqoWktA
「記事読んだけど理解しきれなかった」
「理解は出来たけどいきなり作るのもなぁ…」
という方、是非DLして実際に触っておぉ！となっていただきたいです！
次回は前腕の簡略化の解説をします。
今回とほぼほぼ同じ作り方ですが、少し工夫が必要になってきます。
それでもめちゃくちゃ簡単になってるのでおたのしみに！
それでは！
Comments
力作ありがとうございます！ こだわりの文章量と、豊富な補足動画で圧倒されます。 回転デフォーマ（アフィン変換限定、線形な変換のみ=形が歪まない）の解釈が、ワープデフォーマの解釈より優先されるから成り立つテクニックってことですね。 おっしゃるとおりすべてのツールが同じ動きしてくれるか、少し怖いところはありますね。 ただ、こういうのはコンテンツが多いもの勝ちになりがちだし、ひものさんの高品質のモデルをどんどんだして既成事実化してしまえ！（暴論） まだすごい勢いで成長途上のlive2d。こうしてみんなに技術を共有していく姿勢には頭が下がります。 解説記事楽しみにしてます。
たかき
2023-04-29 13:31:29 +0000 UTC更新ありがとうございます🙇お疲れ様です🍵 ひもの先生の今までの記事を参考に試しで腕を作ったのですがこんなにも簡単になるのですね、、！てみける様の技法も凄いですし、最初のゴリ押しながらも綺麗に動くひもの先生の技法もどちらも凄くて尊敬です！ 改めて作る時はこの技法を使いたいと思います😭ありがとうございます！！
Shinonome_1004
2023-04-29 13:15:14 +0000 UTC
