【VRMLiveViewer】VRoid の衣装を発光させる (Unity)

2022/03/20 Sun [edit]

　あくまで現時点の VRoidStudio v1.4.2 でのやり方となるが、衣装の基本色・かげ色以外のマテリアルの設定(シェーダーカラー)の方法が見つからなかったので、Unity と UniVRM を使って VRoid を発光させる方法をやってみよう。もし、今後のバージョンアップで発光の設定が付いた場合は置き換えて欲しい。

(2023/05/31 追記)
120さんが発光設定を調整できるツール「VRMの光物設定するやつ」を配布してくれてます。Unity を使うのが難しいと思う人はこっちの方が簡単かも。使い方は以下の記事にしてます。

・ツールを使って、VRoid の衣装を発光させる (チュートリアル)
・VRMの光物設定するやつ (ツール)

　ちなみにマテリアルの発光(Emission) の設定は UniVRM 0.79 以降であれば使える。VRM Live Viewer の場合は v3.0α 以降となる。アプリで使っている UniVRM のバージョンを知りたい場合は「ヘルプ＞クレジット」で使ってるバージョンが出てくるので、それ以降のものなら問題無い。

　今回は Hula Flat Works さんのサイバーウェア(V1.0～) を利用させて貰い、その方法を学習しよう。

　もちろん他者の素材を利用する際には利用規約を確認し、その範囲内での利用に留めて欲しい。サイバーウェアの利用規約によると『データ改変は可ですが、改変したものを再配布・販売は禁止です。』とあるので、自分用として遊ぶだけなら問題無いだろう。もちろん再配布等はしてはいけない。

　できれば、製作者のモチベに繋がるので、支援などもしてあげよう。お店用のタグなどがあれば付けてあげたり、お店を宣伝してあげるのも良い。ご厚意とはいえ、無料で貰いっぱなしというのもあまり宜しくない(笑)。

　また至極当然だが、無料配布されているものにあれこれ要望押し付けたり・文句言ったりするのもやめよう。少し考えてみればわかるが、企業や商売でやってるならともかく、それらは業務として対価を貰ってるわけではない。個人の趣味だったり楽しみでやってたりするものも多いのだ。顔が見えない分忘れがちだが、自分が欲しいという理由で赤の他人に無料奉仕を要求し、その貴重な創作活動の時間を奪うのは最も良くない(一般人に意見を言い、その要求をタダで呑んで貰う権利などはじめから無い)。クリエーターには伸び伸びと自由に創作活動して貰うのが一番良い（もちろん、本人が意見・要望を公募してるのなら別だが）。

もはや、完全に別物になってしまった感ある(笑)。

ちなみにいつもデモは１発撮りで、一切加工編集してないので、動画でやってることは誰でも同じ事できます。素材も #VRoid と一般配布物だけだしね。設定もエクスポートすれば共有できるから、そのうちまた設定集にでも入れるかな。#VRMLiveViewer pic.twitter.com/yaxdTziXUk
— ヽ｜∵｜ゝ(Fantom)@VRMLiveViewer (@fantom_1x) March 16, 2022

※素材・クレジットはリプ欄を参照

　ここでは Unity 自体触ったことない人でもできるように細かく書いているので、簡単過ぎる人は必要な部分だけで十分だと思う。実際には以前の魔法陣の作り方とやり方はあまり変わらない。考え方だけわかれば、色々応用できるだろう。

※追記：VRoid Studio での作業はかえって複雑と考え、Unity のみに変更しました。

■着せ替えて VRM エクスポートする
■発光する部分だけのマスクを作る
　●マスク(エミッションマップ)画像の作り方
■Unity でマテリアルの発光を設定する

(※) Unity 2020.3.26f1 / UniVRM 0.89 / VRoid Studio 1.4.2 / Windows11(x64) で確認

■着せ替えて VRM エクスポートする

　まずは、Hula Flat Works さんのサイバーウェア(V1.0～) をダウンロードさせて頂こう。zip を解凍すると、衣装のテクスチャや .vroid ファイル等が入っている。
※掲載当時は Ver1 でしたが、バージョンによってデザインが異なる場合があります。

●BOOTH より

　詳しい内容は添付の README.txt にも書いてあるが、とりあえず .vroid ファイルを VRoid Studio で読み込み、各衣装パーツを「新規アイテム」として保存し、キャラを着せ替えよう。この辺りがわからないなら VRoid の公式チュートリアルを見て欲しい。

　着せ替えたら、「VRMエクスポート」で .vrm として保存する。以降は Unity での作業となる。

■発光する部分だけのマスクを作る

　ここからは Unity と UniVRM (v0.79 以降) での編集となる。インストールなどは公式や過去記事にあるので参考にして欲しい。

　Unity のインストールからはじめる場合はこちらの記事を参考にして欲しい。
　また、vrm インポート/エクスポートするには UniVRM も必要なので、一緒にインポートしておこう。

・Unity のインストール
・UniVRM のインポート

1. まずは先ほど作った .vrm をメニューから「VRM0＞Import」（※バージョンによって表記が違う場合有り）でインポートしよう。保存先を聞かれるので、適当に新しいフォルダを作って指定した方が良いだろう。インポートが完了すれば、指定フォルダにプレファブができる。

2. プレファブができたら、ヒエラルキーにドラッグドロップしよう。今回は発光を確認するためにも、ライトを暗くした方がわかりやすいと思う。「Directional Light」をクリックしたら、インスペクタで「Transform＞Rotation＞X」を 0 (真っ暗にしたいなら -90)、「Light＞Intensity」を 0 にすると良い。

3. 衣装のマテリアルはおおよぞ「Body」にあてられてるので、ヒエラルキーで階層を開き、インスペクタで「～Body～」「～Shoes～」「～Tops～」「～Bottoms～」となってるものをクリックしてみよう。Project ビューでマテリアルが指し示されるので、クリックするとマテリアルの設定が表示される。

4. マテリアルの「Textrue」に割り当てられている画像がプレビューされているが、ここをクリックすると Project ビューでの画像が指し示される。ここでは光る部分（シアンのライン）を持ったテクスチャを編集したいので、「～Body～」「～Shoes～」「～Tops～」「～Bottoms～」をそれぞれクリックすると、「_10」「_12」「_13」「_14」(.png)であることがわかる。右クリックで「Show In Explorer」をするとエクスプローラが開くので、画像をクリックすると確認できるだろう。

5. 先程のシアンのラインを持ったテクスチャのマスク(エミッションマップ)を画像編集ソフト(PhotoShopやGIMPなど)で開こう。ここでは画像編集自体はテーマから外れるので割愛するが、マスクの作り方としては「光る部分を白または輝度の高い色(シアン等)」「それ以外を黒」にすることでマスク画像となる。ここでは例として「_13.png」の発光する部分のみをシアンに塗りつぶした画像を作ってみたが、「_13_mask.png」とでも名前をつけて保存しよう。同じように「_10」「_14」でもマスク画像を作って欲しいが、「_12」は元々光ってる部分しかない透過画像となってるので、その場合は必要無い。

●靴のテクスチャの一部を光らせる例 (シアン=輝度の高い部分のみが光る)

■Unity でマテリアルの発光を設定する

1. マスク画像が完成したら、元画像のあったフォルダでも良いので、「_10_mask.png」「_13_mask.png」「_14_mask.png」（※名前は任意）をエクスプローラから Project ビューにドロップなどしてコピー(インポート)しよう。Import Settings は Generate Mipmap は外し、Max Size などは元の画像の設定を見て、合わせれば良いと思う。

2. マスク画像のインポートが完了したら、それぞれのマテリアルに割り当てよう。例えば「_13_mask.png」なら靴なので「～Shoes～」となっていたマテリアルだ。クリックしてインスペクタに設定が表示されたら、「Emission」の横の小さな○をクリックして、「_13_mask.png」を選択するか、マスク画像をドラッグドロップで割り当てる。

3. 色は発光色となるので、任意で良いが、ここではわかりやすくするためシアンにしている。また Intensity(輝度の強さ) を 1 以上にしておくとわかりやすい（白の場合は輝きが強くなる傾向があるので、Intensity = 0.5 くらいでも良い）。ちなみにカラーピッカーを開き直した時、色の値と Intensity が変わってたりするが、これは Unity の仕様なので気にしなくて良い（Intensity が 1 以上になると、色の値が 191 以下で Instensity が再計算される）。

4. これを同じように「_10」「_14」でもやっていく。「_12」に関しては元が透過画像なので、Emission 横の○からデフォルトのマスク(Shader_NoneBlack：黒塗り)を外す(None にする）か、「_12」をそのままマクスとして割り当てても良い。

　すべて割り当てたら、シアンのラインだけ色が付いてるようになるだろう。設定はこれで完了だ。

5. 最後にヒエラルキーでプレファブ(VRM)のルートを選択して、メニューから「VRM0＞Export UniVRM-0.XX.X」(X はバージョン)を実行して、.vrm として再エクスポートすれば完成となる（プレファブ名がデフォルト名となる）。

　あとはエクスポートした .vrm を VRM Live Viewer (※v3.1 以降) にドロップして、[CRS FX] ステージで確かめて欲しい。発光に必要なのは「ポストエフェクト＞ブルーム」だ。これをオンにして、強さを 1 以上に上げれば、他のステージや自作ステージでも使える。パラメータの意味などはこちらを参考にして欲しい。

・ポストエフェクト - ブルーム

　今回は発光の設定を Unity でやってしまったが、考え方がわかれば、たぶん Blender でも同様のことができるだろう。その辺は未検証なので、自分で試してみて欲しい。

　また、目を光らせたいときも同じ考え方でできる。ただ、白は輝きが強くなる傾向があるので、輝度を弱めにしておいた方が良いみたいだ。また輝きはライトの強さにも影響されるので、明るい背景で使うときは輝度に注意しよう。