fc2ブログ
ヽ|∵|ゝ(Fantom) の 開発blog? ホーム »VRMLiveViewer
カテゴリー「VRMLiveViewer」の記事一覧

【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) で確認



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

 今回は、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キットを使ってみる

 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だそうだ。リンク先を配布動画にして欲しいのは、ブログの利用規約に目を通してからダウンロードする形をとって欲しいとのご本人たっての希望で、各キットによって内容も少し違う場合もあるので、曲ごとに確認した方が良いだろう。





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

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


(※) 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_チュートリアル夜応用(光と闇の玉座の間))に入ってます。







(関連記事)
【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】よくある質問・トラブルシューティング等  




※このページは「VRM Live Viewer のメインページ」の関連ページです。
主によくある質問やその解決法(トラブルシューティング)をQ&A方式で掲載しています。


それ以外の使用方法(ヘルプ)などはメインページの目次から探してみて下さい。
>> VRM Live Viewer メインページ目次


その他の情報は、以下に掲載されています。
・既知の問題(不具合など)
・補足説明
・バージョンによる差異について
・更新履歴(アップデート・修正情報)
・背景GLTFの設定リスト(使用例)
・GLBで背景モデルを自作する



■よくある質問・トラブルシューティング

〇〇の機能はありますか?
アンチウィルスソフトにブロックされて起動できません。
Android で外部ファイルが読み込めません。
フルスクリーン画面で観たいのですが…
アプリを起動するとウィンドウサイズが極小となって利用できません。
vmd ロードでボーンとモーフのモーションが同時に読み込めません。
vmd ロードで表情とリップが同時に読み込めません。
vmd ファイルがロードできません。なぜかスルーされます。
vmd によっては足がおかしな方向に曲がってしまいます。
カメラモーション(vmd) はどうやって読み込むんですか?
VRM を読み込もうとすると「fail to create avatar」と出て、ロードに失敗します。
VRM が想定していた表示と違います。メッシュが破綻してたり、テクスチャの表示がおかしかったりします。
ポストエフェクトの一部の機能が使えません。
アプリでポストエフェクトを使ったとき、他のツールなどで正しく表示されないことがあります。
プリセット素材で商用利用できますか?
THE SEED ON LINE と連携しないのですか?
お金を払いたいんですが、無料版しかないのですか?



[Q] 〇〇の機能はありますか?

[A] 全ての機能のヘルプがメインページに掲載されています。こちらのページ内を検索してみて下さい。

VRM Live Viewer メインページ目次



[Q] アンチウィルスソフトにブロックされて起動できません。

[A] アンチウィルスはその定義や方式によって誤認識する場合があります。特に Unity製ゲーム等ではそのライブラリに含まれている dll 等などが誤認識される例がよくあります(有名ゲームが Avast でウィルス認定されるということが昔からある)。
 その場合はアンチウィルスソフトの「除外ファイル」(「無視ファイル」などソフトによって表記は異なる)等、ウィルススキャン対象から外して下さい。

 ちなみに VRM Live Viewer は基本的にローカル機能ばかりで、ネット接続する機能は VRoidHub連携のみです(pixiv公式のSDK利用)。またアプリ本体は完全個人開発のため、ローカルビルドのみです(UnityエディタからローカルHDDに直接クリーンアップビルドのみ)。配布も個人用の GoogleDrive と BOOTH のみなので、ウィルス混入する可能性は極めて低いです(逆に言えば、それ以外で配布されているものがあった場合は注意して下さい)。



[Q] Android で外部ファイルが読み込めません。

[A] Android ではファイルのアクセス方法によって結果が異なることがあります。こちらの注意点を確認して下さい。また、アプリのベースとなっている Unity のバージョンによって、バンドルされている Android SDK のバージョンが異なるため、ファイルのアクセス権などの挙動が異なることがあります(この辺りはアプリで制御しているわけでなく、Android OS と SDK の仕様に依存されます)。

 また Android 10 (11) 以降、セキュリティ強化の仕様変更で、外部ファイルが読み込めない仕様が強化され、OSレベルでアクセス拒否される場合があります(Android はアプリごとにアクセス権があり、自身のアプリが作成したファイルしかアクセスできない仕様があります。Android 10 (11) 以降はそれが強化されているようです)。この辺りの仕様は機種・環境依存もあるようで、対処法が端末ごとに異なる場合があります(同じ Android 10 でも使える機種とそうでない機種があるようです)。自身の機種を含めてググってみて下さい(たぶん、ファイルを共有できるフォルダを作ってそこに置くなど、アクセス権が緩い場所なら使えるのだと思う)。

Android 11で画像やデータが消えた、アクセスできない、の原因はアクセス権限の変更、対処法アリ



[Q] フルスクリーン画面で観たいのですが…

[A] 「設定>画面の設定」から、フルスクリーン/ウィンドウモードの切り替えができます(PC版のみ)。また [F12] キーがショートカットキーとなっており、押すたびにモードの切り替えができます。



[Q] アプリを起動するとウィンドウサイズが極小となって利用できません。

[A] モニタ依存の不具合(?)のようです。起動時のウィンドウサイズは Unity 依存の機能であり、アプリで制御できません(恐らく相性・仕様により、起動時に解像度が取得できないモニタがあるのだと思う)。
 この現象が出た場合は、[F12] キーを押してみて下さい。PC版にはショートカット機能があり、[F12] がフルスクリーンとウィンドウモードの切り替えになってます。フルスクリーンのまま利用して下さい(次回もフルスクリーンで起動します)。



[Q] vmd ロードでボーンとモーフのモーションが同時に読み込めません。

[A] vmd で表情を追加ロードしたい場合は、ボーンモーションを先にロードしてから表情(モーフ)モーションをロードする必要があります。逆はできません(その場合は「先にVMDモーション(ボーン)をロードする必要があります」(VMD motion (bone) must load first)のエラーが出ます)。

 また「表情のみ」と書いてある vmd にもボーンが含まれている場合もあります(よくあるのは「左目」「右目」「両目」ボーンや追加ボーン等)。その場合は対応できないボーンは無視され(ヒューマノイド標準ボーン以外のもの)、Aスタンスになることがあります。アプリでは表情はモーフデータのみで、ボーンデータには対応してません。ヒューマノイド標準ボーン以外を取り除けば利用できる場合があります。



[Q] vmd ロードで表情とリップが同時に読み込めません。

[A] 表情とリップは元々1つの「モーフデータ」です。MMD では編集を前提としてデータが配布されているため、ものによっては表情とリップを分けてあることがあります。これは作者様が編集の便宜を図って、小分けに保存してくれているだけで、vmd の仕様ではありません。「表情&リップ」のファイルを使うか、MMD上で表情とリップを統合したファイルを利用して下さい(MMDで適当なモデルに表情とリップを読み込み、「編集>表情フレームすべて選択」で vmd を保存すれば良い)。



[Q] vmd ファイルがロードできません。なぜかスルーされます。

[A] ファイルが上手く読み込めなかった場合は、ログビューでエラーが出てないか確認して下さい。エラーが出ている場合は、ファイルに何らかの原因があります。

 エラーが出てない場合は、対応できないデータや、極端にデータが少ないものは部分データとみなされ、無視されている場合があります。

 VMD データというのは「ボーン(モーション)、モーフ(表情・リップ)、カメラ、照明、セルフシャドウ、IK・モデル表示」が統合されたファイルです。読み込んでみるまで内容はわかりません(ファイル名はあくまでも人間用です)。ロードに成功した場合、ログビューに「Motion(モーション), Camera(カメラ)」のように表示されます。対応できないデータは単に無視されます(エラーは出ません)。

 ただし、MMDでは元々VMD データを編集するのが前提で配布されているため、「目のボーンのみ」「指のボーンのみ」のように一部のボーンで vmd ファイルが作られている場合があります。アプリではこういった部分データを統合する機能はないため、ヒューマノイド(人ボーン)としてデータが足りない場合は認識されません。またキーフレームが最初の1つしか入っておらず、値が0のみのようなデータも空データとみなされるため、認識されません。ポーズのように1フレームであっても人ボーンのデータがある程度入っている必要があります(誤って部分ボーンファイルをドロップしても無視するようになってるため)。



[Q] vmd によっては足がおかしな方向に曲がってしまいます。

[A] vmd のシュミレート機能はあくまで VRM 仕様で vmd モーションデータを機械的に当てたものです。MMD ではボーン構造に依存したデータで作られていることが多々有り、完全な互換ができるものではありません。特に足の破綻は顕著でデータ自体を修正しないと直せない場合もあります(これはMMDであっても同じです)。vmd 利用で問題になる現象については「既知の不具合」にもその考え方や修正法なども掲載してあるので、そちらを参照して下さい。

既知の不具合 (VMD関連)

 また有志によるVMD修正ツールも配布されています。VRMとPMXでのボーン構造の差異(主に捩れボーン、準標準ボーン等)を VRM標準のヒューマノイドボーンに統合してくれる VMDTMS、VRMとPMXモデルのボーンの初期角度の差異を軽減してくれる VMD Retarget 等が公開されています。こういった外部ツールで解消できる場合もあります。

VMDの補正ツール 紹介 (VMDTMS, VMD Retarget)



[Q] カメラモーション(vmd) はどうやって読み込むんですか?

[A] 「ファイル読込」「モーションを開く」ボタン、またはファイルドロップでも読み込めます(基本的にどこからでも読み込めます)。

 vmd ファイルというのはボーンやモーフ、カメラ等、複数の種類のモーションを含んだファイルフォーマットです。つまりは読み込んでみるまで中身はわかりません(人の目にはファイル名で判断できますが、コンピュータにはわかりません)。ロードが成功した場合は「ログビュー」で [Motion](ボーン), [Face](表情モーフ), [Camera](カメラ) 等、何のモーションを含んでいるか判断できます(対応できないものは無視されます)。



[Q] VRM を読み込もうとすると「fail to create avatar」と出て、ロードに失敗します。

[A] UniVRMでのモデル生成(Unity での Avatar生成)に失敗してます。
 これはボーン構造が認識できないというエラーで、例えば階層構造がおかしいとか(余計なTransformが入ってるとか)、必須ボーンが無い、重複してるボーン名がある、無名ボーン(空文字)がある、ヒエラルキー上の順番が不正である等の原因が考えられます。

UniVRMのヒューマノイド概要(ボーン構造)

 特に独自に装飾品等を追加したときには、同じ階層内での順番に注意して下さい。上記のドキュメント(リンク先)に『LowerLegの最初に見つかる祖先ボーンがUpperLegであるなど』とあるように、ボーンの検出は階層内で「最初に見つかる」Transform なので、追加したものを同階層の先頭に置くと上手く認識できなる可能性があります。その場合は、必須ボーン等は先頭に置き、装飾品等は最後に置いた方が無難です。



[Q] VRM が想定していた表示と違います。メッシュが破綻してたり、テクスチャの表示がおかしかったりします。

[A] VRMそのものの不具合に関しましては、正式な窓口として本家の UniVRM 開発に Issue を立てて改善して貰って下さい([New Issue]でバグ報告のテンプレがあります)。
 既にリリースされている最新バージョンでは修正されている可能性があります。最新版で確認の上、バグ報告をして下さい。

UniVRM Issue
UniVRM Release

 アプリではただ単に UniVRM から生成される VRM を動かしてるだけなので、VRM の構築(メッシュやテクスチャ、法線などの生成)は全て UniVRM の中で行われます。
 ただVRM系アプリは、それが使っているバージョンがバラバラなので、VRMLiveViewerの場合は、ヘルプ([?]アイコン)>クレジットから、使われている UniVRM のバージョンを確認して下さい。

クレジット (UniVRM のバージョンを確認)

 なお「画面の設定」でグラフィック品質が低い場合、メッシュは破綻しやすくなります。なるべく [Ultra] (最高品質) で確認して下さい(※高品質ほどハードウェアの負荷が上がるので注意して下さい)。

画面の設定



[Q] ポストエフェクトの一部の機能が使えません。

[A] 同梱の「ReadMe_ポストエフェクト機能について.txt」やヘルプの冒頭にも記載してありますが、ポストエフェクトは主に GPU の機能を使うものもあり、必要なシェーダモデルや深度テクスチャ、コンピュートシェーダをサポートしてないハードウェアでは利用できません(特にスマホではハードウェアの性能上、対応できない場合もあります=基本的にポストエフェクト機能はハイエンド機器または性能が高めのミドルレンジ向けのため。全てのハードウェアでの利用が保証されているわけではありません)。この場合は対応しているハードウェアを使う以外無いのでご了承下さい。



[Q] アプリでポストエフェクトを使ったとき、他のツールなどで正しく表示されないことがあります。

[A] VRMLiveViewer では公式のパッケージ以外の機能は使ってません。他のツールの独自機能については対応できないので、ググるなどして情報を集めて下さい。
 なお、ポストエフェクトは GPU の機能を使う場合も多く、それは他のアプリでも同様です。複数のアプリで利用した場合、競合やリソースの取り合い、2重に効果がかかるなどの現象も考えられます。その場合はどちらかのポストエフェクトをオフにするなどしてみて下さい。



[Q] プリセット素材で商用利用できますか?

[A] 基本的に商用利用は避けた方が無難ですが、利用方法により商用利用の範囲とならない場合もあります。
プリセットに関しては、公式で配布されている素材を利用させて頂いているだけなので、詳しい内容・利用方法は以下の公式サイトで確認して下さい。

(ユニティちゃん:CRS, Unite In The Sky 関連)
ユニティちゃん FAQ
ユニティちゃんライセンス条項

(ミライ小町:Mirai 関連)
ご利用にあたって
※『非商用にかぎり二次創作にご利用いただけます』とあるので、全面的に商用利用はできません。

 どちらでも Twiiter のような SNS での投稿は基本的に問題ありません。youtube やニコ動などの動画配信サイトではクレジットを表記した方が良いでしょう。
 「ユニティちゃん」(CRS) の場合は公式で色々利用例が書かれているので、確認して下さい。基本的には『前年度の年商が1000万円以下の個人および団体の場合、UCLで許諾されます』とあるように、UCL表記で許諾される場合が多いようです。特殊な使い方など判断できない場合はお問い合わせ等してみて下さい(私は素材の権利者ではないので、最終的な判断は下せません)。

 「Plane」「Floating」「Crystal Stage」ステージなどは単なる Unity アセットのため、商用利用は問題ありません。ただし、一般配布されている素材をロードして利用する場合は、その利用規約に従う必要があります。基本的に無料で配布されている素材は商用利用禁止が多いので注意して下さい(必要なら、各作者様に問い合わせて下さい)。



[Q] THE SEED ON LINE と連携しないのですか?

[A] TSO には 2019/7 と 2020/3 に2度ほど問い合わせてますが、どちらも『現在は提携企業と一部の人のみであり、一般向けSDKは開発中』との事でした。しかしもうそれから数年経っています。その間の VRoidHubの連携アプリ一覧TSOの連携アプリ一覧 を見てみれば一目瞭然ですが、恐らくTSOは関連企業・関係者のみと考えた方が良いでしょう。

 私自身も現在のバージョンでは機能が複雑化し、複数のSDKの管理は手に負えないと考えています(SDKで仕様変更があると、本体も仕様変更を余儀なくされ、それが複数あると、アプリ自体の開発が滞るほど時間を取られることがあるため=v2.xがマイナーバージョン1桁で終了し、数ヶ月に渡りv3α→v3.x正式版となったのはそのため)。なので、これ以上手を広げない可能性が高いです。



[Q] お金を払いたいんですが、無料版しかないのですか?

[A] 元々趣味・遊び・実験的に作ったアプリであったのと、プリセット素材に「ユニティちゃん」(Unity Technology Japan)や「ミライ小町」(Bandai Namco Research)のアセットを含んでいます。これらの素材は基本的に商用利用は禁止です(正確にはユニティちゃんアセットの場合はオフィシャルライセンスで商用利用もできます。また使い方により、一定以上の年商額を満たさない場合、UCL表記で許諾されます)。
 対価を要求する行為・煽り等は規約違反と疑われる可能性があるため有料販売はしません。金額が要求されている場合は詐欺なので注意して下さい(以前 BOOTH に虚偽の商品が販売されていたことがあります。値段が付いている(= \0 でない)場合は購入しないで下さい)。







(関連記事)
【VRMLiveViewer】VRM(VRoid)をライブステージで踊らせるアプリを作ってみた
【VRMLiveViewer】補足説明
【VRMLiveViewer】バージョンによる差異について
【VRMLiveViewer】更新履歴(アップデート・修正情報)
【VRMLiveViewer】背景GLTFの設定リスト(使用例)
【VRMLiveViewer】GLBで背景モデルを自作する
【VRMLiveViewer】GLTF モデルに影が付くように修正して、アプリで利用する
【VRMLiveViewer】魔法陣の床を作る
【VRMLiveViewer】VRoid の衣装を発光させる


category: VRMLiveViewer

thread: ソフトウェア開発

janre: コンピュータ

tag: VRMLiveViewer  トラブルシューティング 
tb: 0   cm: --

【VRMLiveViewer】VRoid の衣装を発光させる  


 あくまで現時点の VRoidStudio v1.4.2 でのやり方となるが、衣装の基本色・かげ色以外のマテリアルの設定(シェーダーカラー)の方法が見つからなかったので、Unity と UniVRM を使って VRoid を発光させる方法をやってみよう。もし、今後のバージョンアップで発光の設定が付いた場合は置き換えて欲しい。

 ちなみにマテリアルの発光(Emission) の設定は UniVRM 0.79 以降であれば使える。VRM Live Viewer の場合は v3.0α 以降となる。アプリで使っている UniVRM のバージョンを知りたい場合は「ヘルプ>クレジット」で使ってるバージョンが出てくるので、それ以降のものなら問題無い。

 今回は Hula Flat Works さんの サイバーウェア(V1.0~) を利用させて貰い、その方法を学習しよう。

 もちろん他者の素材を利用する際には利用規約を確認し、その範囲内での利用に留めて欲しい。サイバーウェアの利用規約によると『データ改変は可ですが、改変したものを再配布・販売は禁止です。』とあるので、自分用として遊ぶだけなら問題無いだろう。もちろん再配布等はしてはいけない。

 できれば、製作者のモチベに繋がるので、支援などもしてあげよう。お店用のタグなどがあれば付けてあげたり、お店を宣伝してあげるのも良い。ご厚意とはいえ、無料で貰いっぱなしというのもあまり宜しくない(笑)。

 また至極当然だが、無料配布されているものにあれこれ要望押し付けたり・文句言ったりするのもやめよう。少し考えてみればわかるが、企業や商売でやってるならともかく、それらは業務として対価を貰ってるわけではない。個人の趣味だったり楽しみでやってたりするものも多いのだ。顔が見えない分忘れがちだが、自分が欲しいという理由で赤の他人に無料奉仕を要求し、その貴重な創作活動の時間を奪うのは最も良くない。クリエーターには伸び伸びと自由に創作活動して貰うのが一番良い(もちろん、本人が意見・要望を公募してるのなら別だが)。

※素材・クレジットはリプ欄を参照


 ここでは Unity 自体触ったことない人でもできるように細かく書いているので、簡単過ぎる人は必要な部分だけで十分だと思う。実際には以前の魔法陣の作り方とやり方はあまり変わらない。考え方だけわかれば、色々応用できるだろう。


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



■発光する部分だけのテクスチャを作る

 まずは、Hula Flat Works さんの サイバーウェア(V1.0~) をダウンロードさせて頂こう。zip を解凍すると、衣装のテクスチャや .vroid ファイル等が入っている。



 画像の加工・編集はテーマから外れるので割愛するが、ここではテクスチャを発光する部分と通常部分に分離しよう。今の VRoid Studio だと色々なパーツが重ね着できるが、最終的に VRM にエクスポートしたとき、マテリアルが統合されて1つになってしまうパーツもあるので、この例での場合、トップス(LongCoat(ShirtCollar)) と靴(ChunkySoleBoots) が上手く行くようだ。インナーや靴下など、肌テクスチャに統合される部分は分離しても意味が無い(肌を発光させるなら別だが(笑))。

※VRoidStudio の重ね着を使わない例としては(VRoidStudioで着せ替えをせず、全てUnity等で手動設定するなら)、光る部分を白、それ以外を黒で塗りつぶしたマスクを使う方法もある。マスクを使うなら「Unity でマテリアルの発光を設定する」まで飛ばしても良い。

 以下は分離する前と、分離した後を VRoid Studio で読み込んだ例である。最終的にこんな感じになれば良い。単に光らせたい部分をくり抜いただけである。ただ、テクスチャサイズは元と同じでないとならないので注意(重ねたとき、ズレたりしてしまうため)。

●元のテクスチャ(分離前) [LongCoat(ShirtCollar)]

●テクスチャ分離後(発光しない部分)

●テクスチャ分離後(発光する部分)




■VRoid Studio で発光部分を重ね着する

 次に発光する部分と通常部分のテクスチャを VRoid Studio で重ね着しよう。重ね着機能自体については公式にチュートリアルがあるので、使ったことない場合はそちらを参照して欲しい。

重ね着機能について (公式チュートリアル)

 今回の Hula Flat Works さんの サイバーウェア(V1.0~) には .vroid ファイルも添付されているので、ここではこれを利用させて貰おう。VRoid Studio の最初の画面から「開く」でファイルを開こう。

1. .vroid ファイルを開いたら「衣装>トップス」に移動しよう。「カスタム」では読み込んだ衣装が表示されてると思うが、右にある「カスタマイズ>テクスチャを編集」を開こう。



2. 開いたら「デフォルト画像」にオリジナルの画像が設定されているので、この上で右クリックし、メニューからインポートを選択しよう。



3. 最初にインポートするのは先ほど分離したテクスチャで通常部分(光らない)の方にする。読み込んだら、光る部分が穴状になってればOKだ。



4. 次に「テンプレートを追加」ボタンを押し「ロングコート(スタンド)」を追加しよう。ちなみにテンプレはこの衣装の zip に同梱されている「parame.jpg」にも説明がある(親切!)。ここでは添付の .vroid ファイルを使ったが、手動で全て設定・カスタマイズするときは参考にすると良いだろう。



5. テンプレを追加したら、最初のテクスチャと同じように「デフォルト画像」を右クリックし、インポートを選択しよう。もちろん、次にインポートするのは光る部分のテクスチャである。



6. 光る部分をインポートしたら、プレビューで綺麗に重なってればOKだ。細かい設定は好きにやって欲しいが、とりあえず必要なことはこれで完了だ。



7. 編集を終了する際には、最初の1回目は「新規アイテムとして保存」の方が安全だろう。次に編集する場合は上書きでも良い。



8. 靴もやり方は同じである。同じようにオリジナルの .vroid データから靴を選択し、分離した発光する部分と通常部分を重ね着させよう。テンプレは「厚底ブーツ」と解説(parame.jpg)にある。編集したら新規アイテムとして保存しておけば、自由に色々なキャラに当てられる。各パーツの「カスタム」から全身に衣装を当てよう。



 ここまでで VRoid Studio での編集は完了だ。右上のボタンから「VRMエクスポート」して .vrm ファイルを作ろう。現バージョン(1.4.2) ではマテリアルの発光(Emission)の設定は見当たらないので、以降は Unity での編集となる。





■Unity でマテリアルの発光を設定する

 ここからは Unity と UniVRM (v0.79 以降) での編集となる。インストールなどは公式や過去記事にあるので参考にして欲しい。

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

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

1. まずは先ほど作った .vrm をメニューから「VRM0>Import」(※バージョンによって表記が違う場合有り)でインポートしよう。保存先を聞かれるので、適当に新しいフォルダを作って指定した方が良いだろう。インポートが完了すれば、指定フォルダにプレファブができる。




2. プレファブができたら、ヒエラルキーにドラッグドロップしよう。今回は発光を確認するためにも、ライトを暗くした方がわかりやすいと思う。「Directional Light」をクリックしたら、インスペクタで「Transform>Rotation>X」を 0 (真っ暗にしたいなら -90)、「Light>Intensity」を 0 にすると良い。




3. 衣装のマテリアルはおおよぞ「Body」にあてられてるので、ヒエラルキーで階層を開き、インスペクタで「~CLOTH_02~」となってるものをクリックしてみよう。Project ビューでマテリアルが指し示されるので、クリックするとマテリアルの設定が表示される。なお、「~CLOTH_01~」が VRoid Studio でテクスチャ編集したときの光らない部分、「~CLOTH_02~」が光る部分(レイヤー順)となるようだ。なので、今回は「~CLOTH_02~」を編集することになる。



4. まずは「~Tops_01_CLOTH_02~」を編集してみよう。マテリアルをクリックしてインスペクタが表示されたら、「Emission」の項目に注目する。最初は真っ黒になってると思うが、[HDR] 部分をクリックしてカラーピッカーが表示されたら、発光の色を設定する。ここではシアンにして、Intensity (輝度の強さ) を 2.5 にしてるが、任意で良い(ブルームで発光するには 1 以上が良い。また HDR Color ピッカーは2回目以降開くと、R,G,B と Intensity の値が変わってたりするが、気にしなくて良い)。



5. まだこの状態だと変化はないと思うが、次に Emission のすぐ横にある小さな ○ をクリックしよう。クリックすると最初は「Shader_NoneBlack」があてられてると思うが、これを「None」(外す) にする。すると、Scene ビューで発光部分に色が付いたハズだ(マスクを使う場合は、ここに当てる)。




6. 同じ様に靴「~Shoes_01_CLOTH_02~」もやってみよう。また「~Bottom_01_CLOTH~」(ボトムズ)は分離するまでもなく、はじめから発光したい部分だけのテクスチャなので(元画像は「Pants.png」)、そのままマテリアルを同様に設定する。すると大体の部分は色が付いたハズだ(インナーなど肌テクスチャと統合されている部分は分離されないので、この方法ではできない → 必要ならマスクを使うのもアリ=単色ならテクスチャ分離しないで全てマスクでも可。ただし VRoidStudio で着せ替えはできないので、全て Unity や Blender 等で手動設定する必要がある。人によってはマスクの方が簡単かも)。




7. ここまでで Unity での編集は完了だ。あとはヒエラルキーでプレファブ(VRM)のルートを選択して、メニューから「VRM0>Export UniVRM-0.XX.X」(X はバージョン)を実行して、.vrm として再エクスポートすれば完了だ。



 あとはエクスポートした .vrm を VRM Live Viewer (※v3.1 以降) にドロップして、[CRS FX] ステージで確かめて欲しい。発光に必要なのは「ポストエフェクト>ブルーム」だ。これをオンにして、強さを 1 以上に上げれば、他のステージや自作ステージでも使える。パラメータの意味などはこちらを参考にして欲しい。

ポストエフェクト - ブルーム




 今回は発光の設定を Unity でやってしまったが、考え方がわかれば、たぶん Blender でも同様のことができるだろう。その辺は未検証なので、自分で試してみて欲しい。

 また、目を光らせたいときも同じ考え方でできる。ただ、白は輝きが強くなる傾向があるので、輝度を弱めにしておいた方が良いみたいだ(白目は Emission の Intensity = 0 でも良い)。また輝きはライトの強さにも影響されるので、明るい背景で使うときは輝度に注意しよう。









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


category: VRMLiveViewer

thread: ソフトウェア開発

janre: コンピュータ

tag: VRMLiveViewer  VRoid  VRoidStudio  Unityリファレンス 
tb: 0   cm: --

【VRMLiveViewer】魔法陣の床を作る  


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

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

♪[A]ddiction
モーション:hino 様 [ニコ動]
振付:足太ぺんた 様 [ニコ動]
楽曲:GigaReol×EVO+ 様 (※無音) [ニコ動]
カメラ:永远赤红的幼月 様 [bilibili]
背景動画:音街ウナ公式


 ここでは 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」を3つのレイヤーに分離したが、デモに使ってる魔法陣は「MagicCircle_RuneAMN_20141019」の真ん中にある(☆)を取り出して、4つ目として、適当にリサイズして中央に置いている。


●最後の(☆)は MagicCircle_RuneAMN_20141019 から


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


●レイヤーを複製して、ぼかした画像を重ねるだけで良い


7. ぼかしを重ねたら、それぞれの円や図形ごとに .png で保存する(この例では4つ)。「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)が入っている。ヒエラルキーで階層を開いて貰えばわかるが、構造としては4つの 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] の3要素となる)。他の詳しい仕様は以下を参考にして欲しい。

アニメーション (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)を変えれば色を変えられるので、1つ作るだけで済み、ちょっとお得だ(笑)。

VRMLiveViewer用 ライト設定集

♪[A]ddiction
モーション:hino 様 [ニコ動]
振付:足太ぺんた 様 [ニコ動]
楽曲:GigaReol×EVO+ 様 (※無音) [ニコ動]
カメラ:永远赤红的幼月 様 [bilibili]
背景動画:音街ウナ公式


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

エミッシブマテリアル






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


category: VRMLiveViewer

thread: ソフトウェア開発

janre: コンピュータ

tag: VRMLiveViewer  背景3Dモデル  GLB 
tb: 0   cm: --


プロフィール

Social

検索フォーム

全記事一覧

カテゴリ

ユーザータグ

最新記事

リンク

PR

▲ Pagetop