【Unity】【C#】ガンマ(Gamma, sRGB) - リニア(Linear) 値の相互変換

2021/09/16 Thu [edit]

　そろそろ UniVRM をアップデートしたいなぁ、と思ったけど、とうとう UniVRM0.79 以降はカラースペース(Color Space)をリニア(Linear)に統一するらしく、インポートしたら強制的に変更されるようになってしまった。

　VRM Live Viewer は３年前、Unity2017初期の頃からはじまったのだが、CRS ステージは Unity4, Crystal ステージは Unity5 時代のものを流用してるんだよね。なので、ガンマ(Gamma)スペースなのだ。

　まぁ、正直言って、特に Unity2018 以降の機能は Linear 依りになってきたので（なぜか今でも Unity のデフォは Gamma だが）、いずれ移行したいとは思ってたんだけどね。

　しかし、さすがにマイナーバージョンアップデートで、前後の互換性がないのはおかしいし（不具合にしか見えないため）、メジャーアプデとして考えていた。なので急遽移行を迫られる形になってしまった。でも Color Space 変更って、プロジェクト素材全てに影響するので、とてもじゃないけどすぐにはできないんだよね（見た目がかなり変わる）。

　なので、自動化できるところはスクリプトで変換などするために、色々調べることになった。これはそのメモ。ほぼ出典そのままだが、汎用的に使えるので掲載しておこう。

■Unity の Color, Mathf での変換
■汎用的な値(0～1f：正規化した値)での変換
　●定義からの厳密なコード
　●高速化近似式 (2.2乗, 1/2.2乗) での変換
　●シンプルな3次の高速近似式での変換
■シェーダ(.shader 等)での利用

(※) Unity 2019.4 / Windows10(x64) で確認

■Unity の Color, Mathf での変換

　ちなみに、Unity では Color 構造体が linear, gamma というプロパティがあり、Mathf には Mathf.GammaToLinearSpace, Mathf.LinearToGammaSpace という関数があるので、簡単に変換できる。例えば以下のようにできる。

using UnityEngine;

//ガンマ→リニア
var gammaColor = new Color(0.3f, 0.4f, 0.5f);
var linearColor = gammaColor.linear;  //→ RGBA(0.073, 0.133, 0.214, 1.000)

var linearValue = Mathf.GammaToLinearSpace(0.5f); //→ 0.2140411ff

//リニア→ガンマ
var linearColor = new Color(0.073f, 0.133f, 0.214f);
var gammaColor = linearColor.gamma;  //→ RGBA(0.300, 0.400, 0.500, 1.000)

var gammaValue = Mathf.LinearToGammaSpace(0.2140411f); //→ 0.5f

　これで事足りてしまう場合は良いのだが、もう少しつっこんだ実装をしたいとか、高速化した近似式を使いたいというときもあるだろう。それらは以降のようになる。

■汎用的な値(0～1f：正規化した値)での変換

●定義からの厳密な Gamma - Linear 相互変換 (0～1f：正規化した値での計算)

using UnityEngine;

/// <summary>
/// ガンマ(sRGB)→リニア (0.0-1.0：正規化した値) 色空間変換 (厳密なコード)
/// (参考)
/// https://en.wikipedia.org/wiki/SRGB
/// https://tech.cygames.co.jp/archives/2339/
/// </summary>
/// <param name="gamma">0.0-1.0</param>
/// <returns>0.0-1.0</returns>
public static float ToLinearValueStrict(this float gamma)
{
    if (gamma <= 0.04045f) 
    {
        return gamma / 12.92f;
    }
    else 
    {
        return Mathf.Pow((gamma + 0.055f) / 1.055f, 2.4f);
    }
}

/// <summary>
/// リニア→ガンマ(sRGB) (0.0-1.0：正規化した値) 色空間変換 (厳密なコード)
/// (参考)
/// https://en.wikipedia.org/wiki/SRGB
/// https://tech.cygames.co.jp/archives/2339/
/// </summary>
/// <param name="linear">0.0-1.0</param>
/// <returns>0.0-1.0</returns>
public static float ToGammaValueStrict(this float linear)
{
    if (linear <= 0.0031308f)
    {
        return linear * 12.92f;
    }
    else 
    {
        return 1.055f * Mathf.Pow(linear, 0.4166666f) - 0.055f;  //0.4166666f = 1/2.4
    }
}

　ここでは sRGB とガンマを同等に扱っているが、実際にはガンマ補正はディスプレイや機器などで値が違うようなので、あくまで一般的な仕様に合わせたものだと思って欲しい。

　式は以下の参考資料そのままだ。定義は Wikipedia に掲載されている。

(定義) sRGB (From sRGB to CIE XYZ, From CIE XYZ to sRGB)
(参考:式) 物理ベースレンダリング -リニアワークフロー編

●高速化近似式 (2.2乗, 1/2.2乗) での変換

　また、式の参考ページにも記載されているが、高速化用の近似式は以下のようになる。

●高速化近似式 Gamma - Linear 相互変換 (0～1f：正規化した値での計算)

using UnityEngine;

/// <summary>
/// ガンマ(sRGB)→リニア (0.0-1.0：正規化した値) 色空間変換 (高速化近似式: 2.2乗)
/// (参考) https://tech.cygames.co.jp/archives/2339/
/// </summary>
/// <param name="gamma">0.0-1.0</param>
/// <returns>0.0-1.0</returns>
public static float ToLinearValueFast(this float gamma)
{
    return Mathf.Pow(gamma, 2.2f);  //or 2.233333f
}

/// <summary>
/// リニア→ガンマ(sRGB) (0.0-1.0：正規化した値) 色空間変換 (高速化近似式: 1/2.2乗)
/// (参考) https://tech.cygames.co.jp/archives/2339/
/// </summary>
/// <param name="linear">0.0-1.0</param>
/// <returns>0.0-1.0</returns>
public static float ToGammaValueFast(this float linear)
{
    return Mathf.Pow(linear, 0.45454545f);  //1/2.2
}

　なぜそうなるのかというのは、以下を参照すると良いだろう。とてもわかりやすく解説されている。

(参考資料)
・ガンマ補正のうんちく
・分かる！リニアワークフローのコンポジット

　まぁ端的に言うと、曲線が似てれば、値も似るということだね(笑)。英語では「Magic Number」みたいにも言われている。

　ちなみに、冒頭に書いた Unity の Color.linear や Color.gamma, Mathf.GammaToLinearSpace, Mathf.LinearToGammaSpace と値を照合してみたら、「～Strict」の関数(厳密なコード)はほぼ同じで、「～Fast」(高速化近似式)の方は６割くらい一致するようだ(※ただし、誤差を甘めで、小数点3ケタくらいで比較した場合。べき乗を 2.233333f にすると 67%くらい)。しかし見た目では、静止画ならともかく、動いてる絵なら見分けが付かないくらいだ。

　また、これらの式をシェーダに使っている例もある。というより、近いものを Unity の PostProcessing で実装されているらしい。最後に抜粋してるので、興味があったら見てみると良い。

●シンプルな3次の高速近似式での変換

　また、下記のシェーダの計算を見ていると、2.2乗の近似式は単純に2乗（c * c）にされているが、もう１つ近似式があるね。コメントの ref の先に解説もあるが、なるほど計算負荷が低いらしい（基本的に平方根やべき乗などは、単純な掛け算や足し算より負荷が高いため）。

　もう１つの高速化近似式を C# で書いてみよう（そのまま）。

●シンプルな3次の高速近似式での Gamma → Linear 変換 (0～1f：正規化した値での計算)

using UnityEngine;

/// <summary>
/// ガンマ(sRGB)→リニア (0.0-1.0：正規化した値) 色空間変換 (高速化近似式: シンプルな3次)
/// (参考) http://chilliant.blogspot.com.au/2012/08/srgb-approximations-for-hlsl.html?m=1
/// </summary>
/// <param name="gamma">0.0-1.0</param>
/// <returns>0.0-1.0</returns>
public static float ToLinearValueFastCubic(this float gamma)
{
    return gamma * (gamma * (gamma * 0.305306011f + 0.682171111f) + 0.012522878f);
}

　最初の高速近似式(2.2乗)のコード内のコメントに「or 2.233333f」と書いてあるのは、こちらの資料にあったからだ。

　実際に試してみると、こちらも動いてる分には、ぱっと見た目わからない。平方根使うより計算負荷が軽いので、Unity も採用しているのだろう。これは助かる。

(参考資料) sRGB Approximations for HLSL

■シェーダでの利用

　以下のコードは実際に Unity の PostProcessing で使われているようだ。そのまま抜粋させて頂いた。

●シェーダ内 (.shader 等)での Gamma - Linear 相互変換 (0～1f：正規化した値での計算)

// sRGB transfer functions
// Fast path ref: http://chilliant.blogspot.com.au/2012/08/srgb-approximations-for-hlsl.html?m=1
//
half SRGBToLinear(half c)
{
#if USE_VERY_FAST_SRGB
    return c * c;
#elif USE_FAST_SRGB
    return c * (c * (c * 0.305306011 + 0.682171111) + 0.012522878);
#else
    half linearRGBLo = c / 12.92;
    half linearRGBHi = PositivePow((c + 0.055) / 1.055, 2.4);
    half linearRGB = (c <= 0.04045) ? linearRGBLo : linearRGBHi;
    return linearRGB;
#endif
}

half3 SRGBToLinear(half3 c)
{
#if USE_VERY_FAST_SRGB
    return c * c;
#elif USE_FAST_SRGB
    return c * (c * (c * 0.305306011 + 0.682171111) + 0.012522878);
#else
    half3 linearRGBLo = c / 12.92;
    half3 linearRGBHi = PositivePow((c + 0.055) / 1.055, half3(2.4, 2.4, 2.4));
    half3 linearRGB = (c <= 0.04045) ? linearRGBLo : linearRGBHi;
    return linearRGB;
#endif
}

half4 SRGBToLinear(half4 c)
{
    return half4(SRGBToLinear(c.rgb), c.a);
}

half LinearToSRGB(half c)
{
#if USE_VERY_FAST_SRGB
    return sqrt(c);
#elif USE_FAST_SRGB
    return max(1.055 * PositivePow(c, 0.416666667) - 0.055, 0.0);
#else
    half sRGBLo = c * 12.92;
    half sRGBHi = (PositivePow(c, 1.0 / 2.4) * 1.055) - 0.055;
    half sRGB = (c <= 0.0031308) ? sRGBLo : sRGBHi;
    return sRGB;
#endif
}

half3 LinearToSRGB(half3 c)
{
#if USE_VERY_FAST_SRGB
    return sqrt(c);
#elif USE_FAST_SRGB
    return max(1.055 * PositivePow(c, 0.416666667) - 0.055, 0.0);
#else
    half3 sRGBLo = c * 12.92;
    half3 sRGBHi = (PositivePow(c, half3(1.0 / 2.4, 1.0 / 2.4, 1.0 / 2.4)) * 1.055) - 0.055;
    half3 sRGB = (c <= 0.0031308) ? sRGBLo : sRGBHi;
    return sRGB;
#endif
}

half4 LinearToSRGB(half4 c)
{
    return half4(LinearToSRGB(c.rgb), c.a);
}

　内容的には、厳密なコードと高速化近似式 (2.2乗や 1/2.2乗) に同じか近いね。プリプロセッサの「USE_VERY_FAST_SRGB」や「USE_FAST_SRGB」で実行速度を選択できるらしい。

　PositivePow は以下の参考資料を(LIGHT11)見て欲しい。正の値しか使わないのなら、ただの pow() でも可能のようだ。

(参考)
・PostProcessing/PostProcessing/Shaders/Colors.hlsl (Unity の PostProcessing 内)
・【Unity】シェーダにおける値のリニア <-> sRGB変換関数 (LIGHT11：PositivePow 掲載)

●PositivePow (負の値にしないべき乗) 抜粋

#define FLT_EPSILON     1.192092896e-07

// Using pow often result to a warning like this
// "pow(f, e) will not work for negative f, use abs(f) or conditionally handle negative values if you expect them"
// PositivePow remove this warning when you know the value is positive and avoid inf/NAN.
float PositivePow(float base, float power)
{
    return pow(max(abs(base), float(FLT_EPSILON)), power);
}

float2 PositivePow(float2 base, float2 power)
{
    return pow(max(abs(base), float2(FLT_EPSILON, FLT_EPSILON)), power);
}

float3 PositivePow(float3 base, float3 power)
{
    return pow(max(abs(base), float3(FLT_EPSILON, FLT_EPSILON, FLT_EPSILON)), power);
}

float4 PositivePow(float4 base, float4 power)
{
    return pow(max(abs(base), float4(FLT_EPSILON, FLT_EPSILON, FLT_EPSILON, FLT_EPSILON)), power);
}

　結局、どれを使うかはケースバイケースだと思うが、実装を知ってると色々応用が効くので知っておいて損は無い。例えば、ガンマ補正の値は 2.2乗みたいになってるが（sRGBディスプレイの現在のデファクトスタンダードであり、過去には色々値が異なっていたらしい）、これを引数をして変更すると、見た目も変わる。これを応用してシェーダの方で Properties に入れておくと、インスペクタで変化の加減を調整できるので、とても便利だ。

　実際、VRM Live Viewer のプロジェクト内の素材を Linear 用に調整している最中だが、透過の無いテクスチャなどは、マテリアルの調整やいっそ PhotoShop でテクスチャの色調補正すれば、Gamma のときと同じ感じになるので事足りる。しかし、透過や反射するようなマテリアル（色や光の合成が行われるマテリアル）などは、どんなに調整しても Gamma のときと同じようにはならない（参考資料の「加算/合成が変わる」がわかりやすい）。そういう場合は、シェーダに変換式を入れないと、それっぽくはならないようだ（それでも完全には無理だが）。

(参考資料)
・分かる！リニアワークフローのコンポジット