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

　今回は VRM Live Viewer の自作の床を作るサンプルを応用して、デモのような魔法陣の床を作ってみよう。

　光ってる部分は本来、マテリアルの Emission を使うべきなのかもだが、ここではあくまでデモと同じように、ライトをギミック的に使う方法なので、自作するときは、その部分だけ置き換えるのも良いだろう。

※VRMLiveViewer 3.1以降では Emission で発光させることもできます。発光の考え方は「VRoid の衣装を発光させる」と同じ。



　ここでは Unity 自体触ったことない人でもできるように細かく書いているので、簡単過ぎる人は、興味がある項目だけで十分だと思う。実際には以前の記事のデモ動画とやり方は同じで、少しばかり工夫しただけだったりする。なので、考え方だけわかれば、色々応用できるだろう。


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

---

■魔法陣のテクスチャを作る

　今回は一般配布されている魔法陣の素材を使わせて貰って、床を作ってみよう。配布元のデイジィ・ベル様に確認を取った所、フォントや添付素材を使って新しく作った素材なら、公開しても問題ないそうだ。とても有り難いですね。


・ルーン文字フォント セット RuneAMN Series Fonts free (BOOTH)
・フォント自体はこちらでも可 (daisybell-fonts)


1. まずは BOOTH で配布されているフリー版をダウンロードしよう。zip を解凍すると、いくつかフォルダがあるが、「extra/MagicCircle」の中に魔法陣の素材が入っている。「README_and_LICENSE.txt」に利用規約もあるので、一度目を通しておくと良いだろう。


2.「MagicCircle」フォルダ内には .svg と .ai のファイル形式（ベクタデータ）が入っているので（.jpg はサムネイル画像）、好きな方で良いが、ここでは .svg を使ってみる。使うグラフィックソフトは何でも良いが、GIMP で読み込めたので、必要ならインストールしよう。

・GIMP (画像編集ソフト)



3. GIMP の場合は、メニューから「ファイル＞開く/インポート」で .svg が開ける。デモでは「MagicCircle_RuneAMN_20141014.svg」を利用している。ここで自分で作ってみたい魔法陣を選択しても良い。開こうとすると、解像度を聞かれるので、1024x1024 にしておこう（高解像度にしたいなら、2048x2048 でも良いが、その分ファイルサイズは大きくなるので、注意）。



4. 読み込んだらそのまま編集しても良いし、他のグラフィックソフトに慣れているのなら「ファイル＞名前を付けてエクスポート」で透過のできる .png で出力してしまうのも良い（.png ならどのソフトでも読み込める）。この辺りは任意で良い。



5. 画像の加工の操作は、各グラフィックソフトによるので割愛するが、元の線の黒塗りを白塗りにして欲しい（大まかには、黒線部分を選択し、白で塗り替えれば良い）。また、それぞれの円や図形を別々に回転させるために、レイヤーとして分離しておく。ここでは「MagicCircle_RuneAMN_20141014」を３つのレイヤーに分離したが、デモに使ってる魔法陣は「MagicCircle_RuneAMN_20141019」の真ん中にある(☆)を取り出して、４つ目として、適当にリサイズして中央に置いている。



6. それぞれをレイヤーに分離したら、最後に発光してる感じを出すために、各レイヤーを複製して、「ガウスぼかし」フィルタ等(※名前はグラフィックソフトによる)を使って、ぼかした画像を重ねておく（デモの魔法陣では 4px のぼかしをかけている）。



7. ぼかしを重ねたら、それぞれの円や図形ごとに .png で保存する（この例では４つ）。「VRMLiveViewerの床(GLB) 作成サンプル」には完成した .png, .psd (レイヤー)ファイルがあるので、必要なら見て欲しい。

---

■Unity で魔法陣の床(GLBモデル)を作る

　Unity のインストールからはじめる場合はこちらの記事を参考にして欲しい。
　また、glb エクスポートするには UniVRM も必要なので、一緒にインポートしておこう。

・Unity のインストール
・UniVRM のインポート

　また、今回の魔法陣はBOOTHで配布している「VRMLiveViewerの床(GLB) 作成サンプル」もインポートしておくと簡単だ。完成版も入ってるので、覗いてわかるくらいなら、全部読む必要もないだろう。

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


1. インポートしたサンプルの「VRMLiveViewer/FloorMake/Scenes/」にある FloorMake シーンに完成した魔法陣の床（MagicCircle_RuneAMN_20141014b）が入っている。ヒエラルキーで階層を開いて貰えばわかるが、構造としては４つの Plane に先ほど作った .png をテクスチャとしてマテリアルに当ててるだけだ（テクスチャのインポートは Project ビューに .png をドロップするだけで良い）。



2. テクスチャ(.png)の設定の注意点は Import Settings で「Alpha Is Transparancy」(アルファを透明にする)をオンにし、「Generate Mip Mpas」(ミップマップ生成)をオフにしておくことだ。



3. 当てるマテリアルもサンプルを複製した方が簡単だと思うが、注意点は「Rendering Mode」は「Fade」にしておくことだ（Transparent はガラスのように透明でありながら、素材が存在する感じで、Fade は透明部分は何もないようにしたいときに使う）。Albedo に作ったテクスチャ(.png)を当てられるので、好きに変更すると良い（□部分に Project ビューからテクスチャ(.png)をドロップするか、○から選択する）。



4. 作ったマテリアルを、各 Plane の MeshRenderer にドロップすれば、Sceneビューにも反映される。今回はそれぞれの円や図形を別々に回転したいので，サンプルのように各テクスチャごとに Plane (GameObject) を作って、それぞれにマテリアルを当てよう。



5. ここまでできたら、床としては十分だが、せっかくなので、アニメーションの仕様も確認しておこう。アニメーションの注意点としては「オブジェクトのルートにアニメーションを付ける」ということだ。また現在のところ（UniVRM0.89 時点）、Transform のアニメーションのみが対応している（つまり、位置[Position]、回転[Rotation]、伸縮[Scale] の３要素となる）。他の詳しい仕様は以下を参考にして欲しい。

・アニメーション (UniVRM マニュアル)
・アニメーション背景 (バーチャルキャスト公式)


6. サンプルには「MagicCircle_loop_30s.anim」が作ってあって、これはそれぞれ「MagicCircle1～4」を交互に 30秒で 360度回転するアニメーションになっている。これもそのまま使うのが簡単だが、自分で数を増やしたり減らしたりしたいときのために、簡単な方法を教えておこう。



7. アニメーションを編集するには、アニメーションのあるルートの GameObject をヒエラルキーで選択し、[Ctrl+6] (メニューなら「Window＞Animation＞Animation」) で Animation ウィンドウを開く。不要なものは各プロパティの「－」から「Remove Propery」すれば良いが、追加したいなら「Add Property」で動かしたいプロパティを追加する。



8. 使えるのは基本的に Transform のプロパティなので、例えば、ここではその中から「Rotation」(回転)を追加しよう。仮に「MagicCircle 5」というものを作ったなら（ヒエラルキーで MagicCircle～ を選択し、[Ctrl+D] してリネームする）、初期状態では変化のないデータとなっている。「Curve」のタブを押すと平坦なので、それがよくわかる。




9. このまま「Curve」で他の「MagicCircle 3、4」などを見てもらえばわかるが、このカーブは横が時間軸で、縦が値となっている。例えば MagicCircle 3 は 時間 0秒 で 360度、30秒 で 0度まで線形に変化する。MagicCircle 4 は 時間 0秒 で 0度、30秒 で 360度だ。ただし、Unity上ではカーブを曲線にしても効くが、GLBでは直線しか効かないっぽい(?)。細かい設定方法は公式マニュアルか過去記事を見て欲しい（大雑把には、Left/Right Tangent を Broken - Linear にすると良い）。

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




10. ここで欲しいカーブを [Ctrl+A] で全選択、[Ctrl+C] でコピーしておく。そして仮の「MagicCircle 5」を開いて、[Ctrl+V] でペーストしよう。あっというまに複製で完成だ(笑)。



11. 値を編集したいなら、キーフレームをドラッグしても良いが、キーフレーム上で「右クリック＞Edit Key...」で直接値を入力しても良い（この方が正確な値を設定できる）。例えば、回転速度を速くしたいなら時間を短く、遅くしたいなら時間を長くすれば簡単だ。Animation ウィンドウの使い方は公式マニュアルを見るか、ググれば色々出てくるだろう。

・Animation ウインドウの利用法 (Unity マニュアル)
・アニメーションの使い方 (ググる)



12. あとは、glb としてエクスポートするだけだ。ヒエラルキーでルートを選択して、メニューから「UniGLTF＞Export UniGLTF-x.x.x」(x.x.x はバージョン) なので簡単だ。サンプルに入ってる素材は自由に使って貰って構わないので、色々やってみると良いだろう。




　デモでは「ライト設定集」の「20211226_Addiction_ぼやけたグリッドの床」のライト設定を使っている。適当に色相(H)を変えれば色を変えられるので、１つ作るだけで済み、ちょっとお得だ(笑)。

・VRMLiveViewer用 ライト設定集



　冒頭にも書いたが、本来マテリアルの Emission を使う方が一般的だが、こういうやり方もアリだろう。もちろん Emission 使って、いくつか色を作るのも良い（ただし、エミッシブマテリアルが効果的なのは、いくつか環境が揃ってる必要がある）。まぁ、好きにやって欲しい。

・エミッシブマテリアル






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

　最近は 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 での壁の作り方となるが、配布している「WallMake_Sample」の簡単な使い方を解説しておこう。






(※) Unity 2019.4 / UniVRM 0.66 / Windows10(x64) で確認

---

　WallMake_Sample をインポートすると、シーンとアセット、スクリプト等が入っている。サンプルシーンは「Assets/VRMLiveViewer/WallMake/Scenes/」以下にあるので、開いて欲しい。Unity バージョンは GLB エクスポートに利用する UniVRM に合わせると良いだろう（掲載時点：UniVRM 0.66 の最低バージョン Unity2018.4 以降）。
※なるべく「安定版(Latest stable version)」を利用した方が良いでしょう（安定版以外は致命的な不具合を含んでる場合があるため）。



　このシーンのカメラの位置やライトの設定は VRM Live Viewer を起動した初期の状態と同じになっている。

　シーンには原点となる「_Origin」と glb エクスポートする前のプレファブがずらりと並んでいる。キャラの代わりに Capsule も置いてあるが、標準的な身長のキャラがすっぽり入るくらいのサイズなので、テクスチャ等を壁に貼るときは、目安にするのも良いだろう。必要なら、カメラの視野角(Field of View)も 30 くらいにした方が良いかも知れない(この場合、距離などの調整も必要となる)。



　壁の色を変えるには、ヒエラルキー上のプレファブを展開し、「Plane, Plane back, Plane right」にセットされている Material の「Albedo」の色を変えれば良い。ちなみに色の名前は「HTMLカラー名」と同じになっている。実際には光源(ライト)の当たり具合で色の見え方は変わるので、あくまで目安くらいに考えて良いだろう。

・HTMLカラー名・カラーコード表

　また、それぞれの Plane にテクスチャを貼るのも良いだろう（この場合は、それぞれに Material を作成する必要がある。Albedo の横にある ○ を押してテクスチャを当てて、色は白にする）。

　自分で作成した壁を GLB エクスポートするには UniVRM もインポートしよう。

・UniVRM（一番上にある最新版の「Assets」からパッケージをダウンロードできる）
※なるべく「安定版(Latest stable version)」を利用した方が良いでしょう（安定版以外は致命的な不具合を含んでる場合があるため）。

　GLB のエクスポートの仕方は、ヒエラルキーのオブジェクトを選択して、メニューから「Export(glb)」するだけだ。

・Glbエクスポート（UniVRM マニュアル）

　ちなみに、使えるシェーダはマニュアルを参考にして欲しいが、影が欲しい場合は、Standard、影を付けたくないときは UniGLTF/UniUnlit または Unlit/Texture などを使うと良い。

・対応しているShader（UniVRM マニュアル）

　glb をエクスポートしたら、VRM Live Viewer にファイルをドロップすればロードできるので、「3Dオブジェクトの設定」で回転や位置を調整したり、「ライトの設定」で光源の方向や影の濃さ等を調整、カメラの視野角を30以下にすると(またはアプリのオマケフォルダにある「固定カメラ_近.vmd」を使う等)、より良い感じになる。

　自分で１から作るとき注意して欲しいのは、エクスポートするオブジェクトのルートは必ず原点 (0, 0, 0) にした方が良いということだ。これは回転や伸縮の基準位置となるためで、原点でない場合、使い勝手の悪いものになってしまう場合がある。原点 (0, 0, 0) に空のオブジェクトを作り、その中に配置・調整してから glb エクスポートすると、アプリ内であまり調整しないで済む。活用して貰えれば嬉しい。

　少し複雑なオブジェクトなどを作ってみたい場合は、古くなってしまったが、以下の記事を参考にしてみるのも良いだろう。

・【VRMLiveViewer】【Unity】GLBで背景モデルを自作する
・【VRMLiveViewer】【Unity】GLB で床を作る（FloorMake_Sample の解説）







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

　あくまで VRM Live Viewer での大きさや見え方の目安程度のものだが、実際に私がプリセットの床を作ったときの Unity シーンと GLB (床モデル)を用意してみた。





　ここでは FloorMake_Sample 簡単な解説を書いておこう。

(※) Unity 2019.3以降 / UniVRM 0.79 / Windows10(x64) で確認

---

　FloorMake_Sample をインポートすると、シーンとアセット、スクリプト等が入っている。サンプルシーンは「Assets/VRMLiveViewer/FloorMake/Scenes/」以下にあるので、開いて欲しい。Unity バージョンは GLB エクスポートに利用する UniVRM に合わせると良いだろう（掲載時点：UniVRM 0.61.1 の最低バージョン Unity2018.4 以降）。
※なるべく「安定版(Latest stable version)」を利用した方が良いでしょう（安定版以外は致命的な不具合を含んでる場合があるため）。



　このシーンのカメラの位置やライトの設定は VRM Live Viewer を起動した初期の状態と同じになっている。

　いくつか入っているプリセットの床の大きさの雛形も同じである。チェックの床のマスの大きさも同じだ（基本的には１マス= 1m となっている ※Unity標準）。3Dモデリングツールによっては1インチ(= 0.0254 m)になってる場合があるので注意しよう。

　また、丸い床の大きさは、CRS ステージの中央の円形の舞台の大きさと同じで、要するに「Unite In The Sky」を踊ったときにはみ出ない大きさになっている（※平均的な身長の場合＝足が長いモデルほど大きく動くので注意）。ただアプリでは「3Dオブジェクトの配置」でスケール調整できるので、おおよその大きさでも良いだろう。

　シーンには原点となる「_Origin」と 四角い床、丸い床（表面が丸みがあるのとフラットなもの）、チェック柄の平面が入っている。これらも実際にアプリで使われているものと基本的に同じだ（透明なマテリアルや色違いのテクスチャにしている）。



　回転に関しては、通常ゲーム等では進行方向を正、背中の方向を負になってるので、視線(カメラ)は前進方向を向いている。そのため、背景は自分に向かってる場合が多い（180度回転）。しかし、VRM Live Viewer では、キャラに向かってカメラが置かれてるので（つまり、正面から背面へ方向= 180度）、背景はキャラの向きと同じにすると良い（キャラの背に背景を置く場合= 0度）。これも「3Dオブジェクトの配置」で回転できるので、0度か180度にしておけば、使いやすいだろう。


　GLB エクスポートするには UniVRM もインポートしよう。この中には、GLB で使えるシェーダも入っている。

・UniVRM（一番上にある最新版の「Assets」からパッケージをダウンロードできる）
※なるべく「安定版(Latest stable version)」を利用した方が良いでしょう（安定版以外は致命的な不具合を含んでる場合があるため）。



　GLB のエクスポートの仕方は、ヒエラルキーのオブジェクトを選択して、メニューから「Export」するだけだ。



　もし、少し試したいなら、ヒエラルキーのオブジェクトを適当に複製（Ctrl+D）して、マテリアルやテクスチャ、シェーダを編集してエクスポートしてみると良い。


　ちなみに、使えるシェーダはマニュアルを参考にして欲しいが、影が欲しい場合は、Standard、影を付けたくないときは UniGLTF/UniUnlit または Unlit/Texture(※最新版では削除されてます) などを使うと良い。

・対応しているShader（UniVRM マニュアル）

　glb をエクスポートしたら、VRM Live Viewer にファイルをドロップすればロードできるので、「3Dオブジェクトの設定」で回転や大きさを調整すると良い。

　注意して欲しいのは、エクスポートするオブジェクトのルートは必ず原点 (0, 0, 0) にした方が良いということだ。これは回転や伸縮の基準位置となるためで、原点でない場合、使い勝手の悪いものになってしまう場合がある。また、床は通常、キャラの足がめり込まないように、オブジェクトは Y 軸で 0 より下にあった方が良いだろう。このサンプルシーンではそんな感じで作られている。既に作られているオブジェクト(fbx 等)を使うときは、これらサンプルを基準にして、原点 (0, 0, 0) に空のオブジェクトを作り、その中に配置・調整してから glb エクスポートすると、アプリ内であまり調整しないで済む。活用して貰えれば嬉しい。


　少し工夫すれば、サンプルの素材を応用して、以下のような魔法陣の床なども作れる。

・魔法陣の床を作る



　もっと複雑なオブジェクトなどを作ってみたい場合は、古くなってしまったが、以下の記事を参考にしてみるのも良いだろう（基本は変わらない）。

・GLBで背景モデルを自作する








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

　本来なら 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 の衣装を発光させる