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

2022/03/20 Sun [edit]

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

　ちなみにマテリアルの発光(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 でも同様のことができるだろう。その辺は未検証なので、自分で試してみて欲しい。

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