Post processing

Color Grading / Lookup Table

カラーグレーディング・LUT

色変換で画面全体の画調を統一する。

2 / 10

Interactive demo

Preparing the demo…

Color Grading / Lookup Table

Drag to orbit, Ctrl/⌘ + scroll to zoom. Use two fingers on touch screens.

This explanation is currently available in Japanese.

ひとことで

描き終えた画面の色を、あらかじめ作っておいた色の対応表(LUT:Look-Up Table)で一括して変換し、画面全体の色調をそろえる処理です。映画の色調整と同じ考え方で、同じシーンを映画調、ホラー調、回想のセピア調などに一瞬で切り替えられます。どんなに複雑な色の調整でも、実行時は表を 1 回読むだけで済むのが利点です。

ゲームでの使いどころ

  • 作品全体のルック:ゲームの世界観に合った色調(冷たい SF、温かいファンタジー、荒涼としたポストアポカリプス)を統一する。
  • 場所・状況による切り替え:砂漠は暖色、雪山は寒色、毒の沼は緑がかった色、ボス戦は彩度を上げる。
  • 演出:回想のセピア、瀕死時の低彩度、夜間視(ナイトビジョン)、ホラーの色あせた画面。
  • アーティストのワークフロー:画面を撮影して Photoshop や DaVinci Resolve で色を調整し、その変換を LUT として書き出してゲームに取り込む。

しくみ

色 (R, G, B) を 3 次元の座標とみなすと、色の変換は「立方体の中の各点に、変換後の色を対応させる」ことになります。これを 32×32×3232 \times 32 \times 32 などの格子(3D LUT)で表し、格子の間は補間します。

C変換後=LUT(R,G,B)C_{\text{変換後}} = \text{LUT}(R, G, B)

GPU では 3D テクスチャを使うか、デモのように青の値ごとの断面を横に並べた 2D 画像(1024×321024 \times 32)として持ちます。2D の場合は、青の値で隣り合う 2 枚の断面を選び、その間を補間します。

作り方の定番:

  1. 変換なし(入力 = 出力)の LUT 画像を、ゲームの画面写真に並べて貼る。
  2. 画像編集ソフトで、写真と LUT 画像をまとめて色調整する。
  3. 調整された LUT 画像だけを切り出してゲームに読み込む。

写真に適用したのと同じ調整が、LUT に焼き込まれます。

実装のポイント

  • どの段階で適用するか:多くの場合、トーンマッピングの後の 0〜1 の表示用の色に適用します。HDR のまま適用する場合は、対数空間に変換した値で表を引きます(Unreal Engine の方式)。
  • LUT の混合:2 つの LUT の結果を補間すれば、場所の移動に合わせて色調をなめらかに切り替えられます。
  • 解像度:16³ や 32³ で十分なことがほとんどです。細かすぎる調整(急なグラデーション)は、格子の粗さで段差(バンディング)が出ることがあります。

つまずきやすい点

  • 極端な調整:彩度やコントラストを上げすぎると、暗部がつぶれたり、肌の色が不自然になったりします。
  • UI にかけてしまう:UI やテキストまで色調整すると、読みにくくなります。UI は後から描くのが普通です。
  • 色空間の食い違い:LUT を作ったときの色空間(sRGB か、線形か、対数か)と、ゲームで引くときの色空間がずれると、意図と違う色になります。

デモで試すこと

  1. 画面中央の縦線の左が変換前、右が変換後です。「比較の境目」をドラッグして、色がどう変わるか見比べてください。
  2. 「ティール&オレンジ」では、暗部が青緑、明部が橙に寄り、映画のような印象になります。「ホラー」は彩度が落ちて緑がかり、「セピア」は色が失われて茶色一色になります。
  3. 右下は LUT 画像そのものです。32 枚の断面が横に並んでいて、画調を変えると表の中身が変わります。
  4. 「適用の強さ」で、元の色と変換後の色を混ぜられます。

References

Unreal Engine Post Process Effects ↗

A general reference for this subcategory.