ヽ｜∵｜ゝ(Fantom) の開発blog？

【Unity】【エディタ拡張】Game View の解像度を取得する

2023/09/02 Sat [edit]

　ランタイム時の画面解像度は (Screen.width, Screen.height) で取得できるのだが、エディタスクリプト上で Screen で画面解像度を取得すると、よくわからない値になる。

●Gameビューの解像度設定と Screen解像度が合ってない

　調べてみたら、UnityStats.screenRes というプロパティ(Unityマニュアルではなぜか見つからない)で取得できるとあったので、いつものように静的な関数として定義しておくと便利だと思った。簡単なサンプルを載せておこう。

(※) Unity 2020.3.34f1 / Windows11(x64) で確認

●Game View の解像度を取得する (戻値：Vector2Int 型)

using UnityEngine;

#if UNITY_EDITOR
using UnityEditor;

public static partial class Utils  //※クラス名は任意
{
    /// <summary>
    /// Game View の解像度を取得する (戻値：Vector2Int 型)
    /// 2023/09/02 Fantom
    /// http://fantom1x.blog130.fc2.com/blog-entry-431.html
    /// </summary>
    /// <returns>x = width, y = height</returns>
    public static Vector2Int GetGameViewResolution()
    {
        var res = UnityStats.screenRes.Split('x');  //"1920x1080" 等
        return new Vector2Int(int.Parse(res[0]), int.Parse(res[1]));
    }
}
#endif

●エディタスクリプトからの使用例 (戻値：Vector2Int 型)

using UnityEngine;
using UnityEditor;

[CustomEditor(typeof(GameViweResoTest))]  //クラス名は任意(ヒエラルキーにアタッチ)
public class GameViweResoTestEditor : Editor  //クラス名は任意(※Editorフォルダに置く)
{
    public override void OnInspectorGUI()
    {
        base.OnInspectorGUI();

        GUILayout.Space(15);

        if (GUILayout.Button("GameViewResolution"))
        {
            Debug.Log($"Screen: {Screen.width}x{Screen.height}");
            var reso = Utils.GetGameViewResolution();
            Debug.Log($"GameViewResolution: {reso.x}x{reso.y}");
        }

        GUILayout.Space(15);
    }
}

　戻値に Vector2Int を使ってるが、x が width, y が height となる。

　ここでは MonoBehaviour を継承した適当なスクリプト（GameViweResoTest.cs）を作成し、ヒエラルキーにアタッチしている。
　1280x720, 1920x1080 等、定番の解像度を使ってるが、「Free Aspect」の状態でも取得できるようだ。そのときに 425x776 など、実際の画面上の解像度(?)になるらしい。

●インスペクタのボタンを押すとGameビューの解像度が取得される

●結果例 (GameView: 4K UHD)

Screen: 425x776
GameViewResolution: 3840x2160
GameViewResolution (Tuple): 3840x2160

　現在の Unityバージョン(掲載時点：Unity2020)だと C# も Tuple 型が使えるので(必要なら、.Net 4.x にする)、戻値を Tuple 型にしておくと、少しばかり簡潔になるので良いかもしれない。

●Game View の解像度を取得する (戻値：Tuple 型)

using UnityEngine;

#if UNITY_EDITOR
using UnityEditor;

public static partial class Utils  //※クラス名は任意
{
    /// <summary>
    /// Game View の解像度を取得する (戻値：Tuple 型)
    /// 2023/09/02 Fantom
    /// http://fantom1x.blog130.fc2.com/blog-entry-431.html
    /// </summary>
    /// <returns>w = width, h = height</returns>
    public static (int w, int h) GetGameViewResolutionAsTuple()
    {
        var res = UnityStats.screenRes.Split('x');  //"1920x1080" 等
        return (int.Parse(res[0]), int.Parse(res[1]));
    }
}
#endif

●エディタスクリプトからの使用例 (戻値：Tuple 型)

using UnityEngine;
using UnityEditor;

[CustomEditor(typeof(GameViweResoTest))]  //クラス名は任意(ヒエラルキーにアタッチ)
public class GameViweResoTestEditor : Editor  //クラス名は任意(※Editorフォルダに置く)
{
    public override void OnInspectorGUI()
    {
        base.OnInspectorGUI();

        GUILayout.Space(15);

        if (GUILayout.Button("GameViewResolution"))
        {
            Debug.Log($"Screen: {Screen.width}x{Screen.height}");
            var (w, h) = Utils.GetGameViewResolutionAsTuple();
            Debug.Log($"GameViewResolution (Tuple): {w}x{h}");
        }

        GUILayout.Space(15);
    }
}

　注意点として、エディタスクリプトは任意の「Editor」フォルダ内に入れて使うか、プリプロセッサ（#if UNITY_EDITOR～#endif）で囲んで使う（通常はヒエラルキーでアタッチするスクリプトはプリプロセッサで囲み、エディタのみ使うものは Editor フォルダに入れるのが簡単）。これらは Unityエディタ上では使えるが、ランタイムでは使えない。あくまで開発支援用スクリプトとなる。

　自由に改造して使うと良い。

関連記事

スポンサーサイト

category: Unity

thread: ゲーム開発

janre: コンピュータ

tag: Unityライブラリ Unityリファレンスエディタ拡張

tb: 0 cm: --

【Unity】【C#】指定ワールド位置がカメラに映っているか調べる

2023/08/02 Wed [edit]

　最近はチュートリアル・ノウハウ系が多かったので、久しぶりにお役たちコード(?)を書いておこう。

　まぁ、VRM Live Viewer 開発し始めてからどうしても偏ってしまうが、私も最初から知ってたわけじゃないからね。必要に応じて調べてるうちに Unity にも詳しくなったとも言える。何でも勉強するならテーマがあった方が頭に入るね。極端な話、VRM Live Viewer はオープンソースの塊で、再利用可能コードは数年間に渡って公開してるし、アルゴリズムなどもアプリ開発以前から公開してるし、全部無料で手に入るものばかりなので、誰でも作れることになる。つまり、世界中の人と条件は同じなのだ。積み重ねがどれだけ重要かがわかるね(笑)。

　それでは、さっそく今回のテーマのコードを書いてみよう。と言ってもかなり簡単なんだけどね。

●指定のワールド位置がカメラに映っているか調べる

using UnityEngine;

public static partial class Extensions  //※クラス名は任意
{
    /// <summary>
    /// カメラの Viewport 内に表示されているか？
    /// 2023/08/01 Fantom
    /// http://fantom1x.blog130.fc2.com/blog-entry-430.html
    /// </summary>
    /// <param name="cam">判定するカメラ</param>
    /// <param name="pos">対象ワールド位置(transform.position)</param>
    /// <returns></returns>
    public static bool InCamera(this Camera cam, Vector3 pos)
    {
        if (cam == null)
            return false;

        var vp = cam.WorldToViewportPoint(pos);
        return (0f <= vp.x && vp.x <= 1f && 0f <= vp.y && vp.y <= 1f);
    }
}

　Camera.WorldToViewportPoint の内容は公式マニュアル見て欲しいが、戻り値の Vector3 は翻訳すると『ビューポート空間は正規化されており、カメラに対して相対的です。カメラの左下は (0,0) です。右上は (1,1) です。Z 位置はカメラからのワールド単位です。』となっているので、要するに値が 0～1 に入ってれば、カメラのビューポートに入ってると考えて良い。

　ただ、指定位置は transform.position 等、あくまで「点」でしかないので、メッシュなどが大きい場合、中心(Pivot)は画面から外れてるが、メッシュの一部が画面に少し見えている、なんてことが起こるかもしれない。そういうときはメッシュのバウンディングボックス(Renderer.bounds)等の８隅を調べるなどすれば良いかもしれない。

　また、Unity では全ての GameObject は Transform 持ってるので、いっそ transform を引数にしたものを作っておくのも良いかもね。

●指定のワールド位置がカメラに映っているか調べる (Transform 指定)

using UnityEngine;

public static partial class Extensions  //※クラス名は任意
{
    /// <summary>
    /// カメラの Viewport 内に表示されているか？
    /// 2023/08/01 Fantom
    /// http://fantom1x.blog130.fc2.com/blog-entry-430.html
    /// </summary>
    /// <param name="cam">判定するカメラ</param>
    /// <param name="tr">対象Transform</param>
    /// <returns></returns>
    public static bool InCamera(this Camera cam, Transform tr)
    {
        if (cam == null || tr == null)
            return false;

        var vp = cam.WorldToViewportPoint(tr.position);
        return (0f <= vp.x && vp.x <= 1f && 0f <= vp.y && vp.y <= 1f);
    }
}

　まぁ、好きに改造して使って欲しい。

　今回も VRM Live Viewer で使ってる再利用可能コードの一部となる。タイトルにもある「特定位置がカメラに映っているか調べる」は、ポストエフェクトの被写界深度の自動フォーカスで「ボーン対象」の選択に使っている。ボーンの選択が無い頃はモデルの「Head」(顔の辺り)１つが対象になっていて、要するに顔が常にフォーカスされていた。しかし、カメラモーションによっては下(足)から上(顔)へ接写など、一時的に顔が画面から外れてしまうことがあったんだよね。そういうとき顔以外にもフォーカスを当てる必要があった。つまり「顔が画面から外れていれば、他の近いボーンをフォーカス対象とする」ようにしたかったんだよね。

　まぁそんなことを VRM Live Viewer リリース以来、約５年近くやってる。最近はたまに「VRM Live Viewer を github で公開しろ」とか言ってくる人もいるが、冒頭に述べたように内容的にはオープンソースの塊だったりする。それをアプリに最適化、一部都合良く手を加えて改造してるので、ほとんど汎用性は無い。汎用的にするためにアプリ依存コードを除外して、一般化すればオープンソースと同じになる(元に戻る)。なので、全然意味が無い。ブログの冒頭でも言ってるように、最初からどうやって作ったかも、使ってるオープンソースも全部書いてあるので、本当に意味を感じない。

　まぁ、言ってくる人は学生さん(?)が多い気がするが、私も学生の頃は何でもできるわけじゃなかったよ。でも四苦八苦して色々考えてたのがいい経験になったのは間違いない。最初から「答えを教えろ」(そしてコピーして作ったものを自分のものにさせろ)というのは、かなり失礼なことだと思う。前述したように「世界中の人と同じ条件で作っている」(恐らく同じVRMアプリ開発者内では最底辺の環境)ので、同じことは誰でもできる。Unity なんてお金を出せば AssetStore でいくらでも優れたアセットを導入できるからね。私は無料で配布してるので、有料アセットなど買えないのだよ。だからオープンソースと自分のこれまでの知識と技術を駆使してるだけで、特別なことはしてない。せいぜい自分なりの工夫を重ねてるだけで、何でもやって貰えるのが当たり前と思われても非常に困る（← 一時期クレクレが年間50件は超えていて頭が痛かった＝仮に１件5万～30万取れるとすると250～1500万の仕事をタダ働きすることになる。普通にサラリーマンの給料で換算しても約５年だと1500～2500万を無料で提供してるからね。これ以上仕事してタダでよこせと言われても、自分ならどうかと考えてみて欲しい）。

　経験不足は経験でしか補えないからね。私は学生時代書いたコード(C, C++)を未だに持っているが、物凄く苦労して２週間～１ヶ月くらいかけて作ったコード(システム)も、今では１日くらいで作れる。それくらい人は成長できるのだよ。答えはブログでもオープンソースでもググって大量の資料でも、今では充実してるので（昔はそんなに便利じゃなかった）、ヒントはやるから諦めないで精進しろとしか言えないのが本音なんだよね。今後はビジュアルスクリプティングでコンポーネント組み合わせるだけで作れるし、AI がコード自動生成してくれる時代も来るから、今よりもっと「自分で考える」ことができない人増えるだろうね。与えてくれるのが当たり前って考え方を捨てないと、成長はできないと思うよ。

関連記事

category: Unity

thread: ゲーム開発

janre: コンピュータ

tag: Unityライブラリ Unityリファレンス

tb: 0 cm: --

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

2023/07/02 Sun [edit]

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

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

　タイトルにもあるように今回のテーマは『アイドル(YOASOBI)推しの子OP』だ。これは私も「ジトメちゃんver」と「空雪ルミアさんver」の２つが 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再生設定」を開いて、原点(0,0,0) になってることを確認しておくことだ。カメラを使う場合は通常、原点にキャラがいること前提なので、これがずれていると１曲中ずれたままになってしまう。実はこのミスが以外と多いのだ。せっかくの動画が残念なことになってしまうので、特に注意しよう。複数に配置する場合は、センターだけは原点(0,0,0)にすると良い。

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

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

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

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

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

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