ヽ｜∵｜ゝ(Fantom) の 開発blog？

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

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

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

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

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



(※) 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) 作成サンプル





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用 ライト設定集





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

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






（関連記事）
【VRMLiveViewer】背景をカスタマイズする (チュートリアル)
【VRMLiveViewer】GLBで背景モデルを自作する
【VRMLiveViewer】背景GLTFの設定リスト(使用例)
【VRMLiveViewer】GLBで床を作る（FloorMake_Sample の解説）
【VRMLiveViewer】GLBで壁を作る（WallMake_Sample の解説）
【VRMLiveViewer】魔法陣の床を作る
【VRMLiveViewer】VRoid の衣装を発光させる
【VRMLiveViewer】PVキットを使ってハイクオリティなPV/MV体験をする (チュートリアル)
【VRMLiveViewer】VRM（VRoid）をライブステージで踊らせるアプリを作ってみた

　本来なら VRM Live Viewer やその他の VRM アプリでの 3D背景モデルの利用は、Unity でスケール等倍で作られることが多い GLB 形式を利用する方が簡単なのだが、なかなか一般的に配布される機会が少ないようなので、主に海外で配布されることの多い GLTF 形式の3Dモデルの設定のリストを代わりに載せておこう。

　これらは私が Twitter上のデモやスクショで実際に使用していた設定だ。ただし、キャラの身長やモーションの動き回る範囲などの関係で、その都度位置(Position)など再調整していることも多い。なので、その辺りは自由にやって欲しい。

　また、シェーダを変えて影が落ちるようにしたり、モデルを原点配置にする方法は別ページに詳しく書いたので、参考にして欲しい。

・GLTF モデルを影が落ちるように修正して、アプリで利用する


(※) VRM Live Viewer 1.16以降 / Windows10(x64) で確認

---

■Sketchfab について

　Sketchfab とは海外の 3Dモデル共有プラットフォームである。配布形式は「Original format」で fbx や blend など色々な形式があるが、「Autoconverted format (gltf)」では GLTF に自動変換されたものがあるので、こちらをダウンロードすれば、VRM Live Viewer で直接読み込める。
※ただし、ものによっては上手く読み込めず、テクスチャが真っ白になったりするので、その場合は一旦諦めて下さい（Unity や Blender が扱えるなら、Original または、GLTF を UniVRM でシェーダ/マテリアルを再設定すれば、いけるかもですが…）



　Unity が扱えるなら、「Original format」の fbx などを落として、GLB に変換して扱う（スケールや回転を自分好みにしてしまう）方が簡単なこともあるが（または、UniVRM が入ってるプロジェクトに GLTF をドロップして、編集 → GLB出力）、ここではデモで使った設定ファイル（json）を掲載しておくので、3Dモデルを読み込んだ後に、適用して欲しい（解凍した .gltf と DLした .json をアプリにドラッグドロップするのが簡単）。
※v1.27 以降では zip のままロードすることもできますが、ものによってはテクスチャが上手く適用されない場合があります（？画像になる）。

　キャラの身長などによって、位置などは各自で微調整した方が良いかもだが、調整した値は「シーン」として保存しておくと、いつでも再現できるので簡単だ。また設定自体は各素材ごとに記憶されているので（設定パネルの「FileName」ごとに保存）、２回目以降は最後の設定値から編集できるようになる（シーンをロードした場合は各シーンに保存されている値が反映される）。

---

■背景GLTFの設定リスト

※設定ファイルは右クリックで「名前を付けてリンク先を保存」し、背景モデルをロードした後に、ドラッグドロップなどして適用して下さい。
※初回ロードでは、設定を適用するまで、スケールが大き過ぎて見えないことがあります。
※キャラの身長や、使っているモーションなどによって、位置などは再調整した方が良い場合があります。
※影や光源色の影響を受けるようにしたいときは、シェーダを Unlit 系→ Standard 系(Unity での場合)に変更する必要があります。Standard に変更したときは、機械的にマテリアルをインスペクタで「Metalic: 0.5, Smoothness: 0」に設定すると簡単です。素材の反射具合などを細かく調整したいときは、マテリアルチャートを参考に値を決めると良いでしょう。
※リンク切れになってしまった場合は、ご了承下さい。
※リストは追加・変更・削除される場合があります。
※Android ではメモリが足りなくなる場合が多いので、注意して下さい。

　基本的に利用ライセンスは CC (クリエイティブ・コモンズ)のものをピックアップしてます。
　ランセンスの詳しい内容を知りたい場合は以下の資料等を参照して下さい。ほとんどの場合、そのまま使うのであれば、著作者・ライセンス表示だけで比較的自由に使えるライセンスです。「改変禁止」が提示されてなければ、手を加えて利用しても問題ありません。

・クリエイティブ・コモンズ・ライセンスとは
・FAQ　よくある質問と回答


●Portal (First experiment)


Model: Portal (First experiment)
Author: shindiego.ds
License: CC BY
設定ファイル: portal_first_experiment_scene.json (右クリックで名前を付けてリンク先を保存)
＞＞ デモ・スクショ等


●Portal (Night version)


Model: Portal (Night version)
Author: shindiego.ds
License: CC BY
設定ファイル: portal_night_version_scene.json (右クリックで名前を付けてリンク先を保存)
※基本的には Portal (First experiment) と同じ
＞＞ デモ・スクショ等


●Imitation classroom stage (Fun made)


Model: Imitation classroom stage
Author: NewDOF
License: CC BY
設定ファイル: imitation_classroom_stage_scene.json (右クリックで名前を付けてリンク先を保存)
＞＞ デモ・スクショ等


●Tropical Island


Model: Tropical Island
Author: Elin
License: CC BY
設定ファイル: tropical_island_scene.json (右クリックで名前を付けてリンク先を保存)
＞＞ デモ・スクショ等


●Beat Saber Menu (Fun made)


Model: Beat Saber Menu
Author: Elin
License: CC BY-SA
設定:「3Dオブジェクトの配置」で 180度回転のみ
＞＞ デモ・スクショ等


●imperial star destroyer hangar (fake 3D test)


Model: imperial star destroyer hangar (fake 3D test)
Author: Elin
License: CC BY
設定:「3Dオブジェクトの配置」で 180度回転のみ
＞＞ デモ・スクショ等


●Winter Loft


Model: Winter Loft
Author: Elin
License: CC BY
設定:「3Dオブジェクトの配置」で 180度回転のみ
＞＞ デモ・スクショ等


●Brutalist Loft


Model: Brutalist Loft
Author: Elin
License: CC BY
設定:「3Dオブジェクトの配置」で 180度回転のみ
＞＞ デモ・スクショ等
※デモでは床のシェーダを Unlit → Standard (Metalic: 0.5, Smoothness: 0) に変更しています。


●Jedi Council (baked)


Model: Winter Loft
Author: Elin
License: CC BY
設定:「3Dオブジェクトの配置」で 180度回転のみ
＞＞ デモ・スクショ等
※デモではシェーダを Unlit → Standard (Metalic: 0.5, Smoothness: 0) に変更し、空のドームを 20度回転して 1/4 にリサイズして ます（1000mを超えたものはクリッピングされるため）。
→ シェーダの変更のやり方はこちら


●Matrix Void


Model: Matrix Void
Author: Elin
License: CC BY
＞＞ デモ・スクショ等
※デモではワイヤー状の床と、外壁のシェーダを Unlit → Standard に変更し、いくつかのオブジェとキャラの手前となる柱(カメラが引かれたときに、邪魔となる柱)を削除してます。
→ シェーダの変更のやり方はこちら
※また、ライトをキャラ照明を独立化し、外壁に向けて強めの光を当てて、発光してるように見せています。


●VR Alien Forest


Model: VR Alien Forest
Author: FDU_oficial
License: CC BY
設定ファイル: vr_alien_forest_with_download_scene.json (右クリックで名前を付けてリンク先を保存)
＞＞ デモ・スクショ等
※かなり重いので、Android では落ちる可能性があります。


●Positano Cityscene


Model: Positano Cityscene
Author: Mathis Nowak
License: CC BY-NC
設定ファイル: positano_cityscene_scene.json (右クリックで名前を付けてリンク先を保存)
＞＞ デモ・スクショ等
※かなり重いので、Android では落ちる可能性があります。


●3d Video Mapping Stage


Model: 3d Video Mapping Stage
Author: danartri
License: CC BY
設定ファイル: 3d_video_mapping_stage_scene.json (右クリックで名前を付けてリンク先を保存)
＞＞ デモ・スクショ等


●Rai Stageindoor


Model: Rai Stageindoor
Author: danartri
License: CC BY
設定ファイル: rai_stageindoor_scene.json (右クリックで名前を付けてリンク先を保存)
＞＞ デモ・スクショ等


●Endless Floor VR


Model: Endless Floor VR
Author: CG Daniel Glebinski
License: CC BY
設定ファイル: endless_floor_vr_scene.json (右クリックで名前を付けてリンク先を保存)
＞＞ デモ・スクショ等


●Japanese Room


Model: Japanese Room
Author: Hedgehog Boo
License: CC BY
設定ファイル: japanese_room_scene.json (右クリックで名前を付けてリンク先を保存)
＞＞ デモ・スクショ等


●Fantasy Game Inn


Model: Fantasy Game Inn
Author: pepedrago
License: CC BY
設定ファイル: fantasy_game_inn_scene.json (右クリックで名前を付けてリンク先を保存)
＞＞ デモ・スクショ等


●Groff_Pool_01


Model: Groff_Pool_01
Author: gomelchuck
License: CC BY
設定ファイル: groff_pool_01_scene.json (右クリックで名前を付けてリンク先を保存)
＞＞ デモ・スクショ等


●Floating Island of the Potion Brewer


Model: Floating Island of the Potion Brewer
Author: vilmariina
License: CC BY
設定ファイル: floating_island_of_the_potion_brewer_scene.json (右クリックで名前を付けてリンク先を保存)
＞＞ デモ・スクショ等


●The Charterhouse Chapel


Model: The Charterhouse Chapel
Author: artfletch
License: CC BY
設定ファイル: the_charterhouse_chapel_scene.json (右クリックで名前を付けてリンク先を保存)
＞＞ デモ・スクショ等


●Leake Street Graffiti Tunnel


Model: Leake Street Graffiti Tunnel
Author: artfletch
License: CC BY
設定ファイル: leake_street_graffiti_tunnel.json (右クリックで名前を付けてリンク先を保存)
＞＞ デモ・スクショ等


●Southbank Undercroft Skatepark


Model: Southbank Undercroft Skatepark
Author: artfletch
License: CC BY
設定ファイル: southbank_undercroft_skatepark.json (右クリックで名前を付けてリンク先を保存)
＞＞ デモ・スクショ等
※デモでは一部のシェーダ(キャラが踊っている場所の床)を Unlit → Standard (Metalic: 0.5, Smoothness: 0) に変更しています → 詳しいやり方はこちら


●Runcie Court


Model: Runcie Court
Author: Blayne Jackson
License: CC BY
設定ファイル: runcie_court_scene.json (右クリックで名前を付けてリンク先を保存)
＞＞ デモ・スクショ等
※デモではシェーダを Unlit → Standard (Metalic: 0.5, Smoothness: 0) に変更しています → 詳しいやり方はこちら


●K/DA: Evelynn Dance Stage MoonLight Edition


Model: K/DA: Evelynn Dance Stage MoonLight Edition
Author: AnixMoon
License: CC BY
設定ファイル: kda_evelynn_dance_stage_moonlight_edition.json (右クリックで名前を付けてリンク先を保存)
＞＞ デモ・スクショ等
※v3.1以降ならモデルは zip のままロード可






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