カラーグレーディング

カラーモデルと相互変換の方法を理解した後、後処理で最終的な画像にカラーグレーディングを行います。カラーグレーディングは比較的幅広いトピックであり、主な目的は、色相、彩度、明るさ、コントラスト、ホワイトバランス、およびその他の多くの操作の調整など、画像のパフォーマンスを向上させることです。次に、いくつかの一般的なカラーグレーディング操作をリストします。

 

## 彩度（Saturation）と明るさ（Value）
HSVモデルの変数Sと変数Vはそれぞれ彩度と明るさであるため、彩度と明るさの調整は比較的簡単な操作です。RGBカラーモデルをHSVカラーモデルに変換した後、SとVの値を調整します。

 

### 彩度を調整する
コード：
```
float4 SetPixelShader（float4vertex：POSITION、float2 uv：TEXCOORD0）：SV_TARGET

{

float4 color = tex2D（_MainTex、uv * _MainTex_ST.xy + _MainTex_ST.zw）;

float3 source = RGBToHSV（color.rgb）;

source = float3（source.r、source.g * _saturation、source.b）;

color.rgb = HSVToRGB（saturate（source））;

return color;

}
```
 

元の画像：

![image1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/653855/6a84bd0b-6b1f-9485-ebf3-1f0b5c95599f.png)


各ピクセルのそれぞれの彩度（HSVのS値）に1.8を掛けます。

![image2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/653855/9036f804-24cf-620f-d805-503976a0e751.png)


より特別なものの1つは、彩度を0に調整して、白黒フィルターの効果を取得することです。

![image3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/653855/5a236651-db52-72c0-ecdc-2cbee1d48e5d.png)


 

### 明るさを調整する
コード：
```
float4 SetPixelShader（float4vertex：POSITION、float2 uv：TEXCOORD0）：SV_TARGET

{

float4 color = tex2D（_MainTex、uv * _MainTex_ST.xy + _MainTex_ST.zw）;

float3 source = RGBToHSV（color.rgb）;

source = float3（source.r、source.g、source.b * _value）;

color.rgb = HSVToRGB（saturate（source））;

return color;

}
```
 

明るさを暗くする：

![image4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/653855/6b107ec9-3379-7d39-bfec-d39577ed105d.png)


元の画像：

![image5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/653855/43162ddf-4825-d4c4-67fc-80a96f6b75c1.png)


明るさを上げる：

![image6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/653855/cf360a56-b6b3-cb66-191b-a1375dd25f12.png)


### コントラスト
コントラストとは、画像の明るい領域と暗い領域の　最も明るい白と最も暗い黒の間　のさまざまな輝度レベルの測定値を指します。差の範囲が大きいほど、コントラストが大きくなり、差の範囲が小さくなり、コントラストが小さくなります。良好なコントラスト率は120：1です。鮮やかで豊かな色を簡単に表示でき、コントラスト率が300：1と高い場合は、すべてのレベルの色をサポートできます。

HSVカラーモデルの場合、明るさの差（V値）を大きくすることでコントラストを調整できます。
```
float4 SetPixelShader（float4vertex：POSITION、float2 uv：TEXCOORD0）：SV_TARGET

{

float4 color = tex2D（_MainTex、uv * _MainTex_ST.xy + _MainTex_ST.zw）;

float3 source = RGBToHSV（color.rgb）;

source = float3（source.r、source.g、（（source.b --0.5）* _value + 0.5））;

color.rgb = HSVToRGB（saturate（source））;

return color;

}
```
コントラストを下げる：

![image7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/653855/383a1fc3-dbea-1d76-1669-e9073859a012.png)


コントラストを上げる：

![image8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/653855/20b4614e-a83c-88f9-81c5-6a397a3e4a30.png)


 

 

### 逆色（Inverse）
逆色とは、原色に重ねると白になる色、つまり白から原色を引いた色のことです。したがって、このフィルターの実装は比較的簡単です。RGBカラーモデルでは、白から原色を引いたものを使用します。

RGBカラーモデルを使用して実装する方が簡単です。
```
float4 SetPixelShader（float4vertex：POSITION、float2 uv：TEXCOORD0）：SV_TARGET

{

float4 color = tex2D（_MainTex、uv * _MainTex_ST.xy + _MainTex_ST.zw）;

color.rgb = float3（1-color.r、1-color.g、1-color.b）;

return color;

}
```
 

逆色効果：

![image9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/653855/f6256a0d-0a4b-67fa-5d3b-a29429730982.png)


PS：関連用語の定義はbaike.baidu.comから引用されています

---
UWA Technologyは、モバイル/VRなど様々なゲーム開発者向け、**パフォーマンス分析**と**最適化ソリューション**及び**コンサルティングサービス**を提供している会社でございます。

今なら、UWA GOTローカルツールが**15日間に無償試用**できます！！
よければ、ぜひ！

UWA公式サイト：https://jp.uwa4d.com
UWA GOT OnlineレポートDemo：https://jp.uwa4d.com/u/got/demo.html
UWA公式ブログ：https://blog.jp.uwa4d.com