fc2ブログ
ヽ|∵|ゝ(Fantom) の 開発blog? ホーム »VRoidStudio
このページの記事一覧

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


 あくまで現時点の 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~) を利用させて貰い、その方法を学習しよう。

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

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

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

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


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

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


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



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

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



 詳しい内容は添付の 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 でも同様のことができるだろう。その辺は未検証なので、自分で試してみて欲しい。

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









(関連記事)
【VRMLiveViewer】ツールを使って、VRoid の衣装を発光させる
【VRMLiveViewer】VRM(VRoid)をライブステージで踊らせるアプリを作ってみた
【VRMLiveViewer】魔法陣の床を作る
【VRMLiveViewer】GLTF モデルに影が付くように修正して、アプリで利用する
【VRMLiveViewer】GLBで背景モデルを自作する
【VRMLiveViewer】GLBで床を作る(FloorMake_Sample の解説)
【VRMLiveViewer】GLBで壁を作る(WallMake_Sample の解説)
【VRMLiveViewer】背景GLTFの設定リスト(使用例)


関連記事
スポンサーサイト



category: VRMLiveViewer公式ドキュメント

thread: ソフトウェア開発

janre: コンピュータ

tag: VRMLiveViewer  VRoid  VRoidStudio  Unityリファレンス 
tb: 0   cm: --


プロフィール

Social

検索フォーム

全記事一覧

カテゴリ

ユーザータグ

最新記事

リンク

PR

▲ Pagetop