HDRI 2

HDRI 2 (High Dynamic Range Image)

Tone Mapping

이미지에서 표현하는 ‘너무 밝은 색’을
우리의 모니터로 표현하기 위하여 ‘조정’하는 것을
Tone Mapping이라 한다

• HDRI를 LDR 용 디스플레이에 ‘맞게’ 변환
  

• Exposure(노출)
  

  전체 밝기 조절 (곱셈)
  

• Gamma (색감)
  

  전체 색감 보정 (pow)
  (톤 매핑 결과를 ‘디스플레이’에 맞도록 보정함)
  

• ToneMapping 결과는 1:1 의 선형적인 수치에서의 결과
  

• 디스플레이에서 ‘빛’에 비해 표현되는 수치가 대략 2.2이기에
  이에 따른 1/2.2 적용을 처리하는 방식
  (CRT Gamma 그래프)
  

• 그렇기에 감마수치를 낮추는 경우
  왼쪽으로 가며, ‘밝은 수치’는 비교적 남아 있으나
  중간 / 어두운 색은 더 빨리 어두워짐
  

적용 과정

[HDR SceneColor]
    ↓ (Exposure)
[조정된 밝기]
    ↓ (Tone Mapping)
[LDR 색상]
    ↓ (Gamma)
[화면 출력]

예제 - Tone Mapping 확인

HDRI (exr)

• Exposure를 낮추어도 ‘밝게 빛나는 곳’은 여전히 밝은 상황
  (전체적인 밝기는 낮아졌지만, 여전히 빛나는 느낌을 줄 수 있음)
  

LDR (jpg)

• Exposure를 낮추니 전체적으로 밝기가 낮아지는 모습
  

• Gamma 수치를 조정해주니 HDRI와 비슷한 연출은 가능
  

HLSL (Pixel Shader)

float3 LinearToneMapping(float3 color)
{
    float3 invGamma = float3(1, 1, 1) / gamma;

    color = clamp(exposure * color, 0., 1.);
    color = pow(color, invGamma);
    return color;
}

...

if (useAlbedoTexture)
{
    // 임시로 색 대입
    float3 albedo = g_albedoTexture.SampleLevel(g_sampler, input.texcoord, lod).rgb;
    diffuse.xyz = LinearToneMapping(albedo);
}

• Exposure 수치와 Gamma 수치를 Imgui로 입력받아 그 색을 return
  

• 여기서는 대입하지만 곱셈이 맞는 방식
  (톤 매핑의 효과를 보기 위함)
  

• 렌더링 결과에 이러한 톤매핑이 적용이 가능하나
  PBR을 진행한 후, 다시 알아볼 예정
  

• HDRI를 잘 사용하려면
  ‘여러 노출’ 값을 조정한 이미지들을
  잘 합성하여 만드는 방식
  (Multi-exposure HDR Capture)

• Tone Mapping 역시 Shader Toy 에 많이 존재하니
  필요에 따라 검색해서 찾아보자!