【Live2D解説】破綻のない輪郭の変形方法(斜め) (Pixiv Fanbox)

7月ですね。日本は夏真っ只中で毎日暑くてヤバいですが世界の皆様はいかがお過ごしでしょうか。

今回はずっと後回しになってた斜め顔の変形について解説したいと思います。

顔の変形の中では一番の鬼門と言える斜め顔。

ちょっとでも形が崩れると一気に見た目がおかしくなってしまいます。

如何に斜め顔を綺麗に作れるかがモデラーの腕の良さ、と言っても過言ではないかもしれません。

今回も2年前のnoteの記述と見比べながら解説していきます。

noteの記述を引用します。(ちょっと長いですがお許しを)

ｰｰｰｰｰｰｰｰｰｰｰｰｰ

Live2Dには「4隅の形状を自動生成」というとても便利なツールがあります。

(参考：Live2D公式チュートリアル「4隅の形状を自動生成」)

二つのパラメータの形状をかけ合わせて、自動的に斜めの動きを作ってくれる、というツールなのですが、これを高可動域の角度XYに反映させるとどうなるかというと…

こうなります。(ぎゃああああああああ)

一見、とんでもないことになっていますが、XYの動きのかけ合わせ自体はとても綺麗に出来ているので、あとは手動で微調整していきます。

そもそも、なんでこんな歪みが発生してしまうかというと、人体の動きには「パース」がかかっているからです。

人間の頭を単純化して立方体で考えた時、このように斜め上や斜め下を向いたときはパースがかかります。

しかし、「4隅の形状を自動生成」機能では、パースを考慮していないのでこのような動きになり、形が歪んで見えます。

つまり、パースのかかってない部分を斜めにずらせば、歪みは解決するのです

ーーーーーーーーーーーーーーーーー

引用以上。

今も基本はこの原理に則って変形させています。

しかし、「斜めにずらせば解決！」なんて簡単に言ってますが、輪郭の構造はそう単純じゃないんですね。

bandicam 2022-07-14 17-07-47-757

「4隅の形状を自動生成」を行った後、一時変形ツール「遠近」を使って、実際にこの法則通り、輪郭を斜めにずらして作ってみました。動きは滑らかですが、なんだか頬が潰れて平面的に見えませんか？お面みたいです。

静止画で見ると特に顕著です。

これが、最新の手法だとこうなります

bandicam 2022-07-14 17-12-48-826

デフォーマの動きはめちゃくちゃですが、実際の輪郭は立体感を保ったまま綺麗に動いているのが分かると思います。

前者の動画のようにただ単に斜めにスライドしてしまうと、このようにおでこや頬が下に下がって潰れてしまいますので、スライド後に手動で高さ・丸みを保ってやることが大切です。そういった細かい調整を行ったのが後者の動画です。

下向きは逆に、頬・おでこがあがり過ぎているので高さを抑えてあげます

なぜそのまま斜めにスライドすると頬・おでこがつぶれてしまうのか

なぜこのような手動調整が必要なのか

図にしてみました

前回のY軸の説明の時に作った輪郭のガイドに横向き・斜め向きを付け加えた図です。

ここに横軸のガイド線を引いてみます。

ちょい見た目がグロテスクですがｗ

この図で注目して欲しいのは、赤線だけに着目するとそこまで大きくパースがかかってるようには見えないという事です。

赤線だけだとより分かりやすいかも

この図のように極端に斜めにずれているようには見えないですよね？

さらにここに顔の側面のガイドを書き加えます。

お分かりでしょうか？正面向きの時には見えていた顔の側面部分は、横を向いた時奥側は完全に見えなくなっています。

ということは、側面と重なっている赤線もその分見えなくなっているという事です。

(下記緑線)

逆に手前側の側面は大きく引き延ばされて顔のメイン部分を占めていますよね。

先ほどの「斜めにずらせば解決！」は、この「見えたり見えなかったりする面積の変動が大きい顔側面」のことを全く考えてません。

なので、確かに奥に行くほどパースがかかってパーツが斜めに下がってはいるんですけど、一番下がっている部分は奥に回り込んで見えなくなっちゃってるので、実際に見えている頬やおでこなどの輪郭境界線は思ってるほど下がらないんですね。

長々と説明してしまいましたが、この理屈が分かってれば先ほどの輪郭線の調整の意味も分かるんじゃないかなぁと思います。

ただ斜めにずらすだけだとこの回り込んだ部分をことは考慮されずに奥側の輪郭がつぶれてしまうので、それを調整する必要があるという事ですね。

「見様見真似でやってみる」のももちろん大切ですが、「理屈を理解してやってみる」だと応用力もクオリティも段違いに変わるので、いつも長々と小難しい説明をしています。ご容赦ください…！

斜めの変形を行う際は先ほど使った一時変形ツール「遠近」がおすすめです。

これでとりあえず斜めにずらしたあと、変形ブラシで形を整えます。

bandicam 2022-07-20 00-38-26-610

下も同じように行います。

bandicam 2022-07-20 00-41-46-417

斜めの変形のやり方に関してはこれで以上ですが、最後に一つめちゃくちゃ大事なことをお伝えします。

「左右の動きの繋がり」だけでなく、「上下の動きの繋がり」も大事にしてください

どういうことかというと、

bandicam 2022-07-20 00-48-37-680

皆さん、こういう「上か下を向いている状態のの左右の動き」の繋がりは凄く大切にするんですけど

bandicam 2022-07-20 00-48-47-552

こういう「左か右を向いている状態の上下の動き」はあんまり気にされない印象なんですよね

左右の動きは綺麗でも上下に動かすと歪んでしまっている場合も結構あるので、適宜チェックするのはとても大切です。

オニオンスキンをONにすると動きの流れを見れます。

基本的に、上・中・下の変形の軌道は「一直線(もしくは＞型)」になるのが望ましいです。

顎・もみあげ・頬、と分かりやすいところを結んでみました

綺麗に直線状に並んでいると思います。

この場合は動きも滑らかに見えます。

bandicam 2022-07-20 00-48-47-552

もう一つ自然に見えるのが、軌道が「＞型」に弧を描いている場合です。

上を向いた時は↖側に、下を向いた時は少し↙側に傾ける感じです。

実際の人間の動きは実はこちらの方が近いです。

bandicam 2022-07-20 01-00-07-579

私はこの「斜め上下を向いた時だけ少し顔を傾ける」動きを物理演算で補完してしまっているのでこの手法は取り入れてませんが、物理演算補正を使わないなら使用してもいいと思います。

但し、直線軌道より難易度は高いです。(各パーツを違和感なく＞型の軌道に配置しないといけない)

ここまでが正しい例。次があまり宜しくない例です

めちゃくちゃありがちな例として、このように先ほどとは逆側の「＜型」の軌道を描いてしまう事が良くあります。作りこんでるうちに斜め上と斜め下の顔がどんどん肥大化してしまってこうなってしまう事が多いんですよね…＾＾；

bandicam 2022-07-20 01-09-13-303

全部のパーツが綺麗に＜型に動いているならそこまで動きに違和感は出ないと思います。ただし、実際の人体の動きとは異なるのでトラッキングで動かしたときにしっくりこないかもしれません。

一番厄介なのがそれぞれの部位の軌道がバラバラという場合です。

色々微調整しているうちにそれぞれのバランスが崩れてこうなってしまうことはよくあります。

bandicam 2022-07-20 01-15-39-399

動かしてみてもチグハグさが目立ちますね。これは明確に「歪み」だと言えると思います。輪郭だけの今の状態ならまだマシですがここに目や鼻・髪の毛などのパーツが乗っかってくるとどんどん違和感は大きくなっていくと思います。

もしこれに当てはまっていた場合は試しに軌道が「直線状」か「＞型」になるように調節してみてください。モデルの上下の動きが滑らかになると思います。

勿論、上下の動きに気を取られ過ぎて左右の動きがおかしくなってしまっては本末転倒なので、左右の動きも適宜チェックしながらやってくださいね。

(斜めの動きが難しいのはひとえにこの「左右の動き」「上下の動き」両方の違和感を無くす必要があるからなんですね…！)

こういった「歪みを理解し、見分け、修正する」能力はほんっとうに大切です。

そして、歪みを見分けるには「目」を鍛えないといけません。

これはもう慣れしか無いと思います。

絵でもLive2Dでもなんでも「昔は上手いと思ってた自分の作品を見返してみたらなんかすごい歪んでる」ってこと、よくありますよね。あれがまさに目が慣れた証拠です。

勿論効率的に目を鍛える方法はあって、それが先ほど言った「歪みをチェックする方法を知る」事だと思います。幸いLive2Dは「原画」というこれ以上ないくらい明確なガイドがありますので、それに沿って歪みを見つけていくのはイラストよりは簡単だと思います。

今後の講座ではこういった「破綻チェック」「歪みチェック」の方法なんかも併せてお伝えしていきたいなと思っておりますので、どうぞ引き続きよろしくお願いいたします。

ーーーーーーーーーーーーーーーーー

輪郭の解説はこれで完成なのですが、次に何を解説しようか迷ってるので、知りたい事、記事にして欲しい事があったらコメントで教えてください。(コメントは日本語以外でもOK！)

ひとまず7月中の予定として、瞳のcmo3ファイルを配布したいなと思ってます。

これね↓

【Live2Dアプデ進捗1】目が最高に上手く出来たかもしれない

我ながら天才かもしれない 可愛くない？？？？？？？ 物理演算もこれでもかってくらい誇張して入れて 大変好みな感じの目の動きが出来てホクホクしてます 目の中で魚が泳いでる表現も「魚モチーフは要所要所に入れてーよなぁ」という所から思い付きで決めたのですがいい感じに思った通りの動きになりました せっかくFanb...

【Live2D解説】newモデルの瞳の構造について

予告通り、こちらの瞳のモデリング方法を簡単に解説します 〇左目 開閉(最小0 最大1.2 デフォ1) 〇右目 開閉(最小0 最大1.2 デフォ1) 〇笑顔(最小0 最大1 デフォ0) 〇目大小(最小-1 最大1 デフォ0) 〇目玉 X(最小-1 最大1 デフォ0) 〇目玉 Y(最小-1 最大1 デフォ0) 「〇」が付いてるのは実際にトラッキングで動かす項目...

cmo3ファイルの配布は何度か要望が出ているのですが、最初にお伝えしておくと「完全な状態(いわゆる立ち絵そのまま)」の配布はしないつもりです。悪用があまりにも怖いし、その責任を取り切れないからです。

なので、配布するとしたらパーツごとバラバラでの配布となります。

これなら仮にデフォーマをまるまる流用されたとしてもシビアなパーツの配置などは真似できませんし、それによる私への影響も軽微です。

物理演算の設定はまるまる流用できちゃいますけどあれは数字の羅列と言ってしまえばそれまでなのでこれも大きな影響は無いと考えます。

ご迷惑をおかけしますがご了承いただければ幸いです。

それから、今回作ったこの図↓

かなり上手く出来たのでもし必要でしたら角度変形のガイドにでも使ってくださいｗ

以上です！それではまた！