【Live2D解説】メガネのリアルな光沢・厚み・反射の作り方 (Pixiv Fanbox)

6月ですね。

今月は仕事数件の平行作業&自分の誕生日があったので

仕事もプライベートも死ぬほど忙しく大変でした…(まだ全然終わってないけど)

遅くなりましたが、前回の眼鏡のモデリングの解説の続きをしたいと思います。

まだ読んでない方は先にこちらをどうぞ👇

【Live2Dアプデ進捗6&解説】とんでもないクオリティの眼鏡が出来てしまいました&眼鏡レンズ屈折表現の作り方

我天才では！？！？！？！？(n回目の自画自賛) 恐らく史上初(じゃなかったらごめんなさい)、 メガネレンズの屈折を取り入れたLive2Dモデルが誕生しました 今までの進捗を見て「乾物ひものにメガネが無いなんて！！！！」とショックを受けていた生粋のメガネ好きの皆様にもきっと満足していただける出来になっているので...

前回はレンズの屈折の作り方を解説したので、

今回はタイトルにあるように、メガネの「光沢」「厚み」「反射」の作り方をご説明します。

【メガネの光沢の作り方】

色々な作り方があると思うんですけど、私はまず

◆土台となるベタ塗りアートメッシュ

◆ベタ塗りレイヤーより一回り範囲が小さいハイライトアートメッシュ

◆マスク用アートメッシュ(今回は棒状に作ります)

を作り、

ハイライトアートメッシュをマスクアートメッシュでクリッピングし、

マスクアートメッシュをスライドさせています。

こうすることで光っている部分が顔の角度を変えることで移動しているように見えるんですね。

bandicam 2022-06-19 20-00-10-073

これを部位ごとにやります。

リム部分はこのように棒を回転させることで対角線にあるハイライトがスライドして見えるので実際に光を反射しているように見えます。

bandicam 2022-06-19 20-03-38-368

全部バラバラにクリッピングしてしまうとクリッピング枠を圧迫してしまうので、

左右のリムやブリッジとヨロイ部分など、まとめられるところはまとめています

↑実際にはこれ全部まとめて一つのクリッピング枠

【メガネの厚みの作り方】

実はこの工程が一番メガネのリアル感に貢献しているのでは？なんてひそかに思ってるんですが(笑)

横を向いた時のこの辺なんかが特に分かりやすいですね。眼鏡のリムの「側面」が見えています。

これが無いとメガネが途端に薄っぺらくなります(こういう薄いフレームもある事にはありますが…！)

作り方の説明行きます。

メガネが入っているワープデフォーマ・リムのベタ塗りアートメッシュ・ハイライトアートメッシュ・マスク用アートメッシュを全てコピーします。分かりやすいように名前の末尾に(側面)とでも付けておくといいと思います。

ポイントは必ずデフォーマごとコピーすることです。理由は後述します。

コピーが出来たら、コピーしたアートメッシュを全てコピーする前のアートメッシュの下に配置します。

そして、コピーしたワープデフォーマーをX軸・Y軸共に少しだけ手前側にずらします。ここまでは、同じ形のアートメッシュを少しだけずらすことで厚みを表現するよくある手法ですね

bandicam 2022-06-19 20-18-47-886

さらにここにひと手間加えます。

先ほど光沢の説明時に「リム部分はこのように棒を回転させることで対角線にあるハイライトがスライドして見えるので実際に光を反射しているように見えます。」と説明しましたが、側面用アートメッシュはこの場所を反対にします

青線が通常リムアートメッシュ用のマスク、赤線が側面リムアートメッシュ用のマスクの場所です。これを同じ方向に動かします

bandicam 2022-06-19 20-26-21-922

こうすることで、側面は正面部分とはズレた場所に光沢が現れます。面が変わると光沢の位置も変わるので、これで立体感が増すんですね。イラストを描くときも良く使われるテクニックです。

このように明るい部分と暗い部分がハッキリするので、「面の変わり目」がとても分かりやすいですね

先ほど「必ずデフォーマごとコピーする」と言いましたが、今くらいの可動域ならデフォーマは同じでアートメッシュを直接ずらしてもそこまで大きなデメリットは無いと思います。

しかし今回は横90°かそれ以上の可動域を作る予定なので、そうするとこのようにメガネが完全に横を向きます。(あくまでも例で変形させました)

この状態に見合うメガネの側面を作ろうとすると、かなり位置をずらさなければいけません。デフォーマ内部でずらすとはみ出しが起きたり中間地点で思わぬゆがみが出てくる可能性が高いので、今回はデフォーマも別にしてしまいました。

【メガネの反射の作り方】

あるととても見栄えがいい反射光ですけど制作難易度は一番低いですｗ

まずマスクは前回の眼鏡レンズの屈折の記事で解説したこちらのマスク反転用アートメッシュを流用します

(一つこういうマスク反転用アートメッシュを作っとくと流用可能なのでめちゃくちゃ楽なんですよね)

あとはこんな風に反射用のアートメッシュを作って↑のアートメッシュでマスク反転しスライドさせるだけです。

bandicam 2022-06-23 00-00-27-599

bandicam 2022-06-23 00-03-04-020

これ自体はよくある手法ですね。

但し、今回は「反射光の種類」にかなりこだわっています。実際に自分で眼鏡を自撮りしてどんな風に光が反射しているのか徹底的に観察しました。

私の環境では、以下の4つの反射光があります。

①モニターの反射

画面の前のモニターの光の反射です。ブルーライトカットレンズなので青く反射します。簡単なのは図形ツールで青色の長方形のベタ塗りレイヤーを作りそれを何個か並る手法ですが、今回はよりリアルさを出すために素材を流用してます

商用利用可能の図、もしくは写真を用意し、PhotoShopの「色域指定」で明るい部分を選択します(許容量はお好みで弄ってください。大きければ大きいほど選択範囲は広くなります)

OKを押すと明るい部分の選択範囲が出来るので、レイヤーを新しく作って青色で塗りつぶします

元のレイヤーを消せばあっという間にモニターの反射光用アートメッシュが出来ました。机などの明るい部分も少しだけ反射しているのがポイントです

これだけではモニターの境界がはっきりしすぎているので、「ぼかし(移動)」ですこし境界をぼかします。

この「ぼかし(移動)」は縦と横のぼかし幅に差が出るのでシャープな印象を保ったまま境界の印象を和らげることが出来ておススメです。

あとはこれを不透明度20%にしてスライドさせればモニターの反射は完成です

bandicam 2022-06-23 00-15-31-077

そのままの形でスライドさせてもいいんですけど、「凹レンズへの反射」を強調するために左右で少しデフォーマにパースをかけて変形させていたりもします。

上下には動かしません(動かして上下の動きに追従させてもいいんですけど、後述する部屋の明かりの反射光を際立たせたり「正面に置いてあるモニターの反射」という面を強調するために今回は追従させてません。)

②部屋の明かりの反射光

上を向いた時に登場する反射光です。部屋の明かりの反射(外だと太陽の反射になるのかしら？)なのでこの中で一番強い反射です。

こちらはクリスタで丸いボケブラシを何回かトントンしてそれっぽい形を作りました

特筆すべき点は「アートメッシュを二つ」使っていることです。

Live2Dでは通常・加算・乗算の3種類のブレンドモードしかつかえないので、強い光を加算で作ろうと思うとどうしても色が白っぽくなってしまいます。

最初に通常レイヤーでうすーく青い色をのせ…

その上に加算レイヤーで強い光を入れることにより、青→白のグラデーションが生まれより情報量の多い反射光になります。

こちらは上を向いた時にしか出現しません

bandicam 2022-06-23 00-25-49-249

③大きく横を向いた時のリム側面の反射

これです。眼鏡持ってる人は試しに大きく横向いて自撮りしてみてください。多分同じような反射光が出てくると思います。

恐らくリム側面がレンズに反射して出てくる反射光だと思います

見たまんまで3本線を引くだけなのですが、「リムの反射」を強調するためにすこーしだけ暗い色で縁取りして線画を作ってます。

大きく横を向いた時にしれっと出てくる感じで。こちらに関しては上下に追従させてます。

bandicam 2022-06-23 00-32-04-136

④？？？(ドアの反射？)

実はYouTubeやFanboxにあげた進捗の時点ではなかった反射光です。モニターの反射が→側に寄ってるので、正面←向きの時は反射光の情報に乏しい状態でした。

かといってモニターの反射をコピペすると説得力に欠ける(モニター6個あるんか！？ってなる)ので、なにかいい反射ないかなーと自分の自撮りを凝視していたら、←向きの時にうすーく白っぽい反射があったんですよね。

何の反射だろう？？？って思ってたんですけど恐らく防音室の扉の反射かなーと思い当たりました

普段仕事してる位置の←側奥に扉があってそこのガラスから防音室の外の光が入っているので恐らくその反射なんですね。なんでこれだけ青くなってないかはちょっとよく分からないんですけどひとまず見たままで実装してみました。

以上が反射光の内訳です！そんなに難しいことはしてないつもりだったんですけどこうやって描き出すとこだわりの強さ浮き彫りになりますねｗ

そしてそして。↑の解説動画・画像でお気づきの方もいるかもしれませんが…

bandicam 2022-06-23 00-43-40-093

メガネのつる作りました。

ちょっとドン引きするほど制作が大変だった割りに成果は地味ですが、メガネの説得力は増したんじゃないかなと思います。

このつるの作り方も解説したいし顔のXY斜めの作り方も解説したいんですけど、ごめんなさい。今月の更新はこれが限界です…；；

現在Live2Dの仕事二つ掛け持ち(一つは配信でのリアルタイム制作)&裏でどデカいプロジェクトも動いててかつプライベートもくそ忙しい(誕生日旅行もそうだし、そろそろ……結婚式は無理でもドレス着て写真だけでも撮っときたいなという気持ち)のでこれらを遂行するのにいっぱいいっぱいです！

今日実はこのどデカいプロジェクトの打ち合わせだったんですけど、めちゃくちゃやり甲斐あって楽しくてやりたかった事なのでいい感じに話がまとまってきてて嬉しい反面、自分のモデルアプデに割ける時間が更に減った危機感もあります…汗

正直今のペースではコンテストに間に合うのは絶望的です。

「また今回も間に合わないのか」という悲しみが既に強いのですが、それでもこうやって制作の一歩を踏み出せたこと、着実に作業がうまく進んでいること、進捗が既に評価されていること(評価されるだけの技術を身に着けた事)は今までになかった大きな進歩なので、そこは前向きに受け止めつつひとまずコンテスト締め切りまで作れるところまで作りたいなと思ってます。

それでは次回、7月にお会いしましょう！