#21 MToonのUVスクロールで服の模様が動くVRMを作る https://scrapbox.io/files/601d255737a750001c3bc246.mp4
基本情報
VRMで使用可能なトゥーンシェーダーのMToonの機能を使って上の動画のような服の模様が動くアバターを作ります。 テクスチャの作成
まずはテクスチャを作成します。
Tシャツのテクスチャを任意のペイントソフトで開いてグラデーションツールでこんな感じに
https://gyazo.com/f8add0793fa9fcbf11e5f872053da7de
けしごむ.iconゲーミングな感じに
ついでに動かしたい部分のマスク用画像を作成しておきます。
動かす部分を白にします。
https://gyazo.com/c0eaf2d92ce27f08c9901b4bbfd5af60
MToonの設定
UniVRMの最新版と対応したバージョンのUnityを使用します。 今回はUniVRM 0.65.2
使用するモデルと作成したテクスチャをインポートします。
まずは服のマテリアルのテクスチャを差しかえます。
https://gyazo.com/0ca1b8a1f97899c119f65979ad00b2d1
次にUV Coordinates (Auto Animation)の項目を設定します。
UV Coordinates (Auto Animation)
Mask
マスク画像でUVスクロールする領域を指定
Scroll X (per second)
X方向にUVをスクロールさせる速度
Scroll Y (per second)
Y方向にUVをスクロールさせる速度
Rotation (per second)
UVを回転させる速度
今回はX方向に移動させたいのでこんな感じに設定します。
Maskにインポートしたマスク画像を設定します。
https://gyazo.com/d4b4bded0c921ae3f37a6c3e14acb06a
マスクを設定しないと全体が動いてしまいます
https://gyazo.com/9570d35c66ab142f88b60484790c1f41
マスクを設定してUnityで再生するとグラデーション部分だけが動く
https://gyazo.com/b12a70b2aa724bb64375366ca1e82cb6
けしごむ.iconちゃんと作ってないので境目が丸わかりですね
これで服の模様が動くようになりました。
裏表で繋がるようにテクスチャを作ればきれいになるはずです。
アニメーションさせるところを決めてモデルを改変するといろいろ出来ます。
メッシュを追加してしまうのも楽?
発光させる
よりゲーミング感を出すために光らせてみます。
服のマテリアルのEmissionの設定を変更します。
マスク画像を設定
光らせたいところを決められる
HDRを変更
https://gyazo.com/d43d412f538576a87c847d7ab5bb2b93
プロジェクトにポストプロセスを追加
Bloomを追加
設定をちょっと過剰にする
Bloomを過剰に設定するとこんな感じになります。
なお、アバターを使いたい環境ごとにポストプロセスの設定が違うと思うので同じ見え方にはならないと思います。
https://scrapbox.io/files/601d255737a750001c3bc246.mp4
けしごむ.iconゲーミング感
今回は一発ネタでしたが、この機能を使と色々表現が広がりそうです。
参考