【VRMLiveViewer】ツールを使って、VRoid の衣装を発光させる

2023/05/31 Wed [edit]

　約1年2ヶ月前に Unity で「VRoid の衣装を発光させる」方法を書いたが、120 さんが発光設定できるツールを公開してくれたので、「Unity を使わずに、発光設定できるか？」を試してみた。

・VRMの光物設定するやつ (BOOTH - 120byte)

　結論を先に言うと「Unity 無しでも発光設定はできる」ことがわかった。ただ VRoid はデフォルトで発光設定が無効になっていて（テクスチャに黒塗りのマスク「Shader_NoneBlack.png」が当てられてるため、光らない）、これを入れ替えないといけないので、もう１つツールを使って、そのやり方も伝授しておこう。考え方自体は以前と同じなので、ここでは簡単な手順だけ書いておくことにする。

■発光させるテクスチャをVRMから取り出す
■衣装の一部だけを発光させるマスク(エミッションマップ)を作る
■ツール(VRM Emission Editor)に読み込んで発光設定をする
■VRMLiveViewer に読み込んで発光させる

(※) VRM Emission Editor 20230528 / VRMLiveViewer 3.7.1 / Windows11(x64) で確認

■発光させるテクスチャをVRMから取り出す

　ここでは、発光させる VRoid は何でも良いが、以前私が Unity で発光設定したことある「CLCT for FUTURE」を例に、今回はツールだけで発光設定をやってみよう。VRoid Studio のプリセットに入っているので、適当なモデルに着させて、VRM エクスポートして欲しい。

　前述したが、VRoid の場合は、デフォルトでは黒塗りのマスク(Shader_NoneBlack.png)が当てられていて、そのままでは光らない。なので、ここでも 120 さんのツールを使わせて貰い、VRM からテクスチャを取り出そう。それを元に後述でマスクを作ることになる。「VRMテクスチャ差し替えるやつ」(VRM TextureReplacer)をダウンロードしよう。

●BOOTH - 120byte より

・VRMテクスチャ差し替えるやつ

　ダウンロードしたら「VRM_TextureReplacer.exe」を起動して欲しい。起動したら「CLCT for FUTURE」を着せた VRM をツールにドロップしよう。このツールはモデルに設定されてるテクスチャを入れ替えるツールで、衣装の色を変えるとき等に便利だが、単に「Export」すれば、テクスチャを取り出すことができる。

　取り出すテクスチャは任意で良いが、要するに光らせたい部分があるテクスチャを右側の一覧から選んで、「Export」を押すだけだ。ここでは「N00_000_00_EyeIris_00_EYE」(目)、「N00_007_03_Tops_01_CLOTH_01」(トップス)、「N00_001_02_Bottoms_01_CLOTH」(ボトムス)、「N00_008_01_Shoes_01_CLOTH_02」(靴) 等、色々取り出してほしいが、テストするだけなら、とりあえず一番目立つ部分だけでも良いだろう(「目」などが簡単)。

●光らせたい部分があるテクスチャを [Export] する

■衣装の一部だけを発光させるマスク(エミッションマップ)を作る

　マスク(エミッションマップ)の作り方は以前書いた方法と同じだ。「光る部分を白または輝度の高い色(シアン等)」「それ以外を黒」にすることでマスク画像となる。PhotoShop や GIMP などを用いて、光らせたい部分だけを残し、他は黒で塗って欲しい。なお、透過してる部分も光らないので、「N00_000_00_EyeIris_00_EYE」(目) 等はそのままマスクに使っても良い(もちろん、目以外を黒塗りしても良い)。画像加工自体はテーマから外れるので、それぞれの画像編集ソフトのヘルプを見て、マスク画像を作って欲しい。以下はあくまで例となる。

●光らせたい部分と、光らない部分(黒)のマスク(エミッションマップ)の例

■ツール(VRM Emission Editor)に読み込んで発光設定をする

　マスク(エミッションマップ)ができたら、発光設定をしてみよう。ここでは今回メインの「VRMの光物設定するやつ」(VRM Emission Editor) を使う。ダウンロードしたら、「VRM_EmissionEditor.exe」を起動し、発光させたいモデルをドロップしよう。

●BOOTH - 120byte より

・VRMの光物設定するやつ

　モデルを「VRMの光物設定するやつ」に読み込んだら、右上のドロップダウンから、モデルに当てられているテクスチャの名前が選択できるようになる。ここでは目を光らせてみるとして「N00_000_00_EyeIris_00_EYE」を選択しよう。また「エミッションマップの読み込み」から、先ほど作ったマスク(エミッションマップ)で同名のものを読み込もう。

　デフォルト状態では光ってるのが確認しずらいかも知れない。その場合は、左上にある「Light」(ライト)を下げると良い。真っ暗にして、RGBと「光の強さ」を適当に上げれば、光ってるのが確認できると思う。

　あとはやり方は同じだ。対応する部位とマスク(エミッションマップ)を次々読み込んでいって、発光設定をすれば良い。全てが完了したら右下にある「VRM書き出し」からモデルを再エクスポートしよう。

■VRMLiveViewer に読み込んで発光させる

　発光設定したモデルを VRMLiveViewer で読み込んでみよう。ここでも背景が明るいと光っているのが確認しずらいので、Floor(床) や Sky(空) を無し(None) にしよう。またメインライトも太陽のアイコンを右クリックで消せるので、とりま真っ暗にすれば、発光設定した部分だけが色が付いてるのがわかる。綺麗に発光させるには「ポストエフェクト＞ブルーム」をオンにしよう。

　発光自体の強弱を調整するには「キャラクターのオプション＞MToon発光の設定」で調整できる。とりあえず簡単なのは [発光の補正] でスライダーを動かしてみることだ。ライトや他のエフェクトでも輝きの強さは影響受けるので、その都度設定すると良いだろう。

　ちなみに VRMLiveViewer では [発光モード] の設定により、点滅やランダム発光など、複雑な発光もできる。上手くやれば、派手な、サイバーな演出もできると思うので、挑戦してみて欲しい。

VRMの発光モードも解説。基本的にオブジェクトの発光モードと同じだが、VRMにはマテリアルごとに発光モードに含む/除外設定ができる。また除外マテリアルの発光補正もできるので、目は固定のようにもできる。しきい値は以前やった通り操作対象外。設定次第で結構光り方を変えられるよ。#VRMLiveViewer pic.twitter.com/v1T8bP5FLo
— ヽ｜∵｜ゝ(Fantom)@VRMLiveViewer (@fantom_1x) March 3, 2023

※クレジット・素材の詳細はツイートのリプ欄参照

発光できるキャラを見つけたので4人で踊ってみる。うむ眩しい(笑)。発光モードはアプリの機能だが、発光自体はVRMの仕様なので、もっとあるかと思ったが意外と少ないんだね。Hub連携でそのまま使えるのも確認できたし、アプリだけでここまでできれば良し✨#Yelsfstudio #VMDTMS #VRoid #VRMLiveViewer pic.twitter.com/RaDffc5G8c
— ヽ｜∵｜ゝ(Fantom)@VRMLiveViewer (@fantom_1x) March 18, 2023