【VRMLiveViewer】GLTF モデルに影が付くように修正して、アプリで利用する

2021/12/23 Thu [edit]

　最近は VRM Live Viewer で直接使える背景3Dモデルも増えてきてとても嬉しいね。しかもスケール等倍で、光源の影響も受けられるようになってるものが多く、非常に使いやすい。

　なので、今後はレガシーな方法となってしまうかも知れないが、逆に以前から使っていた GLTF でも同じように影や光源色を反映したいと思うこともあるだろう。

　今回はその方法を Unity を使ってやってみよう。おおまかには「シェーダを Unlit → Standard に変える」という内容なので、知っている人にはなんてことないものだ。

　例としては、以前デモでやった「ONE OFF MIND」の背景と同じものを用いてやってみる。ライトの設定も BOOTH で配布してるので、それも使って最終的にはデモと全く同じ背景を作ってみよう。

　ここでは Unity 自体触ったことない人でもできるように、と考えているので、簡単過ぎる人は、興味がある項目だけで十分だろう。

今は3Dモデルも溢れるようになったが、3年前はスキルある人限定で、#VRoid 出た時には「あ、時代が変わる」って見えたんだよね。なぜなら可能性は掛け算なので、１つの要素で何倍にもなるから。1.0テイストも同じ。「誰でもできる」は凄いこと。今ならこの映像誰でも作れるからね(笑)。#VRMLiveViewer https://t.co/Q6UqsSA4iJ pic.twitter.com/OlyKJTRhYz
— ヽ｜∵｜ゝ(Fantom)@VRMLiveViewer (@fantom_1x) November 27, 2021

♪ONE OFF MIND
モーション：yurie 様 [ニコ動]
振付：しょま様 [ニコ動]
楽曲：VAN DE SHOP 様 (配布wav) [ニコ動]
カメラ：StarFire-DKY 様 [Youtube]

■Unity のインストール
■UniVRM のインポート
■GLTF モデルを UniVRM でインポートする
■GLBモデル(エクスポート後のモデル)を原点配置にしておく
■GLBモデルとしてエクスポートし、アプリで使ってみる

(※) Unity 2020.3.21f1 / Windows11(x64) / UniVRM 0.89 で確認

■Unity のインストール

　ここでは Unity を使って、シェーダを変える方法なので、まずは Unity をインストールしよう。

　といっても、やり方は公式にも掲載されているので、手順はそちらを参照して欲しい。簡単には UnityHub をインストールし、UnityHub 内で、それぞれの Unity バージョンをインストールするだけだ。かなりの時間がかかるので、先んじてやっておいた方が良いだろう。

・初めてUnityをインストールする手順について (公式マニュアル)
・unity インストール手順 (ググる)

　ちなみに、VRM Live Viewer で使われている Unity バージョンを調べるには「ヘルプ([？]ボタン)＞クレジット」で見ることができる。同じバージョンか、それ以上の方が良い。

■UniVRM のインポート

1. Unity(Hub) をインストールしたら、UnityHub を起動して「新規作成」から、新しいプロジェクトを作ろう。名前は何でも良い。テンプレートは「3D」で良いだろう。

2. 空のプロジェクトが開いたら、次に UniVRM をインポートしよう。PackageManager からインポートする方法もあるが、ここでは簡単に .unitypackage をダウンロードして、インポートしても良い。「Assets」に「UniVRM-0.x.x_xxxx.unitypakage」(0.x.x にはバージョンが入る)があるので、ダウンロードしよう。

・UniVRM

　これも VRM Live Viewer に合わせるなら、「ヘルプ([？]ボタン)＞クレジット」で見ると良い。

3. 古いバージョンでは「UniVRM_Samples-0.x.x_xxx.unitypackage」も必要だったが、最近(2021/12 時点)では、前述した「UniVRM-0.x.x_xxxx.unitypakage」だけをインポートすれば良い。unitypakage のインポートにはエクスプローラから、ドラッグ＆ドロップで Unity のプロジェクトビュー(Projectタブ)インポートするのが簡単だ。

4. インポートしたら「Recommended project settings for UniGLTF/UniVRM」のダイアログが出る場合がある。これはプロジェクトの推奨設定で、例えば「ガンマカラースペース→リニアカラースペースに変更」してくれるものだ。「Accept All」すれば、UniVRM を使うのに最適な設定にしてくれる。

■GLTF モデルを UniVRM でインポートする

　ここでは「ONE OFF MIND」で使った「Runcie Court」モデルを例に、UniVRM で Unity にインポートしてみよう。

・Runcie Court / Author: Blayne Jackson [CC-BY]

1. Sketchfab（初回はアカウント登録が必要[※無料]）では「Download 3D Model」から「Autoconverted format(glTF)」の「DOWNLOAD」ボタンからダウンロードできる。このモデルは CC-BY で著作者とライセンス表示だけしておけば、比較的自由に使えるモデルだ。改変利用しても問題ない。ライセンスは各モデルの「License」に表示/リンクがあるので、確認しておこう。

2. ダウンロードしたら、zip を解凍し、Unity のプロジェクト内に適当にフォルダ作って、フォルダごとドラッグ＆ドロップしよう（Project ビューで右クリック＞Create＞Folder）。

※UniVRM0.66 以前なら、Unity のメニューから「UniGLTF＞Import(gltf,glb)」から、解凍したフォルダにある「～.gltf」(scene.gltf)を選択すれば、プロジェクト内のインポート先を聞かれるので、適当なフォルダにインポートすると良い（※なぜか最新のバージョンではエラーとなる）。

3. インポートしたらプレファブ（scene）が生成されるので、それをヒエラルキー(Hierarchy)にドロップして配置しよう。展開してマテリアルを見てみるとわかるが（ヒエラルキーで一番上の mesh_out_node_texture_material_0 をクリック＞インスペクタ(Inspector)で MeshRenderer の Material(▼で表示) で texture_material をクリック＞Projectビューで texture_material をクリック）、このモデルは「UniGLTF/UniUnlit」に設定されている。Unlit と付くものは、テクスチャをそのまま表示するシェーダで、影や光源色が付かないものと考えて良い。

4. インポートしたままだと編集できないので、前述の texture_material を Projectビューで選択したら、[Ctrl+D](Duplicate)で複製しよう。複製された texture_material を選択したら、インスペクタの「Shader」が有効化されているので「UniGLTF/UniUnlit」から「Standard」に変更する。ちなみに UniVRM がサポートしているシェーダは以下を参照して欲しいが、最近では UniUnlit (影が付かない) と Standard (影が付く) の２択と考えて良いだろう。

・Material (UniVRM マニュアル)

5. Standard にシェーダを変更したら、ここではインスペクタで「Metalic: 0.5. Smoothness: 0」にしておこう。この値は素材を表現する上で任意で良い。詳しくは Unityマニュアルの「マテリアルチャート」などを参考にすると良い。私の場合、床などの場合にはデフォルトのまま「Metalic: 0. Smoothness: 0.5」、建物などの場合は「Metalic: 0.5. Smoothness: 0」にしてることが多い。光沢の感じを変えたいときは、0.1 ずつ変更して、適当にやってみると良い（実際にアプリで見てみないとわからないので、マテリアルを複製して何パターンか作るのも良い。※Unity のデフォルトでは光源色が太陽光(#FFF4D6)となっているので、真っ白(#FFFFFF)にした方がアプリに近くなる）。

・VRMLiveViewerの床(GLB) 作成サンプル

マテリアルチャート (出典：Unity公式マニュアル)

6. 今回の Runcie Court ではマテリアルが１つなので、ヒエラルキーで MeshRenderer があるものを全選択 (Shift 押しながら、一番上と一番下を順に選択）したら、先ほど Standard シェーダに変えた texture_material を、インスペクタの MeshRenderer の Matarials にセットしよう。ドラッグ＆ドロップでできる。

　ここまでできたら、Sceneビューでも影が出ている(光源の影響を受けている)のがわかる。

　このまま、モデルのルートを選択して、GLB エクスポートすれば、VRM Live Viewer でも影付きで使えるが、せっかくなのでもう一歩、配置が楽になるように工夫しておこう。

■GLBモデル(エクスポート後のモデル)を原点配置にしておく

　3Dビューで見てる分にはわかりにくいが、今回の Runcie Court モデルは Scene ビューで上空から見ると（方向のギズモのYを押し、真ん中の■を押す）と斜め方向になってるのがわかる。

　また、Cube（立方体：ヒエラルキーで右クリック＞3DObject＞Cube で生成）を原点の真上に置いてみると、モデル自体がかなり上にあることがわかる。

　アプリでは「3Dオブジェクトの配置 (3D Object Transform)」でも調整できるが、ここでは配置データ(.json)を利用して、予め原点に移動しておくことにより、アプリで簡単に使うことができるようになる（このモデルは等倍で良いが、大きすぎたり、小さすぎたりするモデルはスケール(Scale)も調整しておくと良い）。

1. 以下のページに runcie_court_scene.json のリンクがあるので「右クリック＞名前を付けて保存」して、.jsonファイルをメモ帳などで開いてみよう。面倒ならリンクをクリックすれば、ただのテキストファイルなので、ブラウザでも見れる（※ブラウザの設定にもよる）。

・Runcie Court の配置データ (runcie_court_scene.json)

2. 中身を見てみると、「position":{"x":-0.7599999904632568,"y":-4.980000019073486,"z":0.0」「rotation":{"x":0.0,"y":165.64999389648438,"z":0.0」となっているが、これは Unity での Transform の設定そのままである。なので、モデルのルート(scene)を選択し、インスペクタの Transform の Position に「X: -0.7599999904632568, Y: -4.980000019073486, (Z: 0)」、Rotation に「(X: 0), Y: 165.64999389648438, (Z: 0)」をコピペしよう（小数点以下はまるめられたるするが、気にしなくて良い）。先ほど置いた Cube が地面に置かれてる感じになり、角度も垂直方向になっているのがわかる。

3. GLB としてエクスポートするには原点配置（Position: (0,0,0), Rotation: (0,0,0), Scale (1,1,1)）にする必要があるので、ここで空の GameObject を作ろう（ヒエラルキーで右クリック＞Create Empty）。Position が移動してたら (0,0,0) に修正し、名前も適当に付けておこう（ここでは「runcie_court」としている※そのまま .glb ファイル名となる）。作ったら GameObject(runcie_court) にモデルのルート(scene)をドラッグ＆ドロップして、子要素にしてしまえば、原点配置の完了だ。
※アニメーションが含まれている場合、仕様としてルートにアタッチする必要があります。詳しくは公式マニュアルか過去記事を参照して下さい。

・アニメーション (UniVRM マニュアル)
・GLBで背景モデルを自作する - アニメーションをする (過去記事)

■GLBモデルとしてエクスポートし、アプリで使ってみる

　すべてが完了したら、ヒエラルキーで先ほど作った新しいルート（原点配置したもの：runcie_court）を選択し、メニューから GLB としてエクスポートしてみよう。UniVRM のバージョンによって、微妙に表記は異なるが、おおよそメニューは「UniGLTF＞Export UniGLTF-x.x.x」となっている。

　エクスポートした glb をアプリにドロップすればロードできる。せっかくなので「ライト設定集」で光源色を変えてみよう。ダウンロードした zip を解凍したら「20211127_ONE_OFF_MIND」フォルダに「light_ONE_OFF_MIND_runcie_court_dawn.json」(夕)、「light_ONE_OFF_MIND_runcie_court_night.json」(夜) が入っている。これをアプリにドロップすれば、すぐに適用される。空(そら)も「朝/夕焼け」や「夜空」「ファンタジー夜」等にすれば効果的だ。

・VRMLiveViewer用ライト設定集

●～_dawn.json (夕) 適用

●～_night.json (夜) 適用

●Jedi Council モデルでも同じようにシェーダを Standard に変え、
スカイドームのスケールを小さく編集している（1000mを超えたものはクリッピングされるため）

♪[A]ddiction ：モーション：hino様 / 振付：足太ぺんた様

　まぁ、たぶん Blender などでも同じようなことはできるとは思うが、UniVRM は Unity 製なので（Unity 製は頭に Uni- を付けることが多い）、値がそのまま使えたり、余計な変換が入らないメリットがある（Blender だとスケールとか、カラースペースとか、シェーダとか、色々合わせる必要がある）。

　これくらいの編集なら簡単だし、１度やれば理解もできるだろう。せっかく無料でできるので、これを使わない手はない(笑)（私は適宜どちらも使うが、やってることはとても簡単なことばかりである＝ほんのちょっとの手間で見違えるほどの映像になる）。