Appearance
第11回 描画バッファとポストエフェクト
前回: 第10回 シェーダー連携1 / 次回: 第12回 VFX Graph入門
今回の授業内容
- 描画バッファとポストプロセスの役割を理解する
- URPのVolumeでBloomを設定する
Scene Colorで描画済みの画面色を取得する- Screen UVをずらして屈折や歪みを作る
- 既存のエフェクトへ発光または歪みを追加して比較する
描画中の情報を保持する描画バッファ
ゲームの画面は、描画結果がそのまま最終の画像として完成するわけではありません
カメラから見たオブジェクトの色、深度、法線などが、描画の途中結果としてバッファに書き込まれ、最終的に画面に表示されます
そのうちの画面の色を保持するバッファが Color Buffer です
描画中、あるいは描画の最後に Color Buffer に書き込まれた色情報を読み直すことができれば、画面の色を再利用して歪ませたり、強い光をにじませるブルームなどの表現が可能になります
これがポストプロセスやスクリーンスペース表現の基本の仕組みです
ポストプロセスとは
ポストプロセスの適用例
単純なポリゴン描写では難しい表現を実現できる
Post Processing は後処理の意味です
エフェクトでは描画の最後に画面全体にかける画像の加工処理を指します
写真や動画編集で、撮影後の画像に色補正やぼかしを加える処理と同じく、ゲーム画面の最終的な色味や明るさを加工するために使います
Unity は Post Processing Stack というパッケージを提供しており、標準機能でも様々なポストプロセスを利用できます
ポストプロセスの代表例
| 処理 | 効果 |
|---|---|
| Bloom | 強い光をにじませて強調する |
| Color Adjustments | 画面の色を加工する |
| Vignette | 視界の周囲を暗く、または明るくする |
| Depth of Field | 焦点から外れた範囲をぼかす |
| Motion Blur | 高速で動く物体をぼかす |
描画結果を加工するため、必ずしも光学的に正しい表現ではありませんが、ゲームの演出としては有効な手法です
Unity でのポストプロセスの利用方法
ポストエフェクト有効化の指定Post Processing をチェックする
ポストプロセス利用の際は、カメラ側で Post Processing を有効にすることと、シーンへの Volume の配置が必要です
Volume
Unity の URP では、ポストプロセスの多くを Volume で設定します
Volume には Profile を割り当て、その中に Bloom などの適用エフェクトを追加します
Global と Local の 2 種類の Volume があり、用途に応じて使い分けます
| ボリューム | 説明 |
|---|---|
| Global Volume | シーン全体に同じポストプロセス設定を適用します |
| Local Volume | 特定の範囲に入ったときだけ設定を変える用途に利用します |
ポストプロセスは画面全体へ影響する
Bloom のようなポストプロセスは、基本的に画面全体の描画結果を見て処理します。
そのため、単体のエフェクトのみではなく、背景、UI、他のエフェクトなども同時に加工される場合があります。
特定の対象だけに影響させたい場合は、描画段階の分離やカスタムレンダーパスが必要です
入門段階では複雑になりやすいため、今回の授業では扱いません
また、画面全体を強く加工すると、派手になりますが、情報が読みにくくなる場合もあります
エフェクトは単体の表現力を追求してしまいがちですが、ポストエフェクトの影響下では必要以上の効果が出てしまう場合もあります
エフェクトとゲーム画面全体のバランスを意識して調整することが重要です
シェーダーからのスクリーンスペース表現
ポストエフェクトは、描画された画面全体を加工する手法ですが、通常のシェーダーからも描画中の画面色を読むことができます
描画中の画面色を読み込むことで、スクリーンスペース表現と呼ばれる、画面上の位置を基準にした表現が可能になります
スクリーンスペース表現では、オブジェクトではなく画面上の座標を使います
Scene Color：描画済みの画面色を取得する
Shader Graph の Scene Color ノードは、すでに描画された画面の色を取得するためのノードです
通常のテクスチャーサンプリングと同じように、UV 座標を指定して画面色を取得できます
UV をずらしてサンプリングすれば画面をゆがませる表現ができますし、取得した色に干渉して色味を変更するような表現も可能です
画面全体を扱うポストエフェクトとは描画の際の順序と影響範囲が異なるだけで、基本的な動作の原理は同じです
Scene Color を使う準備：URP の Opaque Texture を有効にする
Opaque Texture設定の例
Scene Color ノードを使うには、URP Asset の Opaque Texture が必要になりますProject Settings > Graphics または URP Asset を確認し、必要であれば Opaque Texture を有効にしてください
Opaque Texture は描画済みの不透明オブジェクトの色を保持するためのテクスチャで、透明オブジェクトの描画の前にキャプチャーされます
テクスチャーの保持が負担になるため、必要な場合のみ有効にすることが推奨されます
屈折と歪みの表現
画面色をずらして読み直す
Screen UV
NoiseまたはNormal Mapを加える
ずれたUV
ずれたUV
画面色をサンプリングする
Scene Color
Scene Color
サンプリング結果を出力する
歪んだ背景
歪み表現は背景画像そのものを変形するわけではありません
画面に描かれた色を、少しずれた座標で読みこみ描きなおすことで、背景が歪んでいるように見せる表現です
ノイズや法線マップを使って UV をずらすことで、屈折や陽炎のような揺らぎのある歪み表現が可能になります
Screen UVを法線方向へずらした屈折表現
屈折シェーダーの適用例
モデルの法線をスクリーン座標に加算して Scene Color をサンプリングすることで、レンズを通したように見える
URP Unlit Shader Graphを作成する- Surface を
Transparentに設定する Screen Positionノードを追加し、Screen UV として使うViewスペースの法線を加工し、画面のずれとして加算する- 得られた
Screen UV + ずれをScene Colorの UV に接続する - 出力色を Base Color に接続する
Screen UVへノイズを加えた歪み表現
Screen Positionにノイズを加えて Scene Color をサンプリングすることで、揺らぎのある歪み表現が可能になる
Screen UV にノイズによる変化を加えることで、陽炎のような揺らぎの表現が可能になります
斬撃に歪みを加える
歪みを加えたScreen Colorを斬撃のアルファで補間して軌跡をゆがませている
先の授業で作った斬撃エフェクトにわずかな追加で歪みを加えることができます
ここでは斬撃エフェクトのアルファ値で歪ませた Scene Color を補間することで、斬撃の形に沿った歪み表現を作ります
Screen Colorと斬撃の色の補間になるため、アルファ値は設定しなくても実質半透明の表現になります
実習：既存のエフェクトに歪みまたは発光を追加する
前回作成した斬撃エフェクト、またはこれまでに作成したエフェクトを使います
新しくヒットエフェクトを作る必要はありません
次のどちらか一方を選んで、描画バッファやポストプロセスを利用した表現を追加してください
Scene Colorをずらして読み、背景が歪んで見える表現を追加するEmissionと Bloom を使い、エフェクトの明るい部分を発光させる
両方を組み合わせても構いません
まずは既存のエフェクトに小さな変更を加え、画面上で効果を確認することを優先してください
授業内課題：描画バッファまたはポストプロセスを利用して、既存のエフェクトを加工してください
Scene Colorによる歪み、またはEmissionとBloomによる発光を使います
完成条件
- 前回作成した斬撃、またはこれまでに作成したエフェクトを使っている
Scene Colorによる歪み、またはEmissionと Bloom による発光を追加している- 効果の強さ、歪みの量、発光色などを調整できる Shader Graph のプロパティを1つ以上用意している
- 元の状態と比べて、追加した効果を画面上で確認できる
- スクリーンショットまたは短い動画で提出する
確認観点：どのバッファをどう使っているか説明する
- Scene Color を使った場合、どの部分で画面色を読み直しているか
- Emission と Bloom を使った場合、どの部分が高輝度になっているか
- Bloom が強すぎて形が消えていないか
- 歪みが背景を壊しすぎていないか
- 用意したプロパティで効果を調整できるか
- 元のエフェクトの形や動きが読み取れるか
よくある問題：原因を切り分ける
| 問題 | 確認する場所 |
|---|---|
| Bloom が出ない | Volume、カメラ、URP の HDR、Emission 強度 |
| 歪みが出ない | Opaque Texture、Scene Color、透明設定、描画順 |
| 斬撃が見えない | Alpha、Blend、Sorting、メッシュの向き |
| 画面が白く飛ぶ | Emission、Bloom Intensity、Additive の重ねすぎ |
| 重い | 透明エフェクトの重なり、ノイズ数、同時発生数 |
余裕があれば：ヒットエフェクトとして発展させる
基本課題が完成し、時間に余裕がある場合は、作成した歪みや発光を命中時の演出に利用してみましょう
ここからは追加課題のため、提出に必須ではありません
- 命中した位置に、短時間だけ表示されるメッシュやパーティクルを配置する
MaterialPropertyBlockやスクリプトから Shader Graph のプロパティを操作するAnimationCurveを使って、出現から消滅までの強さを変化させる- ヒット対象を一瞬だけ明るくするフラッシュを追加する
- 攻撃属性ごとに色、歪み、火花の種類を変える
- カメラシェイクや短いヒットストップを追加する
- 命中時と空振り時でエフェクトの量を変える
提出時の説明：調整の意図を添えてください
- どのエフェクトを元にしたか
- Scene Color、Emission、Bloom のどれを使ったか
- 追加した Shader Graph プロパティで何を調整できるか
- 歪みや発光の強さをどのように調整したか
- 改善したい点
追加課題にも取り組んだ場合は、ヒットした瞬間をどのような方法で強調したかも説明してください
まとめ
- ポストプロセスは、描画後の画面全体を加工する処理です
- URP では、Volume に Profile を割り当てて Bloom などのポストプロセスを設定します
Scene Colorを使うと、描画済みの不透明オブジェクトの色をシェーダーから取得できます- Screen UV を法線やノイズでずらして
Scene Colorを読み直すと、屈折や揺らぎを表現できます - 斬撃のアルファ値を使って色を補間すると、斬撃の形に沿った部分だけに歪みを加えられます
- 画面全体への影響と描画順を意識し、元のエフェクトが読み取れる強さに調整することが重要です