ポストプロセス・画面表現

色収差

Chromatic Aberration

色ごとの位置を少しずらしてレンズ感を出す。

6 / 10

インタラクティブデモ

デモを準備しています…

色収差

ドラッグで視点を回転、Ctrl(⌘)+ スクロールでズーム。タッチ操作は 2 本指です。

ひとことで

レンズは色(波長)ごとに光の曲がり方がわずかに違うため、赤・緑・青の像が完全には重ならず、物の輪郭に色の縁が出ます。これが色収差です。ゲームでは、描き終えた画面の赤・緑・青を少しずつずらした位置から読むことで再現し、カメラで撮ったような質感や、衝撃・めまい・異常を伝える演出に使います。

ゲームでの使いどころ

  • レンズの質感:画面の端ほどわずかに色がずれて、実写のカメラやビデオのような雰囲気になる。
  • 被弾・衝撃の演出:ダメージを受けた瞬間や爆発の近くで一瞬だけ強くし、衝撃を伝える。
  • 状態異常:毒、酩酊、幻覚、瀕死のときの揺らぐ視界。
  • グリッチ表現:映像信号の乱れ、ハッキング、ホログラム、ロボット視点の UI。

しくみ

画面の各画素で、赤・緑・青を別々の位置から読みます。

C=( S(uv+Δ).r,    S(uv).g,    S(uv−Δ).b )C = \big(\, S(\mathbf{uv} + \Delta).r,\;\; S(\mathbf{uv}).g,\;\; S(\mathbf{uv} - \Delta).b \,\big)

レンズの色収差(倍率色収差):ずらし量 Δ\Delta を画面の中心から外向きにし、中心からの距離の 2 乗に比例させます。中心はずれず、画面の端ほど大きくずれます。赤が外側へ、青が内側へずれるので、明るい物の輪郭の外側に赤、内側に青の縁が出ます。

Δ=(uv−0.5) ∥uv−0.5∥2⋅k\Delta = (\mathbf{uv} - 0.5)\,\lVert \mathbf{uv} - 0.5 \rVert^2 \cdot k

グリッチ:横の帯ごとにランダムな量だけ横にずらすと、デジタル映像の乱れのように見えます。時間とともに乱数を変えると、ちらつく乱れになります。

周辺減光(ビネット:画面の四隅を暗くする)と組み合わせると、レンズらしさがさらに増します。

実装のポイント

  • 非常に安い:3 回テクスチャを読むだけなので、他のポストプロセスの最後に組み込めます。
  • 縦横比を考慮する:横長の画面では、中心からの距離を縦横比で補正しないと、ずれ方が楕円になります。
  • 演出はパルスで:被弾の演出では、強さを一瞬だけ大きくして素早く戻すと、しつこくならずに衝撃が伝わります。

つまずきやすい点

  • かけすぎ:常に強い色収差は、画面が見づらく、目が疲れる原因になります。多くのゲームでオプションで切れるようになっています。
  • UI にかけない:テキストや UI に色収差がかかると、読みにくくなります。
  • 中心の文字や照準:照準や重要な情報は画面の中心にあることが多いので、中心がずれない方式が向いています。

デモで試すこと

  1. 「画面の隅を拡大」をオンにすると、柱やネオンの輪郭に、赤と青の色の縁が出ているのが見えます。
  2. 「ずれの大きさ」を上げると縁が太くなります。画面の中央はほとんどずれていないことも確認してください。
  3. 「被弾」を押すと、一瞬だけ色収差が強くなり、衝撃の演出になります。
  4. 「グリッチ」に切り替えると、横の帯が乱れる映像ノイズの表現になります。

参考資料

Unreal Engine Post Process Effects ↗

分野全体の資料で、この項目を直接扱っているとは限りません。