fc2ブログ
ヽ|∵|ゝ(Fantom) の 開発blog? ホーム »チュートリアル
このページの記事一覧

【VRMLiveViewer】ライブ感あるステージで『アイドル(YOASOBI)推しの子OP』を踊らせてみよう (チュートリアル)  


 今回はたった1つのテーマに絞って映像を作っていくチュートリアルをやってみよう。初心者から中級レベルに上がりたい人向けとなる。プリセットから脱却して、一般配布されているステージでも良い感じに踊ってみたいという人向けだ。

 と言ってもあくまで例であって「こうでなくてはならない」というわけではない。いくつかのエフェクトなどを組み合わせてライブっぽくしていくだけで、本来は好きにやって構わない。ここではなるべく簡単にするために、1つのエフェクトにもそれほど多くのパラメータは用いないでやってみよう。完成したら、自分でもっと色々付け足して、更に豪華なステージにするのも良いだろう。

 タイトルにもあるように今回のテーマは『アイドル(YOASOBI)推しの子OP』だ。これは私も「ジトメちゃんver」と「空雪ルミアさんver」の2つが Youtube にアップされている。版権楽曲を利用する際は Youtube やニコ動など、音楽著作権管理団体と包括契約しているプラットフォームだけで公開して欲しい(ステータスで利用可能のとき)。Twitter は現時点(2023年7月時点)では利用できないので注意。カラオケverなど piapro などで一般配布されているものを非営利利用なら大丈夫だ。

 素材配布のリンクは以下になる。先にダウンロードしておいて欲しい。できれば、VMDTMS, VMDRetarget 等の補正ツールも使って欲しいが(わずかに手の角度などが修正される程度なので許容範囲)、ここでは画作りをするのがテーマなので割愛する。できる人は各自でやって欲しい。

(今回必要な素材)
楽曲:アイドル_アニメサイズ_inst/YOASOBI 様 (piapro)
モーション:アイドル(YOASOBI)らぶ式ミク(ハッピートラップ改変)/なつき 様
振り付け:てぃ☆イン!様(sm20283193)
踊り:愛川こずえ様(sm21213107)
カメラ:アイドル(YOASOBI)Sour式ミクMagicalMirai2022/えいちゃん 様
背景:屋内ライブステージ/プリメロ工房 様 (※なるべく[制作者を応援]してね)

※アプリの利用許可は頂いてます。ただし、インターネット上に動画等をアップロードする場合は必ずクレジットを忘れないで下さい。また動画作成以外の用途の場合は必ず著作者様に許可を得て下さい。

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

(ベースの構築)
■背景ステージを読み込んでみる
■メインライトと拡散光を設定する
■キャラクターのオプション(リム/シェーディング/アウトライン)を設定する
■キャラクターライトを設定する(メインライトも微調整)
■色調補正をかける
(よりエモくしてライブ感を増す)
■グローバルフォグを追加する
■ブルームの光を拡散・乱反射させる
■ビネットで中央を目立たせ、画面淵を減光する
■環境反射を入れて、床などの照り返しを表現する
(追加的な要素)
■ステージ(オブジェクト)の発光を変化させる
■パーティクルを入れる
■被写界深度を入れる
(VMDを用いて踊らせる)
■『アイドル(YOASOBI)[推しの子OP]』を踊らせる

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



■背景ステージを読み込んでみる

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


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


1. まずベースとなるステージを選択しよう。ショートカットキーの [W] でツールパッドが開くので、少し下へスクロールして Stage: から [Plane] を選んで欲しい。またMMDの視野角に近くなるように「Viewerカメラの設定」を開き、[視野角] を 30 にしよう。

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



2. プリメロ工房さんからダウンロードした「屋内ライブステージ」(LiveStage.glb) をアプリにドロップしよう。また床はいらないので、Floor: を [(床なし)]([None]ボタンを押す) にしよう。



3. ついでに少しだけ「屋内ライブステージ」を少し後ろへ移動しておこう。これはカメラが後ろに回り込んだとき、階段にぶつからないようにするためである。また回転が 0 度になってる場合は、観客側(サイリウム側)が背になってしまうので、180 度にして、階段がキャラクターの背になるようにしよう。

 なお、キャラクターを移動すれば?と思うかもしれないが、オススメしない。特にカメラを使うときは、キャラクターが原点 (0,0,0) になってること前提なので、移動するとカメラがずれてしまう。カメラがずれると非常に残念な映像になってしまうので、複数配置以外ではキャラクターより背景モデルを移動した方が良い。



4. 周囲が囲まれた背景の場合はわかりずらいが、カメラをずっと引いてみると、デフォルトでは [ファンタジー] の空になっている。これも不要なので、ツールパッドの Sky: の [None] ボタンを推して [(空なし/360)] にして空を消してしまおう。空を残したままでも問題はないのだが、スカイボックスは結構メモリを喰う(Skybox は箱と言うように6面体にテクスチャ画像が貼られている)。使わないならメモリの無駄なので消した方が良い。

 ちなみに、遠くからステージに戻るにはテンキーの[.](ドット)を押すのが簡単だ。これはホーム位置(アプリ起動時の位置)へ戻るショートカットだ。





■メインライトと拡散光を設定する

1. まずは [メインライト] を設定しよう。これらは任意で構わないが、ライトは影の方向を意識すると良い。通常、メインライトは太陽光に相等する。しかし今回のライブステージは屋内なので人工的な照明として使えば良い。ここでは [縦回転] はわりと正面の少し上方向から当たってる感じになってる。最終的には好きに調整して構わない。



2. 次に [拡散光] を設定しよう。[拡散光の明るさ] は 0 にする。ちなみに拡散光というのは影のできない光だ。実際には全体の明るさ調整のように使える。今回はライトを照明代わりに使ってるが、真っ暗にするときにも 0 にする必要がある。





■キャラクターのオプション(リム/シェーディング/アウトライン)を設定する

1.「キャラクターのオプション設定」を開いたら、[MToon発光の設定] にしよう。初期状態なら「ポストエフェクトのブルームをオンにするか?」のようなボタンが出ている。この [オンにする] を押すとブルームがオンになる。

もし、キャラクターにも発光が入っていたなら、[発光の補正] で調整しておいても良い。値はモデルのマテリアルにもよるので任意で良い。



2. 次に種類の切り替えボタンの右側を押せば [MToonリムライトの設定] になる。ただリムライトに関しては元からモデルに入ってないと利用できない。その場合はシェーディングまでスキップされる。

 [リムの補正] の値もモデルのマテリアルにもよるので、任意にして欲しい。逆光っぽく見える程度で良いだろう。リムはポストエフェクトのブルームやライトによって印象が変わりやすいので、都度調整し直すことになると思う。通常は最後に入れた方が簡単かもしれない。



3. 次に種類の切り替えボタンの右側を押せば [MToonシェーディングの設定] になる。[トゥーン感] は Maxでアニメ調に、Min でリアル調になる。[陰色の明度補正] は影の明るさなので、下げると影が濃くなる。[陰色の彩度補正] は上げれば色が濃くなる。これらの値はモデルの元にもよるので、任意で良い。ここでは少しリアル調にしてるが、アニメ調でも良い。影の付き方はライトにもよるので、後で微調整することも多いだろう。



4. 次に種類の切り替えボタンの右側を押せば [MToonアウトラインの設定] になる。これも任意で良いが、リアル調にした場合は [線幅の補正] を Min にすれば、線が消える。アニメ調なら太くしても良いが、リムを使うなら消した方がわかり易いかもしれない。





■キャラクターライトを設定する(メインライトも微調整)

 MToonシェーディングを設定したら、少し暗く感じるかもしれない。ここではもう一度ライトに戻り、キャラクターライトとメインライトの微調整を行おう。

1.「キャラクターライト」のパネルを開いて、オンにしよう。メインライトも使ってるので、ちょっと眩しくもなるが、少しばかり設定しておく。ここでは [縦回転] を負の値にしてみよう。負の値というのは下から上へ光が当たるということだ。こうすると照り返しのようにも見える。[光の強さ] も後でエフェクトをかけるので強めになっているが、最終的には任意で良い。[影の濃さ] も Max(1) にしておく。また、カラーピッカーで色を少し赤に近づけてみよう。薄っすらとだが、陰影などが赤みがかってる感じになる。



2. ついでに [メインライト] に切り替え、光の色を微調整しておく。この例ではカラーピッカーで青みがかった色に変更したが、これも最終的には任意で良い。コツではないが、キャラクターライトの角度と色の組み合わせによって、陰影がハッキリ見えたり、色が複雑に見えたり、面白い効果が得られることもある。ここでは少し眩しさが収まるくらいにしてみた。以降に色調補正などのエフェクトもかけるので、とりあえずで良いだろう。





■色調補正をかける

 ポストエフェクトの「色調補正」をかけてみよう。種類から [色調補正] を選んでオンにする。このままでは何も変化は無いので、「ホワイトバランス」の [色温度] と [色合い] をオンにして欲しい。値は任意で良いが、[色温度] は Max で暖色系(オレンジ・赤など)に、Min で寒色系(青系)になる。名前の通り、暖色系はホットな感じに、寒色系はクールなイメージに良い。[色合い] は Max でマゼンタっぽくなり、Min で緑っぽくなる。ほとんどの場合、[色温度] と [色合い] は一緒に使うことになると思う。



 ここまでできたら、カメラを引いて、ステージ全体を眺めてみよう。それなりに良い感じになってるハズだ。


 大体これくらいが基本と言っても良い。どんなものでもここまでと同じ要領で設定していけば、ベースとしては十分だ。シーン保存して使い回すのも良いだろう。ここから曲やイメージに合わせて、他のエフェクトを組み合わせたり、効果的と思われるギミックなどを入れるのも良い。



■グローバルフォグを追加する

 ここからはより映像をエモくするようなエフェクトを追加していこう。今回のテーマは「ライブ感」なので、少し派手目にしていく感じだ。まずはライブステージのスモークとまではいかないが(スモークのようなフォグは Volumetric Fog と呼ばれ、v3.7.2 では実装されてない)、「グローバルフォグ」の [高さフォグ] を使うと下の方だけフォグをかけれるので、それをやってみよう。

1.「フォグ設定」を開いたら [グローバルフォグ] に切り替えて、オンにして欲しい。デフォルトでは [距離フォグ] がオンになってると思うが、これはオフにする。[高さTop-Y] と [高さの密度] で地面からの高さと濃さを調整できるが、ここではステージ内にもかけたいので、少し高めにしてある(4~6 [m] くらいが効果がわかり易い)。



2. 次にフォグの色を付けて欲しいが、ここでは黄色っぽくしている。この辺りは曲のイメージによって変えたり、好きに自分で試してみて欲しい。





■ブルームの光を拡散・乱反射させる

 ポストエフェクトの「ブルーム」の光を拡散・乱反射させて光をエモくしてみよう。キャラクターのオプションの最初の段階でブルームはオンになっているハズだが、[拡散度] をオンにして 8~10 くらいにしよう。試してみるとわかるが、値を上げるほど光が画面全体に広がり、眩しくなる。

 また [レンズの汚れ] もオンにして適当にプリセットのテクスチャ(汚れ)を選んで欲しい。[強さ] は少しかける程度だ。これも任意で良いが、プリセット(汚れのテクスチャ)を変更すると、見た目が大きくかわる。レンズの汚れは画面に入ってくる光を乱反射するので、エモさが増す。





■ビネットで中央を目立たせ、画面淵を減光する

 ポストエフェクトの「ビネット」は画面の外周に、色の淵を付けるようなエフェクトだ。本来は画面中央に注目させる目的が大きいが、画面全体の光を抑える役割にもなる。強めにかければ、スポットライトみたいに見えることもあるね。いい感じにかければ、キャラクターがいるところ(中央)だけ目立つのでステージ感も増す。

1. [強さ] と [滑らかさ] をオンにしよう。値はかなり色に依存するので、適当で良い。その都度調整することになるだろう。ここでは少しだけ画面の淵が黒くなる程度にしてある。



2. 色を付けてみよう。ここでは赤みがかった色にしている。色相(H)をマウスでドラッグして、色々試してみると良い。色によって画面全体のイメージが明るくなったり、暗く感じたり、結構変わるので、曲に合わせて変えるのもオススメだ。屋内背景では雰囲気作りし易いので、積極的に使うと良い。





■環境反射を入れて、床などの照り返しを表現する

 環境反射は周囲の色や光を映り込ませるのに使うが、モデルのマテリアルが対応してる必要がある。モデルによっては [オブジェクトのオプション>質感の設定>スムーズ] で調整できることもあるが、今回の屋内ライブステージでは幸いにもデフォルトで床がある程度反射できるようだ。

 「環境反射の設定」を開いてオンにし、種類を [ワールド環境反射] にして欲しい。これは v3.7.1 以降でないと使えない。[解像度] は重く感じれば 512 より下でも良い。[更新頻度] は [低] で良いだろう。もし、もっと背景オブジェクトを置いて、変化を反映させたいなら [中] にすると良い。[反射の強さ] は強めにしてあるが、任意で良い。





■ステージ(オブジェクト)の発光を変化させる

 発光はモデルにマテリアルによるので、使えないこともあるが、屋内ライブステージは発光も入っている。これをランダムに発光するように設定してみよう。

 「オブジェクトのオプション設定」を開いて欲しい。[モード] を [ランダム(マテリアルごと)] にしてみよう。[発光の最小] と [発光の最大] は任意で良いが、ここでは差を縮めて、光ってる変化を小さくしている。大袈裟に光らせたいなら、最大と最小の差を大きくすれば良い。

 [発光の補正] は全体の値を増減すると考えて良い。他のエフェクトやライト等を調整すると、眩しさも変わってしまうので、その都度微調整に使うと簡単。





■パーティクルを入れる

 だいたいステージの雰囲気作りは完了しているが、あまり他のオブジェクトなどは置いてないので、シンプルに見えるかもしれない。パーティクルを追加して少し華やかにしてみよう。

1.「パーティクルリスト」を開いて、エフェクトから [紙吹雪(FX)] を選択して [追加] しよう。ちなみに"(FX)"が付いているものと無いものがあるが、無い方はどちらかというと過去バージョンの互換用(以前は発光の強さの調整ができなかった)なので、なるべく"(FX)"が付いてるものを使って欲しい。追加したら、各設定を開こう。



2. 各設定のボタンを押したら、複製するので [放出量] は少なめに、[大きさ] は小さく、[再生速度] も遅くしておく。設定したらリストへ戻ろう。ちなみに小さい事だが、上部タイトルの中央辺りを右クリックでもリストに戻れる。



3. リストに戻ったら [複製] ボタンで複製しよう。複製された方の各設定を開こう。



4. 複製した方の色を次々と変えていこう。色は任意で良い。リストで複製を繰り返して、4色追加する。ここでは全部で5色にしてみた(※[紙吹雪(FX)]は仕様上、5個までしか追加できない)。







 少しカメラを引いて、全体の感じを確認してみよう。放出量などが多ければ「パーティクルの複数編集」で一度に増減するのが楽だろう。





■被写界深度を入れる

 仕上げ的にポストエフェクトの「被写界深度」を入れておこう。ぼかし方は好みで構わないが、今回はステージを見せたいので、それほどぼかしてはいない。曲によって変えると良いだろう。

1. カメラモーションを使うので、[フォーカス距離] と [自動フォーカス] をオンにしよう。



2. [対象ボーン] は1人で踊るなら [全てオン] で全てを対象にしても良い。これは顔(Head)が画面外に出たとき、フォーカス距離の計算対象となるボーンを指定するものだ。今回はカメラが下半身辺りから映すカットがあるので、念のためだ。ボーンの名前/構造は図を見て確認して欲しい。複数で踊るときは、計算量(検出)が大きくなってしまうので、最低限にしておく方が良いだろう。例えば足元のみを映すカットがあるなら、[~Foot] を入れておくとかだ。

 また、[Head 優先] がオンになってることを確認しておく。[Head 優先] がオンになっていれば、画面に顔(Head)が映っていれば優先的にトラッキングされるので、計算量(検出)も少なくて済む。通常はオンにしておいた方が良いだろう。

 なお、[対象ボーン] が [Head](顔の辺り) のみで、顔が画面から外れた場合は、注視点(カメラの回転の中心点。MMD上では赤い◎のこと)が距離計算の対象となる。もし自分でカメラモーションを作ることがあるなら、注視点をキャラの近くにしておくことにより、それほど計算のぶれが無くなるので、覚えておくのも良い。



3. ほとんどの場合 [絞り(F値)] と [焦点距離] はセットで調整することになるだろう。ここでの値はかなり適当だが、ステージ全体を映したいので、[絞り(F値)] は最大にしてある。これを下げるとどの距離でもボケがかかり易くなる。ここでは [焦点距離] を 90~130 くらいで調整すれば簡単だろう。大きくするほどボケが強くなる。

理屈を知りたければ "カメラ F値" でググれば良い。ポストエフェクトはハードウェアのカメラ映像技術からきているので、調べれば勉強になる。



 ここまでできれば一応、ステージは完成だ。ステージは広いので、他に色々オブジェクトを追加するのも良いだろう。それは各自でやって欲しい。



■『アイドル(YOASOBI)[推しの子OP]』を踊らせる

 最後に『アイドル(YOASOBI)[推しの子OP]』を踊らせてみよう。ここでは、なつき様のモーションえいちゃん様のカメラを使わせて頂こう。音源は piapro で配布されてるインスト(TV size) なら使っても問題無い(※非営利利用のみ)。

※モーション作者様には利用許可を頂いてます。ただし、インターネット上に動画等をアップロードする場合は必ずクレジットを忘れないで下さい。また、動画作成以外の使い方は作者様に必ず許可を得て下さい。オリジナル楽曲は、Youtubeやニコ動など音楽著作権団体と包括契約されてるプラットフォームのみで使用して下さい(※2023/7 時点では Twitter は不可)。

1. まずはなつき様のモーション(NAC_HT_Idol.vmd)をアプリにドロップしてロードしよう。本来は、VMDTMS, VMDRetarget 等の補正ツールも使って欲しいが、今回は画作りをするのがテーマなのでここでは割愛する。VMD補正ツールの詳細は紹介ページにあるので、各自でやって欲しい。

VMDの補正ツール 紹介
※このモーションでは補正の有無でそれほど大きく変わりませんが(僅かに腕の角度が変わる程度)、ものによっては補正をかけないと違うポーズに見えたり、複雑骨折のように腕がねじ曲がったりしてしまうモーションの数多くあります。特に最近のモーションでは「準標準ボーン必須」というものも多いので、そのまま使用すると規約違反になる恐れがあります。「VMD利用では補正は必ずかける」くらいの認識で使用して下さい。

 重要な点は「VMD再生設定」を開いて、原点(0,0,0) になってることを確認しておくことだ。カメラを使う場合は通常、原点にキャラがいること前提なので、これがずれていると1曲中ずれたままになってしまう。実はこのミスが以外と多いのだ。せっかくの動画が残念なことになってしまうので、特に注意しよう。複数に配置する場合は、センターだけは原点(0,0,0)にすると良い。



2. 次に「アイドル_えいちゃん式カメラモーション.vmd」をアプリにドロップしよう。アイドルはもう1つ「ぺんたさんVer.(アイドル_えいちゃん式カメラモーション02.vmd)」(※ファイル名の最後に"02"が付いている) があるが、このモーションとは別物なので、注意して欲しい。

 カメラの重要な点は身長による高さの調整だ。「VMDカメラの設定」を開いて、[Y 拡縮] で画面の高さの中央辺りになるように調整すると良い。配布動画を観て、近い感じにすると良い。

 ただ身長や体型(顔の大きさ)のバランスなどで違って見えたりするので、自分の感覚でいい感じに見えれば良いだろう。[Y 拡縮] を小さくし過ぎるとカメラが床にめり込み易くもなるので、[Y 下限] を付けるのも良いし、[縦回転 拡縮] で回転を抑えるのも良い。少し離したいなら [距離 加算] を僅かに入れるのも良い。大人数で踊るなら [視野角 拡縮] するのも良い。各パラメータの意味は図解で確認して欲しい。

 幸いにもえいちゃん様のカメラは3人で踊ってることが多いため、視界広めで極端に画面から外れることもなく、[Y 拡縮] くらいの調整だけで済むことが多い。誰にでも使い易いので、初心者でも高クオリティの演出となるだろう。カメラの調整1つで完成度が全然違ってしまうので、できる限り触って慣れよう。



3.「音楽の開始タイミング」も合わせておこう。だいたい 0.3~0.35 くらいだろうか?まぁ、イントロのオーケストラヒット("ジャン!"って鳴るやつ)が大幅にずれてなければ良いだろう。




 これで本当に完成だ。再生して確かめてみよう。それなりにライブっぽくなったと思う。これを元に色々な調整して使い回せば良い。特に色に関するパラメータは結構全体のイメージが変わるので、曲ごとに合わせるのがオススメだ。幸い VRMLiveViewer は設定の使い回しはしやすいように作ってあるので、全く同じ素材でも、毎回新しい映像に見えるくらいのものを簡単に作れる。私は「背景効果設定集」を配布しているが、ほとんどが使い回しに過ぎない。バリエーションはいくらでも作れるということだね。ぜひ挑戦して欲しい。





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


関連記事
スポンサーサイト



category: VRMLiveViewer公式ドキュメント

thread: ソフトウェア開発

janre: コンピュータ

tag: VRMLiveViewer  チュートリアル 
tb: 0   cm: --

【VRMLiveViewer】PVキットを使ってハイクオリティなPV/MV体験をする (チュートリアル)  


 今回はこれまでの3Dの背景で踊らせるのとはまた一味違う、2D動画を使ったPV/MV体験をしてみよう。VRM Live Viewer には以前から背景に動画を使う機能はあったが、元々は主にループ素材を再生するものだった。しかし v3.4 以降では再生開始を同期する機能が追加され、音楽再生と同時に動画も最初から再生できるようになった。この機能と「PVキット」と呼ばれるものを利用して、背景動画(主にアニメーション)とダンス,カメラ等を同期させ、まるで最初から完成されていたPV/MVを観ているような映像を楽しむ方法をやってみよう。

 この方法の場合、やることは定型処理みたいになるので、一度覚えてしまえば難しいことは何も無い。3D背景のように作り込むこともなく、簡単にハイクオリティなPV/MV体験ができるので、ぜひ挑戦してみて欲しい。凝った演出も多く、視聴するだけでもなかなかの感動モノだ。素材さえ見つければ、自分では作れないようなPVが即興的に観れるので、かなり楽しめるだろう。

 先んじて必要な設定を箇条書きにしてみると以下のようになる。

・mp4フォーマット
・動画の設定で[2D]モードにする
・ループ再生はオフ
・再生を音楽に同期をオン
・右サイドパネルの(Sync)Startをオン(デフォ)
・[影だけ床]を使うとき、影の濃さを少し調整(0.5~0.9前後)
・VMDカメラの設定で [Y拡縮] 等を使って、キャラが良い感じに映るように調整する

 上記の設定が自分でできるのなら、このチュートリアルをやる必要はないだろう。ここでは初心者でもわかるように詳細な手順を含めて書いておくので、既にできる人は興味ある部分だけで十分だと思う。


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



■アプリでPVキットを使ってみる

 mp4 の準備ができたら、アプリで再生する準備を整えよう。といっても冒頭に箇条書きした項目をやっていくだけだ。基本的には再生同期設定ができれば十分で、後はキャラクターの身長に合わせたカメラ設定や、影だけ床を使うときの設定などは任意で良い。


1. まずベースとなるステージを選択しよう。右サイドパネルの背景から [Plane] を選ぶか、v3.4 では左サイドパネルの設定アイコン、またはショートカットキーの [W] でツールパッドが開くので、少し下へスクロールして Stage: から [Plane] を選んで欲しい。また床(Floor:)は [影だけ床] にしよう。

 [影だけ床] を選択したら、背景が真っ暗になるが、これは [影だけ床] がプリセットの空(Skybox) を同時に使用できない制限があるからで(特殊なシェーダを用いてるため)、自動的に空(Sky:)が [(空なし/360)] になったからだ。なので正常な動作のため問題無い。ちなみに360度画像なら使えるので、別の機会に試してみると良い。

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

 ついでにキャラクターロードや同梱されている vmdモーションをロードしても良いだろう。これらもドロップだけで勝手に再生される。



2. ステージの用意ができたら、変換した mp4(※もちろん最初から mp4 のものでも良い)をアプリにドロップし、「2D動画の設定」を開こう。ただ、この動画の設定は 360モードになってる場合がある(アプリでは最後に使用したモードになっている)。その場合、設定パネルを開いて [2D] モードに変更すれば良い。必要な設定としては、[ループ再生] はオフと [再生を音楽に同期] にチェックを入れておくことだ。

 [フィット] は画面と動画のアスペクト比とが異なる場合、画面の幅か高さのどちらに合わせるかの設定だ。しかし、カメラを使うなら [高さ] の方が良いかも知れない(任意)。もし、音楽と動画がずれるのであれば [開始タイミング](秒) で微調整するのも良い(任意)。



 なお、再生開始で同期するには右サイドパネルの (Sync)Start にもチェックを入れておく必要がある(デフォ)。これをオフにした場合は音楽だけの再生となる。[Tab]キーでサイドパネルを確認できたら、[W]キーでツールパッドに戻すと良いだろう。



4. [影だけ床] の調整方法も書いておこう。この [影だけ床] の実体は透明な平面床で、文字通り影だけが表示される床だ。なので、影の調整はライトでする。「ライトの設定」を開いて、[メイン] タブのまま、回転や影の濃さなどを設定しよう。MMDのデフォルトでは 45 度(135=90+45)が多いみたいだ。 [影だけ床] は少し色が濃くなる傾向があるので、影の濃さを 0.5~0.9前後にするのも良い。元が平面床であるため、縦回転によっては影が切れてしまうこともあるが、その場合は床のサイズを広げる。この辺りは Tips のツイートを見た方が速いかも知れない。



5. 最後に同梱されている vmdカメラをアプリにドロップして再生してみよう。身長別にいくつか入っていれば、一番近いものを選ぶと良いだろう。カメラの設定アイコンが青になってれば vmd カメラが読み込まれているので、設定パネルを開いて、[Y 拡縮] でいい感じに画面にキャラクターが収まるように調整すれば良い。ちなみに入力ボックスにカーソルを当てたまま、[↑][↓]キーを押せば、一定量変化できるので、これで合わせるのも良いだろう。またカメラが停止してるなら、パネル上の再生ボタンでも開始できる(ただし、音楽は再生されない)。



 ちなみに、キャラクターの身長がわからない場合は、「モデルプロパティ」を開いて、おおよその身長を調べると良い。このデータは最大境界のものだが、Height (=Top-Bottom:一番上と一番下の差分) または Top (一番上) が身長に近くなる。最大境界は可視化にチェックを入れれば、T-Pose になってるときのバウンディングボックスであることがわかる。注意点としては帽子やアホ毛、ヒールのような靴底が出っ張ってるものも含むので、装飾品のあまり無いモデルで確認した方が良いだろう(※佐久間蒼乃さんの身長計をアプリにロードして T-Pose で測っても良い)。



 ここまでで設定は完了だ。同期設定が上手く行ってるなら、音楽開始と同時に動画も最初から再生されるだろう。少し問題があるとすれば、MMDの元モデルとの身長差が大きい場合、どうしても背景のイラストとの接地感は無くなってしまう点だが、これはある程度仕方ないだろう。VMDカメラで [Y 位置] をずらすして合わせることもできるが、他のカットで合わなくなるので、一曲通して再生するには難しい。また照明モーションも対応してないので、影の方向が一定なのもどうにもならない。


モデル(左): ジトメちゃん / モデル(右):空雪ルミアさん

 とは言え、これをシーンとして保存しておけば、背景動画とモーション,カメラ等セットになっているものを入れ替えて、だいたい同じように設定すればすぐに楽しめるメリットもある。ポストエフェクトやパーティクルもかけられるので、ちょっとオリジナルに+αして楽しむのも良いかもね。

 PVキット作者のMAO様からは、一般公開する際は「クレジット記載とリンク先は配布動画にする(ニコ動内ならコンテンツツリー登録など)」を守って貰えばOKだそうだ。リンク先を配布動画にして欲しいのは、ブログの利用規約に目を通してからダウンロードする形をとって欲しいとのご本人たっての希望で、各キットによって内容も少し違う場合もあるので、曲ごとに確認した方が良いだろう。

※詳細・クレジットはYoutubeの説明欄に記載




■mp4 フォーマットの動画を用意する (※avi からの変換が必要なときのみ)

※元から .mp4 がある場合は「アプリでPVキットを使ってみる」から始めて下さい。

 今回は、MAO様の簡易PV構築キットを使わせて頂こう。PVキットをアプリで利用する件については事前に許可を得てある。一般公開する際は「クレジット記載とリンク先は配布動画にする(ニコ動内ならコンテンツツリー登録など)」を守って貰えば、利用してもOKだそうだ。リンク先を配布動画にして欲しいのは、ブログの利用規約に目を通してからダウンロードする形をとって欲しいとのご本人たっての希望だ。各キットによって内容も少し違う場合もあるので、曲ごとに確認した方が良いだろう。といっても、これは他者の作品をお借りする上では当たり前のことなので、PVキットに限らず、全ての素材でやった方が良いだろう。




 ここでは例として「Brand New Workd」を使うことにしてるが、やり方に関しては他の曲でもあまり変わらないと思うので、好きなセットをダウンロードしても良い。元々 mp4 があるものはもちろん変換する必要は無い。例えば「ロキ」「[A]ddiction」「なでなで」等いくつかには mp4 版も最初から用意されている。そちらを試してみる場合は「アプリでPVキットを使ってみる」から始めて良い。ここからの手順はあくまで avi のみで配布されているときの mp4 への変換方法で、自分でできるのなら、この手順は読み飛ばしても良いだろう。

 ここでは昔から動画作成に使われる「AviUtil」を使う方法を紹介しておこう。他の変換ツールを使うのに慣れているのなら、わざわざこちらを使う必要も無い。要は mp4 に変換できるのなら何でも良い。AviUtil を選んだ理由はPVキットでの動画合成も AviUtil を使うことが想定されていることも多く、フリーソフトなので誰でも入手できるという点だ。とても高性能でネットでは情報も入り易いので、ダウンロードしておいても損は無いだろう。


1. まずは公式の「AviUtlのお部屋」から最新版をダウンロードしよう。掲載時点では v1.10 だったが、ここでやるのは avi → mp4 変換だけなので、それほどバージョンにこだわる必要はないだろう。とりま一番上のものをダウンロードすれば良い。



2. 導入に関してはこちらのサイトにも詳しく書かれているので参考にして欲しい。一緒に「拡張編集プラグイン」と呼ばれる「exedit93rc1.zip」(掲載時点:バージョンはその時の最新で良い)も入れておいた方が良いだろう。インストールは解凍した zip を好きな場所に移動し、拡張編集プラグインもその中に入れれば良い。

AviUtlと拡張編集プラグインの導入方法



3. 今回は avi → mp4 変換する目的なので、mp4 の出力プラグインの「x264guiEx」も入れよう。これも先程のサイトに詳しく書かれているので、参照して欲しい。ただ、開発者のブログからダウンロードとなっているが、今では GitHub でも公開してるので(以前は OneDrive で公開してた)、直接そちらから最新の zip をダウンロードしても良い。解凍したら、参照先の解説にあるように「auo_setup.exe」を起動し、インストールすれば良い。バージョンによってやり方が違ってたり、エラーが出たりするなら、都度ググって情報を探して欲しい。

x264guiExの導入方法と使い方
rigaya / x264guiEx (GitHub)



4. 他には「Grass Valley Codec」と「Ut Video Codec」も入れておこう。これは avi でのコーデックだ。どちらもインストーラーがあるので、ダウンロードしてインストーラー(exe)を動かせば良いだけだ(※バージョンはその時の最新で良い)。

Grass Valley Codec
Ut Video Codec Suite (GitHub)



5. これで準備は整ってるハズなので、AviUtil を起動して、avi をドロップしよう。再生して映像が出てくればOKだ(ずっと真っ黒のままなら、コーデックのインストールに失敗している可能性がある→ググって情報を探して欲しい)。後は [ファイル] メニューから [プラグイン出力>拡張 x264 出力(GUI) Ex] で適当な名前を付けて(同じ名前で良い) mp4 で保存し直せば、mp4 変換完了だ。


※前景/背景のように複数あるものは同時に利用できないので、拡張プラグインを使って合成してしまえば良い。プロジェクトファイルが添付されていれば、それを使うのが速いだろう。
※「かんたんMP4出力」というプラグインもあるが、なぜか上手く変換できないことがあったので、x264guiEx の方を紹介した(※x265 版もあるが、x264 の方が互換性が高い)



 余談だが「PV と MV ってどっちの呼び名の方が良いんだろう?」ってググってたら、『PV は Promotion Video の略で、宣伝用の映像』『MV は Music Video の略で楽曲に合わせた映像作品』と出てきたので、たぶんこういうのは MV の方が正しいのだろうな~、と思ってしまった。

 ただ、MMD って VPVP (Vocaloid Promotion Video Project) が中心で、MMD も元は『初音ミク専用のPV作成用ツール』(※初期のバージョンは初音ミク1体のみしか動かせなかった) と公式サイトにも書かれているので、PV の方の呼び名で定着してるのかもね(MAO様も英訳の方ではMVと書いてる)。まぁ、通例であるなら、そう呼ぶのも致し方あるまい(笑)。



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


関連記事

category: VRMLiveViewer公式ドキュメント

thread: ソフトウェア開発

janre: コンピュータ

tag: VRMLiveViewer  チュートリアル 
tb: 0   cm: --

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


 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形式にして、シェイプキー等でギミックを入れてる例もある)。

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




◆その他のチュートリアル
・ライブ感あるステージで『アイドル(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_~」のように順に追加していけば良いだろう。アプリで追加ロードする場合は [+] モードにする。[-] になっていたらクリックして、[+] になってることを確認したら、ファイルを順にドロップしていこう(または […] を押して、[背景モデル] から開いても良い)。

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



3. 人によってはロードしたオブジェクトが反対方向を向いてるかも知れない。アプリでは最後に編集した方向が引き継がれるので、自分の好きな方向に回転しよう。「オブジェクトの配置」アイコンから手入力できる。180 (度) を入れると、聖堂が背後になるだろう。ここではオブジェクトを2つ使ってるので(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 (夕焼け)」を使わせて貰っている。好みで他のものを使っても良い。


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


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



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

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

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




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

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

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

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


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



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



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



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

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



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

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

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




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

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

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

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



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

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

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




 他にはパーティクルを少量入れるのも良いね(枯れ葉とか)。カメラモーションを使いながら被写界深度を使いたいときは [自動フォーカス] を使う、などまだ色々知って欲しいポイントはあるが、モーメントに 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ファイティングを避けるため)。

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

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



※この動画の設定は「背景効果設定集」(20220804_Conqueror_チュートリアル夜応用(光と闇の玉座の間))に入ってます。



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



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


関連記事

category: VRMLiveViewer公式ドキュメント

thread: ソフトウェア開発

janre: コンピュータ

tag: VRMLiveViewer  チュートリアル 
tb: 0   cm: --


プロフィール

Social

検索フォーム

全記事一覧

カテゴリ

ユーザータグ

最新記事

リンク

PR

▲ Pagetop