Post Processing パッケージを使って画面にエフェクトをかける

コメントする / Unity / 2021年12月9日

今回のテーマ

  • Post Processing パッケージを使って画面にエフェクトをかける

何ができるのか

Post Processing パッケージの機能を使うと、Camera コンポーネントで撮影したものをゲーム画面として表示する際に画面にエフェクトを追加することができる。これを使うことで（少ない手間で）見た目を良くすることができる。

参考資料

  1. 現場ですぐに使える！ Unity 2019逆引き大全319の極意 - 第26章 Post Processingの極意
  2. Unity デザイナーズ・バイブル - Part4　実践ツール編 06 Post Processing Stack v2によるシーンの絵作り
  3. Post Processing パッケージの公式マニュアル（英語）
  4. Post Processing Stack V2の効果をスクリプトから動的に変更する
  5. PostProcessingStack V2のパラメータをTimelineで動的に制御したい
  6. Unity ルックデヴ講座 Post Processing Stack v2編 - 各パラメータの説明がある
  7. UnityのPostProcessing機能のV2について - 各パラメータの説明がある

プロジェクトの準備

以下のようにして、Post Processing パッケージのインポートと、簡単な FPS をセットアップする。

  1. Package Manager から Post Processing と Cinemachine をインポートする
  2. Asset Store から Free LowPoly SciFi をインポートする
  3. GameDev1-4-2.unitypackage をインポートする
  4. Free LowPoly SciFi アセットに含まれている DemoScene シーンを duplicate (Ctrl+D) して、複製したシーンを開く
    • 元のシーンはバックアップとしてそのままにしておき、複製したものを使う
  5. PlayerPrefab をシーン上に配置する
    • Position (-7, 0.5, -17) がちょうどよい
  6. メニューから Cinemachine > Create Virtual Camera を選ぶ
  7. 新しく作られた Virtual Camera (CM vcam1) を以下のように設定する
  8. これで実行すると、FPS の挙動になる
    • WASD で前後左右に移動、Space でジャンプ、マウスで視点移動ができる
  9. FPS なので Camera の Field of View を 75 くらいに設定しておくと見やすくなる

エフェクトを加える

まずは以下の手順でエフェクトを加え、見た目を変えてみましょう。

  1. 空のオブジェクトを作り、名前を PostProcessing に変える
    • これにエフェクトの設定を記録していく
  2. PostProcessing オブジェクトに Post Process Volume コンポーネントを追加し、設定の Is Global にチェックを入れる
  3. 設定の Profile の右にある New をクリックして新しい Post-processing Profile アセットを作る
    • このアセット内に、エフェクトの設定が記録される
  4. Add effect... ボタンを押し、Unity > Depth of Field を選んでエフェクトを追加する
  5. Depth Of Field の設定 "All" をクリックする
  6. 次に、このエフェクトをカメラに対して有効にする作業をしていく
  7. Main Camera オブジェクトに Post Process Layer コンポーネントを追加し、設定の Layer を Default に変更する
  8. この時点でエフェクトが有効になる
  9. エフェクトのかかり具合を試すために、以下のような操作をしてみる
    • エフェクトの ON/OFF を切り替える
    • エフェクトのパラメーター Focus Distance を小さくする
    • エフェクトのパラメーター Focal Length を大きくする
    • パラメータを元に戻したい時は、Reset すれば初期値に戻る
  10. 上記のような操作をすると、画面がぼやけるはずです

まとめ

Post Processing を使ってエフェクトを追加するには、少なくとも以下が必要になる。

  1. Post Process Volume コンポーネントに Post-processing Profile アセットをアサインする
  2. Post-processing Profile アセットに対してエフェクトの設定を追加する
  3. Camera コンポーネントに依存した Post Process Layer コンポーネントに対して、レイヤーを通して Post Process Volume コンポーネントと関連付ける

補足

Depth Of Field は「被写界深度」と訳され、「焦点が合っているところ以外はぼかす」というエフェクトである。

Post Process Layer コンポーネントの Layer に対して警告が出ている。通常は対象のレイヤーを Default にはしない。Post Processing などと名付けたレイヤーを作ってそこに Post Process Volume コンポーネントを追加したオブジェクトを所属させ、Post Process Layer コンポーネントの Layer にそのレイヤーを指定する。これはパフォーマンス向上のために設定する。

各エフェクトを試してみる

各エフェクトに対する一言での説明と、効果を確認するためのパラメータ操作を示す。

Ambient Occlusion

  • 物陰を暗くすることで立体的に見える
  • Intensity を上げる

Bloom

  • 光源をにじませる
  • Intensity を上げる

エフェクトの設定は上記のようにして得られるが、これについては Material を設定するとよりはっきりとした効果が得られる。以下のようにして WHITE_LIGHT_mat というマテリアルの Emission Color の Intensity を 5 くらいに上げると、効果がはっきりと見られる。

Bloom の Intensity を 5、Emission Color の Intensity を 5 にした時の Bloom エフェクトの様子は以下のようになる。

Depth Of Field

  • カメラの焦点が合っているところ以外をぼかす
  • Focus Distance を小さくする

Screen-space Reflections

  • 反射を表現する
  • Camera コンポーネントの設定 Rendering Path を Deferred に設定し、Preset を Overkill に変更する

Material の Smoothness および Metallic を大きくするとよりはっきりとした反射が表現できる。このアセットの床・天井のマテリアルは BLACK_mat, DARK_GREY_mat, GREY_mat なので、それらを変更するとよい。

Screen-space Reflections を有効にした様子は以下のようになる。

Auto Exposure

  • 暗→明、明→暗という変化があった時に目が徐々に慣れるような効果を出す
  • Minimum (EV) を最小、Maximum (EV) を最大に設定して実行し、目の前に Intensity の大きい Point Light を急に出すことで効果が見られる

Chromatic Aberration（色収差）

  • 色をぼかす
  • Intensity を上げる

Color Grading

  • 色を補正する
  • Mode を Low Definition Range に変更し、Color Filter の色を変える

Grain

  • 古いフィルムのようにざらついた映像にする
  • Intensity を上げる

Lens Distortion

  • 魚眼レンズのように画像を歪曲する
  • Intensity を上げる

Vignette

  • 覗き穴から覗いているような効果を与える
  • Intensity を上げる

その他

Motion Blur はこのパッケージではかかりが悪くほとんど見分けがつかないが、More intense motion blur with Post Processing Stack v2? で説明されているコードの修正をすることにより、強くエフェクトをかけることができる。

Global ではない設定をする

ここまでは Post Process Volume コンポーネントの Is Global 設定をオンにしてきた。これは「カメラがどこにあってもエフェクトが有効になる」という設定である。

Post Process Volume コンポーネントの設定 Is Global をオフにして、同じオブジェクトにトリガーを設定することで、「カメラがトリガー内に入ったらエフェクトを有効にする」ことができる。

以下の手順でそれを試すことができる。

  1. PostProcessing オブジェクトを Position (-12.5, 1, -15) に移動する（角にある部屋の中央に置く）
  2. PostProcessing オブジェクトに Box Collider を追加してトリガーに設定し、Size を (5, 3, 10) に設定する
  3. 以下のような設定になる
  4. この状態でシーンを実行し、トリガーが設定された部屋に入る（カメラがトリガーと接触する）とエフェクトが有効になる
    • ここまでの設定では、「室内に入るとエフェクトが（急に）有効になる」という設定になる
  5. Post Processing Volume の Blend Distance を 5 に変更し、再度シーンを実行してエフェクトのかかり具合を確認する
    • この設定により、「カメラがトリガーから 5m 以内に入ると、徐々にエフェクトが有効になる」という設定ができる

なお、デフォルトの設定では「カメラがトリガーに入るとエフェクトが有効になる」という設定であるが、FPS 以外のゲームでは「キャラクターがトリガーに入るとエフェクトが有効になる」という設定をしたくなる。「何がトリガーに入るとエフェクトが有効になるか」は、Post Process Layer の Trigger に設定することができる。

まとめ・使い方

Post Processing を使ってエフェクトを追加するには：

  1. Post Process Volume コンポーネントに Post-processing Profile アセットをアサインする
  2. Post-processing Profile アセットに対してエフェクトの設定を追加する
  3. Camera コンポーネントに依存した Post Process Layer コンポーネントに対して、レイヤーを通して Post Process Volume コンポーネントと関連付ける
  4. グローバルな（常にエフェクトを有効にする）設定の場合は、Post Process Volume の Is Global をオンにすればよく、以降の設定は必要ない
  5. ある場所に行ったらエフェクトを有効にしたい場合は、Post Process Volume の Is Global をオフにし、トリガーを追加してエフェクトを有効にしたい範囲にトリガーを設定する
  6. カメラ以外のオブジェクトがトリガーに入った時にエフェクトを有効にしたい場合は、Post Process Layer コンポーネントの Trigger にそれを設定する
  7. エフェクトの有効・無効が徐々に切り替わるようにしたい場合は、Post Process Volume コンポーネントの Blend Distance を 0 より大きくする
  8. これらの機能を組み合わせることで、別々のエフェクトを異なるオブジェクトに設定し、重ねることもできる
    • 重ねる具合を変えたい場合は Post Process Volume コンポーネントの Weight や Priority で調整する

その他

参考になるアセット

3D Free Modular Kit アセット (13.2MB) も試してみるとよいでしょう。こちらは初めから Post-Processing を使って作られています。

こういった「環境」を作るためのアセットは、Asset Store の 3D > Environment のカテゴリにある。サイズが非常に大きかったり、環境にコライダーが追加されていないことがあったりするので注意が必要です。

おまけ

Drum というプレハブをシーンに配置し、実行して Drum を撃つと吹き飛ぶ。FPSShootController では RayCast を使って当たり判定をしているが、これは基本的な FPS の作り方のサンプルとなっている。

課題

自分が作っているゲームに Post Processing を使ってエフェクトをかけて、動画 or スクリーンショットの URL を提出せよ。

コメントする

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です