ヽ｜∵｜ゝ(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 での壁の作り方となるが、配布している「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 で背景を自作したい人のために、GLB を使った簡単な素材作成法を書いておこう。これは実際にデモで使った素材の作り方そのものなので、同じようにやれば、そっくりそのままの背景モデルを作ることもできるだろう。



　GLB は汎用的な3Dモデルフォーマット GLTF と内部的に同じフォーマットである。簡単に言えば GLTF のアーカイブ方式が GLB と考えても良い。専用フォーマットではないため、VRM Live Viewer とは関係なく、色々なもので使える利点がある（例えば、Windows10のペイント3Dでも読み込める）。最近では「Vキャス背景」などにも大量にアップロードされているように、割と誰でも作れることもわかるだろう。

　実の所、VRM も GLB と同じ GLTF を拡張したフォーマットだったりする。なので、.vrm を .glb に拡張子を変えるだけで使えるものもある。

　幸いにも Unity では UniVRM というオープンソースライブラリも無料で提供されているので、それを使えば誰でも簡単に GLB ファイルも作れる。公式にも GLB の説明は書いてあるので、一読しておくと良いだろう。今回はそれを実際にやってみたという内容だ。自作するときの参考にでもして貰えると嬉しい。

・glbファイルの作り方

※他者の素材を利用した場合は、あくまで学習用途に限定しておき、配布などはしない方が良いでしょう。
（※別途、ライセンス等を確認した上ではその限りではありません）


(※) Unity 2018.4.0f1 / UniVRM 0.51.0 / Windows10(x64) で確認

---

■UniVRM のインポート

　今回は最終的に GLB でファイルを出力するために UniVRM というライブラリを利用しよう。Release ページへ行って、.unitypackage をダウンロードしよう。ここでは「UniVRM-0.51.0_1b36.unitypackage」と「UniVRM-samples-0.51.0_1b36.unitypackage」の２つ（※バージョンは掲載時点なので、置き換えて下さい）をダウンロードして欲しい。これはライブラリ本体とその利用サンプルだが、-samples の方に GLB エクスポートなどの機能も含まれているので、どちらも必要になる（→ 最新版では本体のみでエクスポート可能(サンプルは不要)）。インポートする際は本体→サンプル（-samples）の順の方が良いだろう（逆だとエラーが出る）。

・UniVRM (Release)

　Unity 自体が初めての人は「Unity Hub」をダウンロードして、「インストール」から最新のバージョンをダウンロードすると良い。

・Unity ダウンロード



　メニューに「VRM」が追加されていれば完了だ。実際にこれだけで、例えばシーンに１個 Cube を置いて、それをヒエラルキーで選択したまま、メニューから Export すれば glb ファイルが作れる。



　まぁ、今回は背景を作ってみるというテーマなので、アセットストアから無料素材を落として、それを glb にすることを練習にやってみよう。試してみたら、少しばかり注意すべき点もあったので、その辺りも書いておこう。

---

■アセットストアから素材のインポート

　今回は「Grass Road Race」という無料素材をアセットストアからダウンロードして使ってみよう。

　使う素材は何でも良いが、注意点としては Terrain の地形より、なるべく単体のメッシュで構成された素材の方が良いだろう。理由は編集しやすい事もあるが、Terrain だとそのままエクスポートできず、変換が必要となるからだ。またその変換されたメッシュはポリゴン数などが大きくなってしまうため（ツールによっては間引きできるが、感じが変わってしまう）、アプリなどに利用すると重くなってしまう傾向がある。その辺りの工夫も後述しておこう。


　Unity をあまり使ったことない人に説明しておくと、アセットストアとは Unity で直接使える素材（3Dモデルだけでなく、アニメーションやスクリプトなども含む）を購入できる専用ストアで、また自分で販売することもできる（私も Android のプラグインを無料で配布している）。無料のものも結構あるので（検索で $0 にすれば無料だけを検索できる）、色々試してみるのにも良いだろう（Unity 上からは Ctrl + 9 で検索すると良い）。


　インポートしたら準備は完了だ。次は素材を GLB 用に編集してみよう。

---

■GLB 用に素材を編集する（島を作る）

　まずはインポートした「GrassRoadRace」フォルダ以下のサンプルシーン「Scene_GrassRoadRace」を開いてみよう。元のシーンを残しておきたいなら、Ctrl + D で複製を作って編集しても良い。



　地形は自由に作っても良いが、私が実際にやった方法と、ちょっとした注意点を書いておこう。

　先に概略を挙げておくと、使うシェーダとアニメーション、メッシュの結合などである。特にシェーダに関しては公式にもあるように『Standard もしくは Unlit/Color, Unlit/Texture, Unlit/Transparent, Unlit/Transparent Coutout, UniGLTF/UniUnlit』となっている（掲載時点：UniVRM0.51.0）。ここでは基本的に Standard シェーダのみを使う（→ 最新版では）UniGLTF/StandardVColor(※廃止), UniGLTF/UniUnlit または Standard を使うと良い。

　ちなみに、UniGLTF/StandardVColor(※廃止) は StandardShader の様に影(陰影)が付くシェーダで、UniUnlit (Unlit系) は影が付かないシェーダだ。Unlit系は光源の影響を受けないので、アニメっぽいフラットな感じになるが、影の計算が不要なため、負荷が軽くなる。

　完成形は１つの孤島を作ってみた。大きさは 10x10 m くらいだろうか。Unity の Scene ビューでは薄いグリッド線が見えると思うが、これが 1m となっている（拡大してるとき）。わかりずらければ Cube が 1x1x1 m なので１つ置いて基準にするのもいいだろう。最終的に VRM Live Viewer で使うなら、Capsule（高さ[Height]を 1.5m [身長]にしておく）を人型として目安にするのも良い。




　島を構成するオブジェクトは「Ground02」「Ground03」「Ground04」の３つだ。検索すればいくつか出てくるが、１つずつ取り出して、空の GameObject（ここでは「island_base」としている）に入れよう。Position は一旦 (0, 0, 0) にしてから、ぐるりと周りからみて穴が開かないように、Position を配置して欲しい。参考に値を書いておくと、Ground02: (0, 0, 0), Ground03: (0, 0, -3.809998), Ground04: (0, 0, 3.809998) となっている。調整中は邪魔なので Track は非表示にした方が良いだろう。




　また今回は島にフェンスを付けないので、ここで削除してしまおう。Unity 2018 以降を使ってるなら、各素材を選択して、「Unpack Prefab」（Unity2017 以前は「Break Prefab」だった気がする）した後で、「Fence」を削除しよう。




　次にシェーダの設定を変更しておこう。初期の状態では「Mobile/Diffuse」になってると思うが、これを全て「Standard」にしておいて欲しい。（→ 最新版では）UniGLTF/StandardVColor または UniGLTF/UniUnlit もしくは Standard にすると良い。Standard で見た目が暗くなった場合は、「Albedo」を完全な白に、「Smoothness」を０にすれば、少し明るくなる。使えるシェーダについては公式に書いてあるので、参照して欲しい。





　最後に島全体の大きさと位置を決めておこう。親オブジェクト（island_base）をヒエラルキーで選択して、Transform を適当に調整すれば良い。




　木の配置も基本的には同じやり方だ。非表示にしている Track の中から「GroundIsland」を取り出し（Scale が (1, 1, 1) のものを選ぶと良い）、空のオブジェクト（tree_base としている）の中に入れよう。一旦全ての Position を (0, 0, 0) にした方が良い。



　島のときと同じように、「Unpack Prefab」をした後で、「Grass」と「PalmTree」を選択し、シェーダを設定して欲しい。シェーダはマテリアルごとの設定となるので、面倒ならマテリアルの方をプロジェクトビューで全て設定しても良いだろう。




　シェーダを設定したら、木を複製（ヒエラルキー上で Ctrl + D）して３つにしよう。Position は適当で良いが、参考値としては、(0, -1.108, -4), (3.4, -1.108, -4), (-3.4, -1.108, -4) となっている。



　３つ適当に並べたら、親オブジェクトである「tree_base」を複製（Ctrl + D）して、180度回転しよう。これで簡単に６つになった。少しだけ Z の値を調整している。値は適当で良い。




　後は両サイドに１つずつ木を足しておこう。空のオブジェクト（tree_base_side としている）を作って、tree_base, tree_base (1) の中の GroundIsland (2) をそれぞれ複製して（Ctrl + D）、tree_base_side 内に移動し、位置と回転を調整している。値は適当で良い。回転は木の根本にある草が島の内側に向くように調整すると良いだろう（裏からだと見えなくなるため）。




　最後にこれら全部の素材を１つにまとめる空オブジェクトを作り、その中に移動しよう。Z を動かしたのは原点から見て中心あたりにしたかったからだ。他のアプリなどで読み込むときのためにも、なるべく中心がワールド座標の原点となるように配置しておくと良い。

　これで一応、島は完成だ。

---

■メッシュを結合する

　この操作は必須というわけではないのだが、特に今回のような複数の素材を組み合わせて作るものなどは、メッシュを結合をやっておくと良いだろう。その理由はテラシュールさんのブログを見て貰えばわかると思うが、単純に動かない物体などはなるべくまとめてしまう方が、利用時に軽くなるからだ。

・Unityのシーン上に配置したモデルを結合する

　ここでは簡単にやり方を書いておこう。記事を読んでいくとソースコードが掲載されているが、github にも公開されているので、こちらから zip で落とすのが楽だろう（「Download ZIP」ボタンを押す）。

・MeshCombiner.cs

　「MeshCombiner.cs」をダウンロードしたら、適当にフォルダでも作って、プロジェクトにインポートして欲しい。

　たぶん現在の Unity のバージョンではエラーが出ると思うが、エラーが出たら Console でダブルクリックし、エディタを立ち上げて欲しい。エラーの箇所は古い書き方なだけなので、今の書き方に修正するだけで良い。具体的には以下のように修正する。



●25行目（エラーが出てる行）を以下のように修正する


　修正してエラーが出なくなったら、MeshCombiner を完成した背景モデル（ここでは Island）にアタッチして欲しい。アタッチしたら、生成先となる空のオブジェクトをヒエラルキーで作成し、それを MeshCombiner の Generated Object にドラッグ＆ドロップして設定する。



　Generated Object を設定したら、MeshCombiner の 右端にある歯車アイコンを押して、メニューから「Export」しよう。しばらくすると、元オブジェクト（Island）が無効化され、代わりにメッシュが結合されたオブジェクトが生成される。名前は後でわかり易いように変えておくと良い。




　特に見た目が変わってないので、わかりずらいかも知れないが、プロジェクトビューで見てみると、結合された新しいメッシュが生成されていることがわかる（物によっては少しテクスチャが元と違う感じになることもある。マテリアルごとにまとめられるらしい）。



　ここまででも、出来上がった背景オブジェクトをヒエラルキーで選択して、メニューから「VRM＞UniGLTF-1.28＞Export」すれば glb
出力できる。試しに VRM Live Viewer で読み込んで見ても良いだろう（ウィンドウに出力ファイルをドロップすれば良い）。

---

■海を作る

　まずは、海（Wave）を非表示にした Track の中から取り出そう。そしたら、一旦 Position を (0, 0, 0) にし、ヒエラルキーで Wave を選択した状態で「Unpack Prefab」をし、シェーダを Standard にして値を設定する。これらは今までと同じやり方だ。




　海を配置すると、原点から Z 方向に伸びていることがわかる。今後アニメーションで利用するためにも、ここでちょっと工夫しておこう。島を作るときに使った MeshCombiner を Wave にアタッチし、Position Z を -188 にして欲しい。また、MeshCombiner の出力先となる空のオブジェクト（Sea としている）を作り、設定する。そしたら歯車アイコンから Export してメッシュ結合しよう。




　実はここで MeshCombiner を使ったのはメッシュの基準を原点にしたかっただけだったりする(笑)。なので、自分で Plane を作ってマテリアルを貼り付けるのもアリだと思う。また、スケールを１にする目的もある。こういう使い方もあると覚えておくと、素材作りに役に立つかも知れない。

　あと、結合すると static（静的オブジェクト＝動かないオブジェクト）となるので、チェックを外して欲しい。外そうとするとダイアログが出るが、これは「子要素も外すか？」という質問なので、「Yes」の方を選択して欲しい。これは後でアニメーションさせたいので、そのための準備だ。




　最後に全体を１つにまとめる空オブジェクト（root としている）を作って、島（Island）と海（Sea）をその中に入れよう。また、少し海の Y 座標を -1.5 下げて、島が浮いている感じを出してみる。




　これで背景モデルの全体像は完成だ（カメラは少し近づけている）。もちろん、ヒエラルキーで root を選択したまま、メニューから Export すれば glb ファイルが作れる。

---

■アニメーションをする

　ここまでで、GLB が一応できたと思うが、ちょっと工夫して海の水の流れっぽいアニメーションを作ってみよう。と言っても、ここでやる方法はあくまで GLB 仕様（基本的に Transform の Position, Rotation, Scale のみと考えて良い）のための方法で、アニメーションの例としては良い使い方というわけではない（大抵はテクスチャの UV 座標を移動する方が多いと思うが、スクリプトが必要なため）。しかし基本は同じなので、実際には自由にアニメーションを付けてみると良いだろう。

　ここで GLB の仕様を確認してみると『一番親のオブジェクトに付けてください。回転はQuaternionのキーフレームを打ってください。移動・回転・拡縮に対応しています。BlendShapeは未対応』とあるので、この場合、アニメーションは「root」にアタッチすれば良いことがわかる。

　まずはヒエラルキーの「root」を選択し、Ctrl + 6 からアニメーションビューを表示しよう。後述の「Create」でファイルが作成され、必要な Animator が自動でアタッチされる。




　アニメーションの使い方・作り方などの詳細は公式のマニュアルを読んで欲しいが、ここでは概要だけを簡単に書いておこう。あくまでも大雑把にそれっぽく作る例なので、クオリティ云々は度外視して欲しい(笑)。

・アニメーション
・新しいアニメーションクリップの作成

　アニメーションビューが開いたら、まずは「Create」ボタンでアニメーションクリップのファイルを作ろう（sea_move としている）。ファイル名は適当で良い。



　ビューでは「Add Property」を押し、海の Transform：「Sea＞Transform＞Position」を開き、（+）ボタンを押す。



　初期状態では１秒後にキーフレームが打ってあるので、それを削除しておく。



　海の移動では Z 方向だけを使うので、最初のフレーム（0）には Z：100 を、フレーム：18000（５分後）には Z：-100 を、フレーム：36000（10分後）には Z:100 にキーフレームを打っておく。一番簡単な方法は、ビューのプレイボタンの右にあるテキストボックスにフレーム数を入れ、そのすぐ左下にあるキーフレーム追加ボタン（菱形に+があるアイコン）を押して、プロパティの Position.z に直接値を入力することだ。

　ちなみにこれは、海が前後にゆっくり５分かけて移動することを意味する。



　また、プレビューで再生してみるとわかるが、初期状態ではイージングが入っているので、だんだん早く移動するようになっている。このままでも別に構わないが、動きが確認しずらいので、とりあえずビュー下にある「Curves」を押して、動きを直線的にしてみよう。



　編集方法は各ポイントを右クリックし、すべての Tangent を「Linear」にしておく。まぁ、往復する瞬間は急激なターンとなるが、気にしないで欲しい（※GLB ではカーブは効かないっぽい）。



　最後に、作ったアニメーションクリップ（ここでは sea_move）をプロジェクトビューで選択し、「Loop Time」のチェックをオンにし、アニメーションをループ再生にしておこう。



　試しにエディタで再生してみるのも良いだろう。ただ、デモのカメラをそのまま使ってるなら、「Camera Move」はオフにし、カメラの Transform を島の近くに移動した方が良いだろう。上手く行ってれば、海が流れるように見えるハズだ（ただ移動してるだけだが(笑)）。

---

■GLB ファイルを出力する

　ここまでで本当に完成だ。後は冒頭にも書いたように、ファイルをエクスポートするだけだ。本当にお疲れさま(笑)。

※他者の素材を利用した場合は、あくまで学習用途に限定しておき、配布などはしない方が良いでしょう。
（※別途、ライセンス等を確認した上ではその限りではありません）



　VRM Live Viewer で見てみるにはウィンドウにドロップするのが簡単だろう。あとは色々工夫して素材作りを楽しむのも良いと思う。Unity2018 以降を使うなら、ProBuilder で１から作っても良いかも。観た人があっと驚くようなシーンを作ってみたいね(笑)。

・ProBuilderでモデリング入門











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