【VRMLiveViewer】GLBで背景モデルを自作する

2019/05/20 Mon [edit]

　今回は、VRM Live Viewer で背景を自作したい人のために、GLB を使った簡単な素材作成法を書いておこう。これは実際にデモで使った素材の作り方そのものなので、同じようにやれば、そっくりそのままの背景モデルを作ることもできるだろう。

今回は固定だったカメラの速度調整を入れてみた。背景やモデルの重さによっても影響受けるので、シーンにも保存できるようにした。ついでにGLB(背景モデル)の自作も試してみた。多少コツがあるが意外と簡単だったので、今度ブログにも作り方を掲載しよう。水着はやっぱり海だよね(笑)。#VRMLiveViewer pic.twitter.com/kvgecyP4kd
— ヽ｜∵｜ゝ(Fantom) (@fantom_1x) 2019年4月28日

＞＞@あかりみち

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

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

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

・glbファイルの作り方

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

■UniVRM のインポート
■アセットストアから素材のインポート
■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行目（エラーが出てる行）を以下のように修正する

var mat = mesh.GetComponent<Renderer>().sharedMaterial ;

　修正してエラーが出なくなったら、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でモデリング入門

＞＞@makuraren9

●フリーのアセットを色々組み合わせてクリスマスっぽいシーンを作ってみたもの

[キャラ] VRoid Mobile
[街モデル] Japanese Dosanko City
[クリスマスグッズ] Christmas Gifts
[全天球画像] 日本列島360 (JPN360_9.jpg)
[クリスマスロゴ] クリスマスのエンブレム/シンボルーク

・シェーダは Standard と Unlit に変更し、カスタムは Standard に置き換え
・サンタコスは VRoidMobile では元から入っているが、BOOTHでも配布されている
・クリスマスロゴはシーンをキャプチャした画像に置いただけ