目次
はじめに
個人の備忘録としてまとめています。誤った情報がある場合があります。
コメントにてご指摘のほどお願いいたします。
今回はUnrealEngineのカラーの指定で何となく使っているRGBやHSVや、LinearColorとColorの違いなど基礎的な知識をベースに触れていきたいと思います。
環境
UE5.3.0
解説
代表的な色空間の種類
➀RGB（Red, Green, Blue）
RGBは加法混色に基づいています。これは、赤（Red）・緑（Green）・青（Blue）の光を異なる強さで組み合わせることによって様々な色を作り出す方法です。(光の三原色)
すべての色を最大にすると白になります。
画像引用: https://optica.cocolog-nifty.com/blog/2012/04/post-ab6f.html
これはデジタルデバイスの表示に多く用いられる手法です。
多くのモニターの場合を拡大すると、赤（R）緑（G）青（B）の3色のセルの混合によって表現されていることが分かります。
RGBはそれぞれ 0～255 までの値の範囲をとります。
255というあいまいな数字は一色に8bit（256通り）を割り当てているので
最大値が255となっています。
②CMYK（Cyan, Magenta, Yellow, Key/Black）
CMYKは減法混色に基づいています。これはシアン（Cyan）・マゼンタ（Magenta,）・イエロー（Yellow）・黒（Black）で構成されています。(色の三原色)
すべての色を最大にすると黒になります。
画像引用: https://optica.cocolog-nifty.com/blog/2012/04/post-ab6f.html
これはパンフレットやポスターなど印刷物に多く用いられる手法です。
モニターなどの発光体とは異なりインクは混ぜると黒に近づいていくためです。
今回はデジタルデバイスでの表現についての内容なのでCMYKについては深く触れません。
Adobe RGBとsRGB
RGBにもAdobe RGBとsRGBという代表的な規格があります。AdobeRGBは名の通りアメリカの大手企業Adobeが1998年に決めた標準規格です。対してsRGBはIEC（国際電気標準会議）が1998年に決めた標準規格です。
Adobe RGBはsRGBよりも緑から青にかけて高彩度の領域が広くなっています。
ただし、sRGBのほうが広く利用されておりUnrealEngineもsRGBを使用してます。
RGBとカラーコード
Webページを書く人にはなじみ深い#e68020のような色の表現をカラーコードと呼びます。
カラーコードはRGBの各要素を16進数に変換したものです。
実際に変換してみました。
Unreal Engine のカラーピッカーにも搭載されており、
Hex sRGBという名前で表記されます。
リニア空間とsRGB空間
UnrealEngineには先ほどのHex 線形や Hex sRGB、Linear Color と Color が存在することに気づきます。
この違いを理解するにはリニア色空間とガンマ色空間の知識が必要になります。これはブラウン管の時代の影響を強く受けているオモシロイお話ですが、以下のサイトが分かりやすく解説されているので省略します。
物理ベースレンダリング -リニアワークフロー編 (1)- | Cygames Engineers' Blog
端的にまとめるとブラウン管の特性の名残で、そのままの出力だと輝度が足りないので、人間がちゃんと見えるように映像作品側で補正しましょう（デガンマ）というのがsRGB色空間です。
薄い直線で入力するとCRTGamma2.2で出力される。⇒本来0.5で出力されるべき映像がブラウン管テレビでは0.218の明るさしかない。
出力時に薄い直線の結果が欲しいのでgammacorrection1/2.2のカーブに変換する。画像引用:ガンマ値 - Wikipedia
つまり、実世界の光や色をより正確に表す方法がリニア空間で、テレビやコンピューターの画面に適した表示をするときはsRGB空間です。
画像引用: 物理ベースレンダリング -リニアワークフロー編 (1)- | Cygames Engineers' Blog
UnrealEnigne で使う上での使い分けについて
・モニター上でUIやテクスチャの色設定を行うときは、FColor(sRGB)を利用。
・光の計算や物理ベースのレンダリング、Niagara、HDR（ハイダイナミックレンジ）など広範囲の明るさを扱う場合等はFLinearColor(Linear)を利用するのが良いでしょう。
RGBとHSV
RGBは便利なデジタルデバイスにとっては非常に扱いやすい手法ですが、人間にとっては直感的に扱いづらい手法です。
そこで、色相(Hue)・彩度(Saturation, Chroma)・明度(Value, Brightness)のHSVという人間の色の知覚に近い方法で表現する手法があります。
画像引用: HSV色空間 - Wikipedia
これはペイントツールなど多くのツールで活躍している手法であり、UnrealEnigneのカラーピッカーもこれにあたります。
それぞれ色相は0~360、彩度（0~100）、明度（0~100）の範囲で値をとります。
（UnrealEngineでは彩度と明度が0~1で正規化されている）
画像引用: ClipStudioPaint https://www.clipstudio.net/ja/
HSVはUnrealEnigneのノードで制御することもできるので、ユーザーにカラーを設定させたい場合などに活用するのがおすすめです。
この記事を書くにあたり参考にしたサイト様
sRGBとAdobe RGB｜プリント講座｜キヤノン：PRO LINE PRINTER 黒のキヤノン。
リニアのワークフローとガンマのワークフロー - Unity マニュアル
https://optica.cocolog-nifty.com/blog/2012/04/post-ab6f.html
物理ベースレンダリング -リニアワークフロー編 (1)- | Cygames Engineers' Blog
最後に
UE4やUE5向けの記事を書いています。
皆様の応援が投稿のモチベーションになりますので
コメントやTwitterのフォローなどしていただけるとありがたいです。
それではよきゲーム開発を。
