Правильная цветопередача, гамма-коррекция, tone mapping и цветовые пространства. Поболтаем-с? (2 стр) / Графика / Форум / Программирование игр / GameDev.ru

− Скрыть

float g_fFilmSlope = 0.88f;
float g_fFilmToe = 0.55f;
float g_fFilmShoulder = 0.26f;
float g_fFilmBlackClip = 0.0f;
float g_fFilmWhiteClip = 0.04f;


static const float3x3 XYZ_2_AP1_MAT =
{
   1.6410233797, -0.3248032942, -0.2364246952,
  -0.6636628587,  1.6153315917,  0.0167563477,
   0.0117218943, -0.0082844420,  0.9883948585
};

static const float3x3 XYZ_2_sRGB_MAT =
{
   3.2409699419, -1.5373831776, -0.4986107603,
  -0.9692436363,  1.8759675015,  0.0415550574,
   0.0556300797, -0.2039769589,  1.0569715142
};

static const float3x3 D65_2_D60_CAT =
{
   1.01303,    0.00610531, -0.014971,
   0.00769823, 0.998165,   -0.00503203,
  -0.00284131, 0.00468516,  0.924507
};

static const float3x3 D60_2_D65_CAT =
{
   0.987224,   -0.00611327, 0.0159533,
  -0.00759836,  1.00186,    0.00533002,
   0.00307257, -0.00509595, 1.08168
};

static const float3x3 sRGB_2_XYZ_MAT =
{
  0.4124564, 0.3575761, 0.1804375,
  0.2126729, 0.7151522, 0.0721750,
  0.0193339, 0.1191920, 0.9503041
};

static const float3x3 AP1_2_XYZ_MAT = 
{
   0.6624541811, 0.1340042065, 0.1561876870,
   0.2722287168, 0.6740817658, 0.0536895174,
  -0.0055746495, 0.0040607335, 1.0103391003
};

static const float3 AP1_RGB2Y =
{
  0.2722287168,
  0.6740817658,
  0.0536895174
};


float3 FilmToneMap(float3 LinearColor) 
{
  const float3x3 sRGB_2_AP1 = mul(XYZ_2_AP1_MAT, mul(D65_2_D60_CAT, sRGB_2_XYZ_MAT));
  const float3x3 AP1_2_sRGB = mul(XYZ_2_sRGB_MAT, mul(D60_2_D65_CAT, AP1_2_XYZ_MAT));
  
  // Use ACEScg primaries as working space
  float3 WorkingColor = mul(sRGB_2_AP1, float3(LinearColor));
  WorkingColor = max(0.0f, WorkingColor);

  // Pre desaturate
  WorkingColor = lerp(dot(WorkingColor, AP1_RGB2Y), WorkingColor, 0.96f);
  
  const float ToeScale = 1.0f + g_fFilmBlackClip - g_fFilmToe;
  const float ShoulderScale = 1.0f + g_fFilmWhiteClip - g_fFilmShoulder;
  
  const float InMatch = 0.18f;
  const float OutMatch = 0.18f;

  float ToeMatch;
  if(g_fFilmToe > 0.8f)
  {
    ToeMatch = (1.0f - g_fFilmToe  - OutMatch) / g_fFilmSlope + log10(InMatch);
  }
  else
  {
    const float bt = (OutMatch + g_fFilmBlackClip) / ToeScale - 1.0f;
    ToeMatch = log10(InMatch) - 0.5f * log( (1.0f + bt)/(1.0f - bt) ) * (ToeScale / g_fFilmSlope);
  }

  float StraightMatch = (1.0f - g_fFilmToe) / g_fFilmSlope - ToeMatch;
  float ShoulderMatch = g_fFilmShoulder / g_fFilmSlope - StraightMatch;
  
  float3 LogColor = log10(WorkingColor);
  float3 StraightColor = g_fFilmSlope * (LogColor + StraightMatch);
  
  float3 ToeColor = (-g_fFilmBlackClip) + (2.0f * ToeScale) / (1.0f + exp((-2.0f * g_fFilmSlope / ToeScale) * (LogColor - ToeMatch)));
  float3 ShoulderColor = (1.0f + g_fFilmWhiteClip) - (2.0f * ShoulderScale) / (1.0f + exp((2.0f * g_fFilmSlope / ShoulderScale) * (LogColor - ShoulderMatch)));

  ToeColor = LogColor < ToeMatch ? ToeColor : StraightColor;
  ShoulderColor = LogColor > ShoulderMatch ? ShoulderColor : StraightColor;

  float3 t = saturate((LogColor - ToeMatch) / (ShoulderMatch - ToeMatch));
  t = ShoulderMatch < ToeMatch ? 1.0f - t : t;
  t = (3.0f - 2.0f * t) * t * t;
  float3 ToneColor = lerp(ToeColor, ShoulderColor, t);

  // Post desaturate
  ToneColor = lerp(dot(float3(ToneColor), AP1_RGB2Y), ToneColor, 0.93f);

  return max(0, mul(AP1_2_sRGB, max(0.0f, ToneColor)));
}

ENAleksey
Постоялец

#17
18:29, 7 фев 2018

Daniil Petrov
Как тебе уже ответили в отдельной теме, их нужно использовать вместе, причём тонирование обязательно должно проводиться в линейном пространстве.
Загружаем текстуры с флагом sRGB (либо самостоятельно проводим конвертацию в шейдере), рассчитываем освещение и возвращаем результат в линейном пространстве. Далее передаём получившуюся текстуру на этап пост-обработки, применяем тонирование, а затем переводим в пространство монитора (вполне подойдёт sRGB, но можно добавить поддержку Gamma 2.2, Rec 709, HDR форматов: ACES 1000nit, 2000nit):

float3 LinearToSrgb(float3 lin) 
{
  lin = max(6.10352e-5, lin);
  return min(lin * 12.92, pow(max(lin, 0.00313067), 1.0/2.4) * 1.055 - 0.055);
}

float4 FinalPassPS(float2 texCoord : TEXCOORD0) : COLOR
{
  float3 linearColor = tex2D(mainSampler, texCoord).rgb;
  
  linearColor = ... // Добавляем DoF, Bloom, Vignetting и т.п

  float3 filmColor = FilmToneMap(linearColor);
  float3 outDeviceColor = LinearToSrgb(filmColor);

  return float4(outDeviceColor, 1.0f);
}

Для оптимизации записывать результат тонирования и цветокоррекции лучше в небольшую LUT текстуру (32x256 пикселя), а затем использовать её в финальном проходе.

После тонирования и перевода в пространство монитора, можно применить эффект Dithering для минимизации бандинга. Реализацию можно найти у Unity Technologies:
https://github.com/Unity-Technologies/PostProcessing/blob/v2/Post… /Dithering.cs
https://github.com/Unity-Technologies/PostProcessing/blob/v2/Post… ithering.hlsl

+ Dithering Выключен

+ Dithering Включен (смотреть в исходном размере)

Daniil Petrov
Удалён

#18
1:34, 8 фев 2018

ENAleksey
> Вот код, вдруг кому пригодится:
А это вообще что за код? Ни плюсы, ни GLSL его не понимают :)

MrShoor
Постоялец

#19
3:48, 8 фев 2018

Daniil Petrov
> А это вообще что за код? Ни плюсы, ни GLSL его не понимают :)
как насчет HLSL?

Daniil Petrov
Удалён

#20
4:09, 8 фев 2018

MrShoor
Увы :) никак!

PA3UJIb
Постоялец

#21
11:46, 8 фев 2018

> А это вообще что за код? Ни плюсы, ни GLSL его не понимают

+ GLSL

− Скрыть

#version 330 core

float g_fFilmSlope     = 0.88;
float g_fFilmToe       = 0.55;
float g_fFilmShoulder  = 0.26;
float g_fFilmBlackClip = 0.0;
float g_fFilmWhiteClip = 0.04;

const mat3 XYZ_2_AP1_MAT = mat3 (
   1.6410233797, -0.3248032942, -0.2364246952,
  -0.6636628587,  1.6153315917,  0.0167563477,
   0.0117218943, -0.0082844420,  0.9883948585
);

const mat3 XYZ_2_sRGB_MAT = mat3 (
   3.2409699419, -1.5373831776, -0.4986107603,
  -0.9692436363,  1.8759675015,  0.0415550574,
   0.0556300797, -0.2039769589,  1.0569715142
);

const mat3 D65_2_D60_CAT = mat3 (
   1.01303,    0.00610531, -0.014971,
   0.00769823, 0.998165,   -0.00503203,
  -0.00284131, 0.00468516,  0.924507
);

const mat3 D60_2_D65_CAT = mat3 (
   0.987224,   -0.00611327, 0.0159533,
  -0.00759836,  1.00186,    0.00533002,
   0.00307257, -0.00509595, 1.08168
);

const mat3 sRGB_2_XYZ_MAT = mat3 (
  0.4124564, 0.3575761, 0.1804375,
  0.2126729, 0.7151522, 0.0721750,
  0.0193339, 0.1191920, 0.9503041
);

const mat3 AP1_2_XYZ_MAT =  mat3 (
   0.6624541811, 0.1340042065, 0.1561876870,
   0.2722287168, 0.6740817658, 0.0536895174,
  -0.0055746495, 0.0040607335, 1.0103391003
);

const vec3 AP1_RGB2Y = vec3 (
  0.2722287168,
  0.6740817658,
  0.0536895174
);

in vec4 vColor;

out vec4 FragColor;

float lerp ( float a, float b, float t )
{
    return ( a * ( 1.0 - t ) + b * t );
}

float log10 ( float a )
{
    return ( log ( a ) / log ( 10 ) );
}

float saturate ( float a )
{
    return ( clamp ( a, 0.0, 1.0 ) );
}

vec3 FilmToneMap ( vec3 LinearColor ) 
{
    const mat3 sRGB_2_AP1 = XYZ_2_AP1_MAT * D65_2_D60_CAT * sRGB_2_XYZ_MAT;
    const mat3 AP1_2_sRGB = XYZ_2_sRGB_MAT * D60_2_D65_CAT * AP1_2_XYZ_MAT;
    
    // Use ACEScg primaries as working space
    vec3 WorkingColor     = sRGB_2_AP1 * LinearColor;
    WorkingColor          = max ( vec3 ( 0.0 ), WorkingColor );

    // Pre desaturate
    WorkingColor          = vec3 ( 
        lerp ( dot ( WorkingColor, AP1_RGB2Y ), WorkingColor.r, 0.96 ),
        lerp ( dot ( WorkingColor, AP1_RGB2Y ), WorkingColor.g, 0.96 ),
        lerp ( dot ( WorkingColor, AP1_RGB2Y ), WorkingColor.b, 0.96 )
    );
  
    float ToeScale        = 1.0 + g_fFilmBlackClip - g_fFilmToe;
    float ShoulderScale   = 1.0 + g_fFilmWhiteClip - g_fFilmShoulder;
  
    float InMatch         = 0.18;
    float OutMatch        = 0.18;

    float ToeMatch;
    if ( g_fFilmToe > 0.8 )
    {
        ToeMatch          = ( 1.0 - g_fFilmToe  - OutMatch ) / g_fFilmSlope
                          + log10 ( InMatch );
    }
    else
    {
        float bt          = ( OutMatch + g_fFilmBlackClip ) / ToeScale - 1.0;
        ToeMatch          = log10 ( InMatch ) 
                          - 0.5 * log ( ( 1.0 + bt ) / ( 1.0 - bt ) )
                          * ( ToeScale / g_fFilmSlope );
    }

    float StraightMatch   = ( 1.0 - g_fFilmToe ) / g_fFilmSlope - ToeMatch;
    float ShoulderMatch   = g_fFilmShoulder / g_fFilmSlope - StraightMatch;
  
    vec3 LogColor         = vec3 (
        log10 ( WorkingColor.r ),
        log10 ( WorkingColor.g ),
        log10 ( WorkingColor.b )
    );
    vec3 StraightColor    = g_fFilmSlope * ( LogColor + vec3 ( StraightMatch ) );
  
    vec3 ToeColor         = ( -g_fFilmBlackClip )
                          + ( 2.0 * ToeScale ) / ( 1.0 
                          + exp ( ( -2.0 * g_fFilmSlope / ToeScale )
                          * ( LogColor - vec3 ( ToeMatch ) ) ) );
    vec3 ShoulderColor    = ( 1.0 + g_fFilmWhiteClip )
                          - ( 2.0 * ShoulderScale ) / ( 1.0
                          + exp ( ( 2.0 * g_fFilmSlope / ShoulderScale )
                          * ( LogColor - vec3 ( ShoulderMatch ) ) ) );

    if ( LogColor.r > ToeMatch ) ToeColor.r = StraightColor.r;
    if ( LogColor.g > ToeMatch ) ToeColor.g = StraightColor.g;
    if ( LogColor.b > ToeMatch ) ToeColor.b = StraightColor.b;
    
    if ( LogColor.r < ShoulderMatch ) ShoulderColor.r = StraightColor.r;
    if ( LogColor.g < ShoulderMatch ) ShoulderColor.g = StraightColor.g;
    if ( LogColor.b < ShoulderMatch ) ShoulderColor.b = StraightColor.b;

    vec3 t                = vec3 (
        saturate ( ( LogColor.r - ToeMatch ) / ( ShoulderMatch - ToeMatch ) ),
        saturate ( ( LogColor.g - ToeMatch ) / ( ShoulderMatch - ToeMatch ) ),
        saturate ( ( LogColor.b - ToeMatch ) / ( ShoulderMatch - ToeMatch ) )
    );
    t                     = ShoulderMatch < ToeMatch ? 1.0 - t : t;
    t                     = ( 3.0 - 2.0 * t ) * t * t;
    vec3 ToneColor        = vec3 (
        lerp ( ToeColor.r, ShoulderColor.r, t.r ),
        lerp ( ToeColor.r, ShoulderColor.g, t.g ),
        lerp ( ToeColor.r, ShoulderColor.b, t.b )
    );

    // Post desaturate
    ToneColor             = vec3 (
        lerp ( dot ( ToneColor, AP1_RGB2Y ), ToneColor.r, 0.93 ),
        lerp ( dot ( ToneColor, AP1_RGB2Y ), ToneColor.g, 0.93 ),
        lerp ( dot ( ToneColor, AP1_RGB2Y ), ToneColor.b, 0.93 )
    );

    return max ( vec3 ( 0.0 ), AP1_2_sRGB * max ( vec3 ( 0.0 ), ToneColor ) );
}

void main ()
{
    FragColor = vec4 ( FilmToneMap ( vColor.rgb ), vColor.a );
}

Daniil Petrov
Удалён

#22
12:52, 8 фев 2018

PA3UJIb
Я что-то делаю не так?

ENAleksey
Постоялец

#23
13:06, 8 фев 2018

Скорее всего, нужно изменить порядок перемножения вектора на матрицу.
Например, вместо этого:

vec3 WorkingColor = sRGB_2_AP1 * LinearColor;

Делать так:

vec3 WorkingColor = LinearColor * sRGB_2_AP1;

И попробовать вместо этих матриц:

const mat3 sRGB_2_AP1 = XYZ_2_AP1_MAT * D65_2_D60_CAT * sRGB_2_XYZ_MAT;
const mat3 AP1_2_sRGB = XYZ_2_sRGB_MAT * D60_2_D65_CAT * AP1_2_XYZ_MAT;

Использовать эти:

const mat3 sRGB_2_AP1 = mat3(
    0.61319, 0.33951, 0.04737,
    0.07021, 0.91634, 0.01345,
    0.02062, 0.10957, 0.86961
);

const mat3 AP1_2_sRGB = mat3(
    1.70505, -0.62179, -0.08326,
    -0.13026, 1.14080, -0.01055,
    -0.02400, -0.12897, 1.15297
);

Daniil Petrov
Удалён

#24
13:29, 8 фев 2018

ENAleksey
Получается вот так:

ENAleksey
Постоялец

#25
13:34, 8 фев 2018

Daniil Petrov
Нужно изменить все строки, где происходит умножение вектора на матрицу.

PA3UJIb
Постоялец

#26
13:38, 8 фев 2018

Алгоритм, который Алексей привёл, выдерживаешь?

1. Получить цвет как sRGB.
2. Перевести из sRGB в линейный цвет.
3. Выполнить расчет освещения и постфильтрацию.
4. Выполнить тонирование.
5. Перевести цвет обратно из линейного пространства в sRGB.
6. Вывести результат.

ENAleksey
Постоялец

#27
13:59, 8 фев 2018

Daniil Petrov
Возьми код отсюда:
https://gamedev.ru/code/forum/?id=230008&page=2#m21
И замени это:

vec3 ToneColor = vec3 (
        lerp ( ToeColor.r, ShoulderColor.r, t.r ),
        lerp ( ToeColor.r, ShoulderColor.g, t.g ),
        lerp ( ToeColor.r, ShoulderColor.b, t.b ));

На это:

vec3 ToneColor = vec3 (
        lerp ( ToeColor.r, ShoulderColor.r, t.r ),
        lerp ( ToeColor.g, ShoulderColor.g, t.g ),
        lerp ( ToeColor.b, ShoulderColor.b, t.b ));

А ещё лучше, на это:

vec3 ToneColor = mix(ToeColor, ShoulderColor, t);

То, что я писал про матрицы, делать не надо.

Daniil Petrov
Удалён

#28
14:01, 8 фев 2018

PA3UJIb
> Алгоритм, который Алексей привёл, выдерживаешь?
1) Гружу текстуры как sRGB.
2) Включаю GL_FRAMEBUFFER_SRGB.
3) При выводе финальной картинки в буфер кадра пропускаю outputColor через тонирование.
А как полностью контролировать весь процесс, описанный выше?

ENAleksey
> И замени это:
Картинка слабо меняется :)

ENAleksey
Постоялец

#29
14:10, 8 фев 2018

Daniil Petrov
И это замени:

ToneColor             = vec3 (
        lerp ( dot ( ToneColor, AP1_RGB2Y ), ToneColor.r, 0.93 ),
        lerp ( dot ( ToneColor, AP1_RGB2Y ), ToneColor.g, 0.93 ),
        lerp ( dot ( ToneColor, AP1_RGB2Y ), ToneColor.b, 0.93 )
    );

На это:

ToneColor = mix(dot(ToneColor, AP1_RGB2Y), ToneColor, 0.93);