VRoid製モデルをMToonの調整でcluster映えする見た目にしよう!
見出し画像

VRoid製モデルをMToonの調整でcluster映えする見た目にしよう!

frontendpict
想定読者: 暗めのワールドやVRライブへ遊びに行って、自分のアバターが予想外に真っ暗になって悲しみに暮れたことのあるcluster民

こんにちは。clusterへ遊びに行くようになり、ワールドごとの目の色の違いが気になってシェーダーの調整に手を出しました。ツバクラロヒトです。

現実世界のバンドギャルはお気に入りの服を身にまとい、メイクバッチリで推しのライブに向かいます。それは演者から観客が意外とよく見えるからだそう。一方これがカスタムアバターで入れるVRライブの場合はどうなるでしょう?推しにそれとなく自分のことを見てほしい、でも目立ちすぎないのがいい。そう、シェーダー調整したKawaii/カッコいい自分で臨みましょう!

というわけで、現実世界でバンギャ♂(?)をしていた視点から、リアルのライブ会場での人の見た目に近く調整をするコツをお教えします。

これが

画像8

こうなります。

画像9

僕自身はUnity初心者でシェーダーを極めているわけではなく、ゴリ押しな部分が見受けられるかもしれません。ご容赦ください。

ライブ会場における自然な色合いとは

ライブハウスでの光は人工光かつ色のついた光です。色のある光源による影色の変化は、イラスト系の記事になりますがこちらが詳しいです。

上記の記事曰く、3つのポイントがあります。

・光と影の色は補色関係
複数の光源がある場合、一方光の色がもう一方影の色になる
・光も混色する

ライブハウスでは複数の光源が使われます。そのため、影の色は別の光源の色になるということです。

要件

光源の強さと色の影響は受けたい
でも全身が暗くなりすぎないようにしたい

どうやったか

先にこちらの記事をご参照ください。

上記の記事で「Half UniUnlit」と呼ばれている手法を使いました。本記事ではVReducerで結合されて出てくるマテリアルごとに、詳細な調整の仕方を記します。

まずclusterの入場制限をクリアする

ポリゴン数、ボーン数、マテリアル数を基準以内に収めてから調整を行います。VReducerに通す、Blenderで編集するなどして、下準備を行い、アバターのアップロードをし、clusterの任意のワールドに行けることを確認しましょう。

調整のコツ

UniVRMをダウンロード、Unityにインポートして、VRoidモデルのVRMファイルをAssetsにD&Dします。
その後、早速調整していきましょう。コツはまとめると下記になります。

1. 暗闇でちゃんと暗くなってほしい部位は、Shade ColorをVRoidモデル読み込み時のShade Colorより暗く設定する
2. 光源の色の影響を受けたい部位は、Emissionを控えめに、暗めの色に設定する
3. 光源の影響を受けたくない部分(どこにいても本来のテクスチャの色を出したい時)は、Emissionを明るい色にする

画像1

Lit Color: rgb(147, 147, 147)
Shade Color: rgb(147, 147, 147)
Emission: rgb(217, 217,217)

前述のすずつきさんの記事に記載の設定です。こちらの数値を基準として、以降「明るい」「暗い」と表現します。

画像2

Lit Color: rgb(147, 147, 147)
Shade Color: rgb(93, 93, 93)
Emission: rgb(177, 177, 177)

しっかり陰影がついて欲しかったため、影色を暗めに、Emissionの色を暗めに設定しました。

画像3

画像4

Lit Color: rgb(147, 147, 147)
Shade Color: rgb(113, 116, 130)
Emission: rgb(153, 153, 153)

しっかり陰影がついて欲しかったため、影色を暗めに設定しました。衣服は暗いところでは暗くなるようにEmissionも控えめです。

「中間色にほんのり舞台照明の色が入るようにしたい!でも髪のハイライトは消したくない!」を叶えるために、髪のハイライト用のテクスチャを編集します。
まずEmissionという項目で予め設定されている白黒の髪ハイライト用テクスチャをペイントソフトで開きます。「F00_000_Hair_00_spe.png」というような名前のファイルです。ここではCLIP STUDIO PAINTを使っていますが、レベル補正が出来るソフトであれば何でもOKです。

Emissionに設定されているテクスチャは、

白に近ければ近いほど発光し光源の影響を受けなくなる
黒に近いところは光源の影響を受ける

つまり、中間色にしたい箇所の色を白に少しだけ近付ければ良いということです。
そこでペイントソフトでレベル補正をかけて少しだけ色を薄くし、保存します。

これを、

画像6

レベル補正の出力の左側の▲を右にズラしていき、この画像くらいの明るさにします。

画像7

保存するとEmissionのテクスチャに反映されているので、引き続きUnityでColorとEmissionを設定していきます。

設定例(★髪色はキャラクターによって大きく異なるため、適宜確認しながら調節してください。)

画像5

Lit Color: rgb(28, 27, 29)
Shade Color: rgb(5, 5, 5)
Emission: rgb(85, 79, 90)

スポットライトに照らされている時など、ハイライト部分以外の髪の色の変化が気になっていました。そのため、Emissionを設定して本来の髪色を維持しつつ、光源の色が混ざるようにしています。

まつ毛なども明るい色にしている人は、そちらにも色の編集とEmissionの設定をした方が良いかもしれません。

おわりに ―― VRでも抜かり無いバンギャ活動を!

clusterで暗闇のワールドに行くときの設定についてメモを書きました。
以上の設定は演者側として参加する時も有効です。

Before(ちょっとホラーですね……)

画像10

After

画像11

画像12

それでは良きclusterライフを!

この記事が参加している募集

おうち時間を工夫で楽しく

この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
frontendpict

サポートして頂いた分は、今後の学習のための書籍代に使わせていただきます。

嬉しいです!ありがとうございます!
frontendpict
大げさなnoteIDを取得した直後にVTuberにハマり、遂にバーチャルの人になってしまったWebフロントエンドエンジニア。 絵を描きながらVTuber関連技術とWebについて記事を書きます。