【VRMLiveViewer】背景をカスタマイズする (チュートリアル)

2022/07/31 Sun [edit]

　VRM Live Viewer にはβ版時代から背景 GLTF/GLB モデルを読み込む機能があったのだが、特に日本では GLTF/GLB フォーマットはあまり使われてなかったので、海外の3Dモデル共有サイト(主に Sketchfab)に頼るしかなかった（実際にはバーチャルキャストで GLB は使われていたが、閉じたシステムのため、あまり一般普及しなかった）。

　しかし最近では(VRMLiveViewer 3.4時点)、BOOTH等にも GLB(GLTF)フォーマットの背景モデルも配布されるようになったため、改めて背景の変え方をチュートリアル的に書いておこう。

　ちなみに GLB と GLTF は同じ glTFフォーマットで、GLB はテクスチャ等を含めたアーカイブ形式のものである。実は VRM も同じ glTFフォーマットで、GLB と同じアーカイブ形式で人型に特化したフォーマットだ。なので、内部的に同じもののため、拡張子を .vrm → .glb にリネームすると、背景モデルとして読み込める（逆に背景モデルを VRM形式にして、シェイプキー等でギミックを入れてる例もある）。

　ここでは初心者でもわかるように詳細な手順を含めて書いておくので、簡単過ぎる人は興味ある部分だけ拾い読みで十分だろう。

■背景の3Dモデルを読み込んでみる
■360度, スカイドーム（全天球）画像読み込んでみる
■ライトで雰囲気を変えてみる
■ポストエフェクトで少しリアルな感じにしてみる
■フォグで空間を演出してみる
(追記)
■練習問題
　●これまで使ったパラメータだけで、再調整して夕方から夜にしてみよう
　●夕方 or 夜の設定を元に、他の背景モデルを使って、実際に楽曲に当てはめてみよう

◆その他のチュートリアル
・ライブ感あるステージで『アイドル(YOASOBI)推しの子OP』を踊らせてみよう (チュートリアル)
・PVキットを使ってハイクオリティなPV/MV体験をする (チュートリアル)
・GLTF モデルに影が付くように修正して、アプリで利用する
・GLBで背景モデルを自作する
・GLBで床を自作する
・魔法陣の床を作る
・ツールを使って、VRoid の衣装を発光させる
・VRoid の衣装を発光させる (Unity)
・VRMLiveViewer Tips #1 (～v3.4) [Twitterモーメント]
・VRMLiveViewer Tips #2 (v3.5) [Twitterモーメント]
・VRMLiveViewer Tips #3 (v3.5～) [Twitterまとめ用]

(※) VRMLiveViewer 3.4 / Windows11(x64) で確認

■背景の3Dモデルを読み込んでみる

　ここでは、プリメロ工房さんの「聖堂前ステージ」をサンプルに使わせて頂こう。無料でダウンロードできるが、できれば制作者のモチベにも繋がるので支援などもしてあげよう。クレジット等も要求されてはないが、自分の映像作品などに使用したなら、お店のリンクを貼るなり、制作者名なり出典を記載しておこう。特に大衆向けの配信サイト等で他者の作品を使いっぱなし貰いっぱなしというのはあまり宜しくない（自作発言してなくても、知らない人にはそう見えてしまうため）。できるだけの事で良いので、作ってくれた人のためになることしておこう。

プリメロ工房 - 聖堂前ステージ

※各素材の著作権は著作者に帰属します。各素材についての利用方法などは、各著作者が提示されてる利用規約などをご確認下さい。

1. まずベースとなるステージを選択しよう。右サイドパネルの背景から [Plane] を選ぶか、v3.4 では左サイドパネルの設定アイコン、またはショートカットキーの [W] でツールパッドが開くので、少し下へスクロールして Stage: から [Plane] を選んで欲しい。また床はいらないので、Floor: を [(床なし/3D)] にしよう。ちなみにベースに CRS FX 等ステージを使った場合は、そのままステージ上に配置する感じになる。

　また、ツールパッドの一番下にある [Alternate Show] にチェックを入れると、サイドパネルと入れ替わりで表示できるので、ツールパッドの上部をドラッグして右端などに持っていくと良い。

2. 先程ダウンロードした zip を解凍すると、いくつかのフォルダが出てくるので、とりあえずここでは「glbデータ」フォルダを開こう（他のフォルダは別形式やカスタマイズしやすい元データが入っている。親切！）。中には「ChurchAgora_A_Main.glb」「ChurchAgora_B_Add.glb」があると思うが(2022/7時点)、おおよそ「(モデル名)_A_～」「(モデル名)_B_～」のように順に追加していけば良いだろう。アプリで追加ロードする場合は [+] モードにする。[-] になっていたらクリックして、[+] になってることを確認したら、ファイルを順にドロップしていこう（または […] を押して、[背景モデル] から開いても良い）。

　ドロップした後にオブジェクトリストを開くと、２つのオブジェクトが表示されていればOKだ。通常は追加した順になる(並び換えはできる)。今のところ、並び順にあまり意味は無いが、シーンの保存名やリストエクスポート時に先頭の名前が使われる。ちなみに、オブジェクトと同じフォルダまたは「thumbnail」フォルダを作って、.glb と同じファイル名で .jpg or .png をサムネイルとして入れておけば、リスト上で表示される。大きさは 64x64px / 128x128px / 256x256px 等(2のn乗数)が最もメモリ効率が良く、高速だ（多くの 3D システムは同じ=OpenGL等の仕様）。

3. 人によってはロードしたオブジェクトが反対方向を向いてるかも知れない。アプリでは最後に編集した方向が引き継がれるので、自分の好きな方向に回転しよう。「オブジェクトの配置」アイコンから手入力できる。180 (度) を入れると、聖堂が背後になるだろう。ここではオブジェクトを２つ使ってるので(ChurchAgora_A, _B)、両方回転しておくと良い。なお、パネルの下にある移動アイコンでリストの順にオブジェクト切り替えができる。PC版なら、ショートカットの [Ctrl]+[Tab], [Ctrl]+[Shift]+[Tab] で移動するのも良いだろう。

　また v3.4 からはギズモが導入されているので、自由な位置に移動するのも良い。キャラクターを動かしても良いが、カメラを使う場合は位置が合わなくなるので、オブジェクトを上手く移動して、キャラクターは原点のままにしておけば、カメラやモーションも使い易い。今回の例のように、複数オブジェクトがセットになってるものは、複数配置パネルからギズモを開くと同時に移動できる。

■360度, スカイドーム（全天球）画像読み込んでみる

　ここでは ++skies; さんのスカイドーム（360度画像, 全天球画像とも言う）を使わせて貰おう。Web ページの [ダウンロード] から利用規約・ガイドライン等も目を通して欲しいが、比較的自由に使える素材だ。

　解像度も 8K～32K までとあり、フォーマット等も色々あるが、アプリで利用する分には PNG8 (.png で 8K) で十分だろう。もちろん PNG16K でも構わないが、メモリ使用量に注意して使って欲しい（=アプリが落ちたり、一部テクスチャロード失敗したりする場合は、メモリが足りない）。実際には 8K でもかなり大きいので、メモリに余裕が無ければ（or それほど空が重要でない背景であれば）、画像編集ソフトで 4K に落としても良いだろう（リサイズ，トリミング，色調補正，合成等は、規約上問題無い）。

　今回の例では「024 (青空)」と「033 (夕焼け)」を使わせて貰っている。好みで他のものを使っても良い。

++skies; / (c) aokcub

※各素材の著作権は著作者に帰属します。各素材についての利用方法などは、各著作者が提示されてる利用規約などをご確認下さい。

1. ダウンロードした zip を解凍したら、.png ファイルをアプリにドロップしよう（または […] アイコンから [背景画像] から読み込んでも良い）。ロード完了したら、すぐに空に適用されると思うが、場合によっては [2D] モードになってるかも知れない（これも最後に使ったモードになる）。そのときは画像の設定パネルを開いて、[360] モードにして欲しい。

2. また、バーチャルなので完璧でなくても良いとは思うのだが、360度画像の太陽の位置と影の方向を合わせると、より臨場感が出る。これも自分好みで良いが、360度画像自体を回転、またはライトで光の方向を回転をして合わせると良いだろう。

●ライトを 0度に回転したとき

●360度画像を180度, ライトを 180度に回転したとき

■ライトで雰囲気を変えてみる

　ライトの回転を覚えたのなら、せっかくなので色も編集して、全体の雰囲気を変えてみよう。デフォルトでは光源色は真白になっているが、ここでは練習で夕焼けっぽくしてみる。上手くやればライトだけで夜の雰囲気にすることも可能だ。

　注意点としては、オブジェクトに使われているマテリアルが光の影響を受けない「Unlitシェーダ」を使っていないことが前提になる。もし Unlit が使われていたなら、こちらの記事で修正すれば使えるかもだが、今回のサンプルでは幸いそのまま使える。それではやってみよう。

(修正が必要な場合) GLTF モデルに影が付くように修正して、アプリで利用する

1. ライトの設定を開いて、メインライトの色をオレンジっぽくしてみよう。色は任意で良いが、少し夕方らしく影を長くしたいので、縦回転も 0 に近づけよう。0 になると光が真横から来るようになるが、少し暗めにもなるので、ここで光の強さも調整しても良い。メインライトはおおよそ太陽光のように考えて良い。

2. 次に [拡散光] のタブを押して欲しい。ここで明るさを 0 に近づけると、全体的に暗くなっていくのがわかる。また色とも連動していて、実際には [拡散光の明るさ] =「色の輝度」になっている。拡散光とは環境全体の明るさや色に相等し、メインライトとは異なり影はできない。完全に暗くするときには明るさを 0 にする必要があり、また屋内のように壁で囲まれメインライトでは影で暗くなってしまうような場合には、拡散光の調整で明るくすることもできる。ここでは先程のメインライトを少し強めにしたのと、拡散光の明るさを落としたのとで、光の当たってる所と影になってる部分で明暗が出てきたと思う。かなり雰囲気が出てきただろう。

3. もう１つ、キャラクターライトも使ってみよう。[キャラクター] タブを押し、使用をオンにすることで利用できる。これはキャラクターのみに当たる非現実的な光で、例えば真っ暗な背景でもキャラクターだけよく見えるような、バーチャルならではの都合の良い光だ(笑)。ただし床などに影は落ちないので注意（影を落としてるのはメインライト）。通常はメインライトと２重に当たると光が強くなり過ぎるので、少し弱くすることが多いだろう。ここでは少し黄色めの色にして、照り返しのようにしてる（任意で良い）。

4. 空とは色が合わなくなったので、最初にダウンロードした夕焼けの方の360度画像をアプリにドロップし、前述と同じように回転しよう。これで十分夕方の雰囲気が出たのではないだろうか。

●夕焼けの360度画像をロードして、背後から見た感じ

●正面から見た感じ。すっかり夕方になった…

■ポストエフェクトで少しリアルな感じにしてみる

　ライトだけでも十分雰囲気出せることがわかったと思うが、v3.1 以降からはポストエフェクトが導入されているので、もう少しリアルな映像にしてみよう。

　ちなみにポストエフェクトというのはレンダリング（=ここでは3D画面を計算して描画すること）完了した画像(映像)に、PhotoShop等画像編集ソフトで言うフィルタをかける機能だ。なので負荷が高く、GPUを積んでないハードウェアでは利用は難しい。またエフェクトによってハード要件（シェーダモデル、コンピュートシェーダサポート等）があるので、対応してないハードには効果が無いので注意（対応してない場合、エラーは出ず、単にスルーされる）。ハード要件の詳細はこちらの各エフェクトの「※要」の部分を見て欲しい。

　ここでは簡単にその効果を知ってもらうため、「ブルーム」と「環境遮蔽(アンビエントオクルージョン)」だけ紹介しておこう。基本的には各エフェクトとそのパラメータをオンにしてスライダーで調整するだけなので、他のエフェクトはマニュアルを見ながら自分で試して欲しい。

1. まずはポストエフェクト設定を開こう。[CRS FX]以外のステージでは使用がオフになっている。使用をオン(①)にすると種類が選べるようになるので、ドロップダウンから「環境遮蔽 (Ambient Occulusion)」（アンビエントオクルージョン. AO とも略される）を選択しよう(②)。各エフェクトごとにもオン(③)にする必要があり、各パラメータごとにも使用するものはオンにする必要がある(④,⑤)。これはポストエフェクトは負荷の高い処理であり、不要なものは少しでも外して軽くするためだ。

・環境遮蔽 (Ambient Occlusion) ※要：コンピュートシェーダー, シェーダーモデル 4.5 (Required: Compute shader support, Shader Model 4.5)

　環境遮蔽(アンビエントオクルージョン)とは簡単に説明すると「物体同士の隅になる所などの影を強調する」ようなエフェクトで、建物の窓枠や階段などの陰影も濃くなるので、リアル感が増す。

　パラメータの値は自分好みで構わないが、ここではスクショと同じようにしてみると良い。色もデフォルトでは黒だが、少し茶色（オレンジ色の輝度を下げたもの）っぽくして、背景の光源色に合わせて馴染ませている。暗い背景なら紫、アーティスティックな感じならピンクや赤にしてる人もいるね。屋内(部屋)みたいな所で使ってもかなり雰囲気が変わる。

　また、一緒にキャラクターにもかかるので、少しシェーディングされたようで、フィギュアっぽくなったんじゃないだろうか。この効果を好んで使う人も多い。少し顔色が悪く感じるので、ダーク系のキャラの方が合う気もするけどね(笑)。

2. もう１つ効果の分かり易いものとして「ブルーム」を追加してみよう。このエフェクトは「輝度の高い色を強調する」ので光り物や逆光、ネオンなどの発光にも重要なエフェクトだ。たぶん一番お世話になるものだろう。種類で「ブルーム(Bloom)」を選択したら、エフェクトをオンにし、適当にパラメータを設定して欲しい。とりあえずならスクショと同じにすれば良いだろう。

・ブルーム (Bloom) ※要：シェーダーモデル 3 (Required: Shader Model 3)

　ここまでできたら、ライトのみの画像と比較してみるのも良い。アプリ上で比較するには、ポストエフェクト自体の使用をオフにするのが簡単だ。

　今回はどちらかというと最低限の機能くらいしか使用してないので、慣れてきたら色々なエフェクト/パラメータをいじってみると良い。ここでは使わなかったが、「色調補正」も全体的な色を変更できるので、かなり有用だろう。キャラクターのみにフォーカスを当て、背景はぼかす「被写界深度」も好んで使われるようだ。ポストエフェクトは元々映像作品(映画)を作るためにも用いられる技術なので、凝れば凝るほど凄い映像にもなる。色々試してみると良い。

●ライトのチュートリアルの最後の画像と見比べるとリアル感が全然違うことがわかる

■フォグで空間を演出してみる

　最後に全体的にフワッとするようにフォグ(霧)を入れてみよう。ただここで使う「オーバーレイフォグ」は霧というより、物体にグラデーションをかけるようなエフェクトだ（Unity のデフォルトフォグ。便宜上オーバーレイと名付けた）。欠点としてプリセットの空(Skybox)にはかからないので、むしろ今回の例のように全天球(360度画像)を使ってる方が都合が良い（全天球はアプリで予め用意されている球状のオブジェクトであり、フォグもかかる）。

　フォグもポストエフェクトと同じように、フォグ全体のオン/オフ、個々のエフェクト(v3.4時点では１つしかないが）の選択とオン/オフをする必要がある。フォグをオンにしてオーバーレイフォグを選択したら(デフォ)、スクショのようにしてみると良い。モードはマニュアルを見て欲しいが、ここでは自由度の高い [直線的] にしておこう。[開始距離] は正の値だと離れた位置から開始、負の値だと背後から包まれる用に霧(グラデーション)が発生する。値はスライダーで任意で良い。

　カラーピッカーで色を調整するときには、S (彩度), V (輝度) の文字をクリックし(太字になる)、[↑][↓]キーで微調整することもできる。濃すぎる場合は V をクリックし、[↓]キーを何度か押せば、だんだん霧が晴れてくる。

　これで一応完成だ。ちょっと深めにフォグをかけたが、カメラを回して全体を確かめて欲しい。影や空にも色が付いたので空間を感じるようになったんじゃないだろうか。更にポストエフェクトの「被写界深度」を入れるともっと良いが、ぼかし方には個性が出るので、自分で好きに試して欲しい。

●フォグを入れると空と建物が１つの空間に繋がってる感じになる

●影の部分にも色が付いてるからか、少し幻想的になる

　他にはパーティクルを少量入れるのも良いね(枯れ葉とか)。カメラモーションを使いながら被写界深度を使いたいときは [自動フォーカス] を使う、などまだ色々知って欲しいポイントはあるが、モーメントに Tips として残してあるので、参考にしてみて欲しい。まぁ、機能はどんどん更新されるので、できればTwitter上でリアルタイムで観て欲しいけどね（新機能やコツなど不定期でツイートしてる）。また過去にやったデモの設定データは「設定集」として配布してるので、それを試すのも良い。

　少なくともマニュアルもチュートリアルも設定集も素材も必要な知識も押えるべきポイントも全ての機能も何もかも与えてあるので、学習しようと思えば誰でもできる状態になってるハズだ。しかも使ってる素材はなるべく汎用的で入手可能なものばかりだ。実は条件は世界中の人とあまり変わらず特別なことはしてない（v3.4のデモは過去データ[=設定集]を流用＆調整して、30分くらいで作ったものだ）。ここまで読んで理解できたのなら、もう十分な基礎はできてると思う。後は応用・拡張していくだけなので、このチュートリアルでも設定集でも好きに使っていじくり倒せば良い。まずは色を変えるでも光の強さを変えるだけでも十分だ。そのうちどこをいじれば良いかわかってくる。そこまで行ったら守破離だ。さぁ、私の屍を乗り越えてゆけ(笑)！

●最後の状態にアンチエイリアスと被写界深度をほんの少しかけて撮影

ここまでできたら免許皆伝！おめでとう！
さぁ、これからはあなたの時代だ(笑)！

※クリックで大きい画像があるので、持っていくがよい [透過png]
(※ブログでもつべでも自由に使って良いよ)

↓↓喜びのシェア(笑)↓↓

（※以降 2022/08/03 以降追記）

■練習問題

●これまで使ったパラメータだけで、再調整して夕方から夜にしてみよう。
（ヒント：主に色と光の強さを調整。キャラクターはマテリアル設定で差異が出るので気にしなくて良い）

　なお、画像では v3.4以降の「影だけ床」を使い、[Y位置] を 0.04 にし(影の色を濃くするため)、パーティクルは設定集(パーティクル集)の「particle_キラキラ_2色(青と紫)_[2effect(s)]_in_CRS_FX.json」を調整したものを使っている。これらは任意で良い。

※360度画像(天の川の夜空)は VoxelKei様の「日本列島360(JPN360_9.jpg)」をお借りしてます。

※同じでなくても雰囲気を夜にできれば合格です。

※この設定(回答例)は「背景効果設定集」(20220731_背景カスタマイズチュートリアル(夜))に入ってます。

●夕方 or 夜の設定を元に、他の背景モデルを使って、実際に楽曲に当てはめてみよう

　やってみた「夕方」または「夜」の設定を元に、他の背景モデルに入れ替えて、実際に何からの楽曲で踊らせてみよう。内容は問わない。

　なお、動画ではポストエフェクトに色調補正を加え [トーンマッピング] に [ACES] を使っている。パーティクルは設定集(パーティクル集)の「particle_キラキラ_2色(青と紫)_[2effect(s)]_in_CRS_FX.json」を少しフワフワと浮遊感があるように再調整している。また、v3.4以降の「影だけ床」を使い、[Y位置] を 0 にして(影の色を濃くするため)、玉座の間は [Y位置] を -0.01 にしている（Zファイティングを避けるため）。

※背景モデルはプリメロ工房様の「玉座の間」をお借りしてます。

※なんかいい感じになれば合格です。

そして次に別の背景や楽曲に使ってみる。この例ではポストエフェクトに色調補正を加えたが、それ以外は色や光の強さ・回転などの微調整のみ。パーティクルは少し浮遊的に。こうやって少しずつ手を加えて応用していけば、無限にバリエーションはできる。守破離の意味がわかったかな(笑)?#VRMLiveViewer https://t.co/ryojZ3BL21 pic.twitter.com/sYFHZzWGRS
— ヽ｜∵｜ゝ(Fantom)@VRMLiveViewer (@fantom_1x) August 4, 2022