Unity

【Unity / Post Processing】Color Gradingを理解する

この記事では、Unityでポストエフェクトを実装するためのアセット「Post Processing」内の「Color Grading」について詳しく解説します。
このエフェクトを使用することで空間全体の色を自由に変更することができ、より豊かな空間表現が可能になります。

直感的に空間のクオリティを大幅に向上させることができるのでサンプルシーンを参考にしつつ、この機会にColor Gradingに挑戦してみましょう！

サンプルイメージ

サンプル

STYLY GALLERYからサンプル空間を体験できます。

記事で紹介しているUnityプロジェクトのダウンロードはこちらからできます。
Color Grading Sample Scene

Color Gradingとは

Color Gradingとはポストエフェクトを実装するためのアセットPost Processing内にあるエフェクトの一つで、Unityが生成する最終的な画像の色と輝度に変更や修正を加えます。
これを使えば空間の彩度や輝度をインスタグラムやPhotoshopのように自由自在に変更することが可能です。
筆者はPost Processing内のBroomを使い発光させたオブジェクトに演出を加えColor Gradingを使用することで全体色を青に変更しました。
こうすることで無補正の時よりも大幅に画面に統一感が生まれ、作品のクオリティが一段上がりました。

エフェクトなし

 

エフェクトあり

 

事前準備

Post Processingについてはこちらをご参考ください
https://styly.cc/ja/tips/unity_postprocessing_master/#i-2

記事内で使用しているアセットはこちら

※注意事項：STYLYで利用可能なアセットについて

  • Postprocessing Stack(V1)
  • Postprocessing Stack V2
    • Steam版STYLYアプリ (PC向けVR)では利用可能です。
    • スタンドアロンVR版STYLYアプリおよびスマホ用STYLYアプリでは利用できません。

      より詳細に知りたい方はこちらのSTYLY DOCUMENTをご参照ください。

      プロジェクトをインポートする

      Package Managerからインポートします。

      まずはPost Processing Stack v2をプロジェクトへインポートしましょう。
      Unity上部のWindowタブからPackage Managerを選択します。

      WindowタブからPackage Managerを選択

      Package Managerを開いたら右上の検索箇所でPostと打つとPost Processingが出てくるので右下のInstallボタンを選択しインストールします。
      これでプロジェクトのインポートは完了です。

      検索箇所で「Post」と検索し右下のInstallボタンを選択

      シーンに導入する

      実際にPost Processing Stack v2をシーンに導入してみましょう。
      ヒエラルキーウィンドウ上のMainCameraを選択します。

      MainCameraを選択

      MainCameraのインスペクターウィンドウの上部にあるLayerをクリックし、表示されるLayerの中からDefaultを選択してください（初期状態ではDefaultが選択されています）。

      Layerをクリック後、Defaultを選択

      MainCameraのインスペクターに戻り、下のAdd Componentをクリック後、表示される検索バーにPostと入力し、Post-Process Layerを選択します。
      ※筆者もここで間違えたのですが、誤ってPost-Process Volumeを入れないように注意してください。

      検索バーにPostと入力しPost-Process Layerを選択

      するとインスペクターにPost Process Layerコンポーネントが追加されます。
      Post-Process Layer内のLayerタブをDefaultに変更します。

      LayerタブをDefaultに変更

      次はPost Processの画面エフェクトを管理するオブジェクトを作成します。
      ヒエラルキー上で右クリック→Create Emptyで新しいGameObjectを作成します。

      Create Emptyで新しいGameObjectを作成

      生成したGameObjectのインスペクター下からadd Componentをクリック。
      検索バーにPostと入力し、Post-Process Volumeコンポーネントを追加します。

      検索バーにPostと入力し、Post-Process Volumeコンポーネントを追加

      追加したPost-Process Volume内のIs Globalのチェックボックスをオン。
      Profile項目の右側にNewボタンがあるのでクリックします。

      Is Globalにチェック後Profileの右側のNewを選択

      これで準備完了です。
      それではColor Gradingを実際に使ってみましょう！

Color Gradingを実際につかってみよう

Post Processingを導入することができたら早速Color Gradingを入れていきましょう。
事前準備で作成したGameobjectのPost-Process Volume内にあるAdd effect…を選択しその中からColor Gradingを選択してください。

Add effect…を選択しその中から「Color Grading」を選択

Color Gradingの使い方

まずはColor Gradingの基本的な使い方をご紹介します。

【Mode】

Color Gradingには基本となるModeが三種類存在します

Mode  
Low Definition Range (LDR) ローエンドプラットフォーム向け。負荷が比較的少なくSTYLYでの使用に向いています。
High Definition Range (HDR)

ハイエンドプラットフォーム向け。すべてのカラー操作はHDRで適用されるので明るさの幅も広く、色鮮やかに描写されます。

その代わり負荷も大きいです。
External 外部ソフトウェアで作成されたカスタム3DLUT向け。

サンプルシーンは今回High Definition Range（以下、HDR）で作成したものですがサンプルシーンの規模感であれば、特に問題はありませんでした。
自分の作っているシーンの大きさによってModeを使い分けていくのがいいでしょう。

【Tonemapping】

Tonemappingとは、私たちが使用しているディスプレイに合わせて輝度をマッピングし直してくれる機能のことで、この機能を使えば空間全体の空気感を演出することができます。
特に明るさの幅が広いHDRには、このTonemappingは効果的です。

TonemappingにはModeが4種類存在します。
エフェクト無しの画像と比較しながら、一つづつ解説していきます。

TonemappingにはModeが4種類

 

エフェクト無しの写真と見比べながら見てみてください

 

  • None
    上記がDefault設定になっています。

  • Neutral
    彩度とコントラストが低めに設定されているモードです。
    全体的に優しい色合いになります

    Neutral

  • ACES
    ACESは映画などで使用されるトーンマッピングで、彩度・コントラストともに高めでパキッとした印象になります。
    実際にACESを使用していて機械的なものや、コンクリートのような人工物との相性が良いと感じました。
    ただし黒つぶれしやすくなってしまうので、ライティングをしっかりセッティングするように心がけましょう。

ACES

 

  • Custom
    こちらは自分でトーンマッピングを設定できるモードです。

    【White Balance】

    ホワイトバランスは写真を撮ったことがある方なら一度は耳にしたことのある言葉ではないでしょうか。
    Color Gradingのホワイトバランスは写真で言う色温度に近く、この機能を触ったときにホワイトバランスを理解している人は混乱するかもしれません。

    こちらは2種類のモードが存在します。

    White Balanceには2種類のモード

  • Temperature
    こちらは色温度で補正をするモードになります。
    バーを右にずらせばずらすほど赤みがかり、左に行くほど青くなります。

    色温度とは、光が持つ色のことでこちらは「K（ケルビン）」という数値で表します。
    ケルビン数が高いほど青みが増し低いほど赤みが増します。
    ホワイトバランスとは、その色温度に対してどのように色を補うかで現実に近い色味に補正する機能のことを言います。

    暖色



    寒色

  • Tint
    Tintは日本語で「色合い」という意味になります。
    こちらはTemperatureで大まかな色味を決めた後の補助的なモードとして使うのがおすすめです。
    数値が＋100に行くほどマゼンタ寄りに、-100に行くほど緑寄りの色合いになります。

    ＋100に行くほどマゼンタ寄りになります

     

    -100に行くほど緑寄りになります

     

    【Tone】

    こちらは空間の色調を調整するモードです。主に明るさ、彩度、色相を調整できます。
    Photoshopの色調補正を使用したことがある方なら、イメージしやすいモードです。

    こちらは5種類のモードが存在します。

    5種類のモード

  • Post-exposure (EV)　
    High Definition Rangeでのみ選択できます。
    露光量を調整するモードです。トーンマッピングと合わせて使用しないと白飛びしてしまうので注意が必要です。

    トーンマッピング Mode ACES Post-exposure ＋1.57

     

  • Color Filter
    HDRのカラーピッカーを使い、空間全体にカラーフィルターをかけることができます。
    HDRと書いてある箇所をクリックするとカラーピッカーが出現します

    HDR部分をクリック

    このカラーピッカーは選んだ色の±2の濃さ薄さを選ぶことができ、とても便利です。

    HDRカラーピッカー

     

    Color Filter R:174 G:255 B:229

     

  • Hue Shift
    Hue Shiftとは日本語で「色相」のことを指します。
    色相とは6色からなる色の相関の相違のことであり、その色相を順序だてて並べたものが色相環といいます。

    色相環

    Hue Shiftはこの色相環をバーに置き換えたものになっているので、右に＋180、左に-180動かせるようになっています。
    ただ色相は大幅な色の変更になってしまうため、Toneの中での需要は低いかもしれません。

    右に＋180、左に-180動かせるようになっている

     

    Hue Shift＋180

  • Saturation
    Saturationとは日本語で「彩度」のことです。彩度の濃さは色味といいます。
    ＋100に近づくほど彩度が濃くなり、-100に近づくほど薄くなります。
    -100の時は極限まで色味が薄い状態なので、色がないモノクロの世界になります。
    このモードを駆使してモノクロームの空間を作るのも良いですね。

    Saturation ＋100

     

    Saturation -100

     

  • Contrast
    コントラストは、明るい箇所と暗い箇所の差を調整します。
    コントラストが-100に行くほど、明暗の差の少ないぼやけた雰囲気になります。
    逆に＋100に行くほど明暗の差が激しくなるので明るい箇所はさらに明るく、暗い箇所は更に暗くなります。
    コントラストは低すぎても、高すぎてもあまり良くない絵になってしまうのでほどほどに使用しましょう。

Contrast ＋100

Contrastは極限まで下げると明暗の差がなくなり、色の違いが消えてしまうため以下のような画面になります。

Contrast -100

【Channel Mixer】

Channel Mixerは、RGB（赤、緑、青）にそれぞれ分かれていて上部のタブで選択した色が入力されたRGBに対して、どれだけの影響を与えるのかを設定するモードです。
しかし、この機能はかなり難易度が高いのとこれまでに紹介したモードで同じ色を出せるので今回は割愛いたします。

Channel Mixer

【Trackballs】

Lift（暗い部分）、Gamma（中間の部分）、Gain（明るい部分）のそれぞれについて色相環の真ん中にあるトラックボールを操作して調整していきます。
真ん中のトラックボールが色相環に近づくほど、その色の影響が強くなっていきます。

Trackballs

分かりやすいようにそれぞれを強調させてご紹介します。

Lift（暗い部分）だけを赤に近づけた場合

Liftのトラックボールをクリックホールドしながら赤に近づける

すると暗い箇所が赤く染まりました。

Liftは暗い箇所に色の影響が強く出ます

次に、Gamma(中間の部分)だけを緑に近づけた場合

Gammaのトラックボールをクリックホールドしながら緑に近づける

すると中間の箇所が緑に染まりました。

Gammaは中間の箇所に色の影響が強く出ます

最後に、Gain（明るいの部分）だけを青に近づけた場合

Gainのトラックボールをクリックホールドしながら青に近づける

すると明るいの箇所が青に染まりました。

Gainは明るい箇所に色の影響が強く出ます。

【Grading Curves】

色相の明るさや彩度をPhotoshopで言うトーンカーブで調整できるモードです。
こちらも難易度が比較的高く、先ほどまでにご紹介したモードで代用できるので割愛いたします。

Grading Curves

Color Gradingの使い方は以上になります。
色は作品の中でもっとも大切な要素の一つです。
これらのモードの中で一つ選んで空間の色や雰囲気を変化させるだけでも、自分が作った空間のクオリティが上がりより良い作品作りをさせてくれるでしょう。　　

サンプルシーンの演出

最後にサンプルシーンのエフェクトの演出方法をご紹介します。

サンプルシーンの演出にはPost ProcessingのBloomというエフェクトを使用しています。
Bloomは特にColor Gradingとの相性がよく、筆者自身も2つのエフェクトの相性の良さに感動しました。

サンプルシーンの演出

このサンプルシーンでは、オブジェクトを発光させその光量や拡散量をBloomエフェクトを使い調節しています。
まずはオブジェクトを発光させてみましょう。

まずはUnityで適当なオブジェクトを用意します（発光が分かりやすいようにDirectional Lightは削除しています）。

オブジェクトを配置

右クリック＞Create>Materialを選択しマテリアルを作成します。

右クリック＞Create>Materialを選択しマテリアルを作成

作成したマテリアルをオブジェクトにドラッグ&ドロップ。

作成したマテリアルをオブジェクトにドラッグ&ドロップ

その後、オブジェクトのインスペクターを開き、下のマテリアルの設定項目内のEmissionを選択し、下のHDRをクリックしてください。

Emissionを選択し、下のHDRをクリック

カラーピッカーで好きな色を選択したら、発光させる工程は完了です。

発光完了！

Bloomエフェクトを導入していきます。
Color Grading同様、GameobjectのPost-Process Volume内にあるAdd effect…を選択し、その中からBloomを選択してください。

Add effect…を選択しその中からBloomを選択

発光しているオブジェクトを配置し、BloomのIntensityの数値を変えるとオブジェクトの発光量が変化します。

BloomのIntensityの数値を変えるとオブジェクトの発光量が変化

後はColor Gradingで色調補正をし完成です。
お疲れ様でした。

STYLYにアップロードする方法

作成したColor Gradingのシーン、プレハブをSTYLYにアップロードしてみましょう。

STYLYアカウントを作成する

アカウント作成方法

STYLY アカウント作成の流れ
STYLY アカウント作成の流れ

STYLYにアップロードする方法

取り込めるアセットを理解しよう
取り込めるアセットを理解しよう

UnityからSTYLYにアップロードする方法

UnityからSTYLYにプレハブとシーンをアップロードする方法
UnityからSTYLYにプレハブとシーンをアップロードする方法

今回はPost Processing内のエフェクトColor Gradingの使い方からモードの詳細な役割をご紹介しました。
この機会に一段上の作品作りに挑戦してみてはいかがでしょうか。

STYLYに関する質問、バグ報告、改善してほしい要望はSTYLY FORUMまで
https://jp.forum.styly.cc/support/discussions