H D RHigh Dynamic Range김정희최유표
AgendaHDR, Tone Mapping, LuminanceGammaFilmic HDR in Uncharted2Q&A
HDRHDR : High Dynamic Range디스플레이의 밝기/색상범위 등에 얽매이지 않고 폭넓은 밝기/색상범위를 수행하는 것RGBA 24Bit Color = 1677만색= 70dB실제 세계 = 1012색 = 120dB 16Bit Color = 4.4* 1012 = 120dB어둠   달밤    여명   방안   햇빛원추체 : 밝은 빛이나 색을 느낌간상체: 어두운 빛을 느낌dB = 10 * Log10(X)1012 = 120dB원추체간상체
HDRHDR로 얻을 수 있는 이점음영을 큰 손실 없이 리얼하게 표현노출 시뮬레이션눈부심 표현
음영표현예아스팔트 반사율 7%0~255에서는 18  어둡다!하지만 현실에서는 둔하게나마 빛나 보임!태양은 255보다 훨씬 큰 휘도를 갖기 때문에…아스팔트<<넘사벽<<태양
음영표현
노출 시뮬레이션인간이 지각할 수 있는 Dynamic Range80~120dB, 10-6 ~ 106하지만 보고 있는 Scene의 최대or평균 휘도에 영향을 많이 받음액정을 어두운 곳에서 보았을 때 대낮의 야외에서 보았을 때광채(Iris)라는 눈의 부위가 안구로 통하는 광량을 조정하고 있기 때문에
노출 시뮬레이션Scene의 평균 휘도를 구한 후 Tone Mapping을 실행하면 적정 휘도로 Scene을 표현할 수 있다!즉 눈의 광채가 광량을 보기 편하게 조정하는 동작을 흉내 낼 수 있다.Tone MappingHDR 영상을 디스플레이로 표현하기 위한 색상 조정/가공 과정
노출 시뮬레이션어두운 곳에 눈이 익숙해져 있는 상태에서 밝은 곳으로 이동하면 사물이 눈부시게 보인다.밝은 곳에서 일정 시간이 지난 후에야 노출이 적절하게 보정된다.
눈부심 표현휘도가 높은 빛이 렌즈 안에서 반사되거나 속눈썹에서 회절 되어서 생기는 현상Bloom : 고휘도의 빛이 희미하게 넘침Glare : 고휘도의 물체에서 나오는 빛줄기< Bloom(좌) / Glare(우) >
HDR ProcessHDR 프레임버퍼HDR 텍스쳐Tone MappingHDR 광원표시Bloom/GlareHDR 렌더타겟동적인 환경맵 등을 이용HDR 텍스쳐Int8 LDR 텍스쳐여도 상관없지만 환경 맵이나 자체 발광 텍스쳐는HDR을 사용하는 것이 좋음
유사 HDRInt8 LDR 텍스쳐 사용0~255 색  0~1 휘도 (보통의 경우)0~255 색  0~2or0~4 휘도 (색표현↓휘도↑)DXTC 압축이 가능< 0~1(좌), 0~2(중), 0~4(우) >
유사 HDR로스트플래닛 (2007) 압축 기법DXT5 이용{r,g,b,1.0} 중 최대값 M 선택인코딩: {r/M, g/M, b/M, 1/M} = {R, G, B, A}디코딩: {R/A, G/A, B/A} = {R*M, G*M, B*M}단점 알파값을 사용할 수 없음R,G,B의 차이가 크면 해상도가 떨어짐
Bloom/GlareBloom평균 휘도 계산 고휘도 추출 (Tone Mapping과 연관)고휘도 부분 BlurGaussian Filter1/4통합1/81/161/32
Work Buffer회전해서 압축Blur원래대로 되돌림모두 합성Bloom/GlareGlare
Tone Mapping동일한 Scene이라도 어느 휘도를 기준으로 영상을 조정하는가에 따라서 다르게 보일 수 있다. 	 Tone Mapping의 기본 개념
Tone Mapping평균 휘도를Key로 프레임 내의 컬러들을 Display가 표현 가능한 1677만색으로 가중치를 붙여 조정하는 것가장 단순한 선형 변환비선형 변환비선형의 조합
Tone Mapping조정을 하지 않는다면 색이 치우침조정을 통하여 색이 풍부해지는 효과
휘도 측정Luminance 평균 구하기Lum(x,y) : (x,y) 픽셀의 휘도값δ : 아주 작은 값MipMap최저 레벨인 1x1 픽셀의 휘도를 이용할 수도 있음 (DirectX Sample)
휘도 측정Lum(x,y) : CIE Yxy이용RGB  LuminanceLuminance  RGB
휘도 측정각 픽셀의 Luminance (3x3)Down Sampling (4x4)
휘도 조정기본 공식예LumAvg 0.36, MiddleGrey 0.18  ½ 어두워짐LumAvg 0.09, MiddleGrey 0.18  2 밝아짐
휘도 조정휘도를0~1로 압축
휘도 조정Reinhard의 방식Lwhite = 흰색으로 매핑하고자 하는 가장 작은 휘도값White 2White 6
휘도 조정SampleWhite = Lwhite* Lwhite
빛 적응휘도가 크게 차이나는 곳을 이동하면 적응이 필요함어두운 곳  밝은 곳 (몇 초만에)밝은 곳  어두운 곳 (약 30분 정도)게임에서는 적응 휘도를 사용하여 적당히!
빛 적응dt : 프레임 시간 간격τtau: 적응률τRods : 간상체의적응률, 약 0.2τCones : 추상체의 적응률, 약 0.4
빛 적응LumAdapted : 현재 프레임의 Adapted Lum (?)LumAvg = 0.5LumAvg = 0.5LumAvg = 0.1< 4 프레임을 저장할 때 >
빛 적응암순응밝기와 명도 감소이미지 분산약간 청색으로 보임암순응 휘도?
GammaGamma?TV에서 수상부 입력 전압에 대한 음극선관 휘도와 피사체 휘도에 대한 카메라 출력 전압의 비율γ, r로표기Gamma와 CRTTV나모니터 속에는 형광물질이 발라진 CRT가 있는데이 CRT는 발광소자의 특성 및 기술적 한계로 인해 전기 신호의 입력값을 비례적으로 재현하지 못한다.CRT의 입력과 출력 비율은 평균 2.2 대부분 2.0~2.4 vs Mac 1.72
Gamma우리가 보는 일반 모니터도 r2.2제대로 보이는 이유는 이미지가 밝게 보정되어 저장되어있기 때문
Gamma
Gamma
Gamma
Linear Space Lighting어떤 이미지가 더 좋아 보이는가?Good vs Correct
Linear Space LightingOMG!
Linear Space LightingGamma 보정
Linear Space Lighting
Linear Space LightingHW 및 DX의 지원D3DSAMP_SRGBTEXTURE (Texture)D3DRS_SRGBWRITEENABLE (RenderTarget)pow Function이 필요없다!
Linear Space Lighting
Linear Space LightingDiffuse Map Gamma SpaceNormal MapLinear SpaceSpecularUncharted 2 : Linear하지만 Gamma Space가 맞는것 같다.Ambient OcclusionUncharted 2 : Linear하지만 Gamma Space가 맞는것 같다.
Filmic Tone Mapping
Filmic Tone Mapping
Filmic Tone Mapping
Filmic Tone MappingLinear Curve vsReinhardL.C : 색조가 심하게 변화됨R : 부드러운 변화, 하지만검은성분이 사라짐< Linear Curve (위), Reinhard (아래) >
Filmic Tone MappingFilmic Tone Mapping풍부한 색상, 선명한 검은색어떤 색상에서도 선명함< Reinhard (위), Filmic Curve (아래) >
Filmic Tone Mapping검은색 표현 : Filmic > Linear > ReinhardSoft Highlight : Filmic = Reinhard > Linear
Filmic Tone MappingLinear
Filmic Tone MappingReinhard
Filmic Tone MappingFilmic
Filmic Tone Mappingby Haarm-Peter Duiker (KODAK Film 참고?)float4 ps_main( float2 texCoord  : TEXCOORD0 ) : COLOR{   float3 texColor = tex2D(Texture0, texCoord );   float3 ld = 0.002;   float linReference = 0.18;   float logReference = 444;   float logGamma = 0.45;   float3 LogColor;   LogColor.rgb = (log10(0.4*texColor.rgb/linReference) / ld * logGamma + logReference) / 1023.f;   LogColor.rgb = saturate(LogColor.rgb);   float FilmLutWidth = 256; float Padding = .5/FilmLutWidth;//  apply response lookup and color grading for target display   float3 retColor;retColor.r = tex2D(FilmLut, float2( lerp(Padding,1-Padding,LogColor.r), .5)).r;retColor.g = tex2D(FilmLut, float2( lerp(Padding,1-Padding,LogColor.g), .5)).r;retColor.b = tex2D(FilmLut, float2( lerp(Padding,1-Padding,LogColor.b), .5)).r;   return float4(retColor,1);}pow(1/2.2) 불필요3번의 Texture Look Up이 필요
Filmic Tone Mappingby Jim Hejl, Richard Burgess-Dawson이전 페이지 버전의 근사/최적화pow(1/2.2) 불필요float4 ps_main( float2 texCoord  : TEXCOORD0 ) : COLOR{   float3 texColor = tex2D(Texture0, texCoord );	float3 x = max(0,texColor-0.004);   float3 retColor = (x*(6.2*x+.5))/(x*(6.2*x+1.7)+0.06);   return float4(retColor,1);}
Filmic Tone Mappingfloat A = 0.15; // Shoulder Strengthfloat B = 0.50; // Linear Strengthfloat C = 0.10; // Linear Anglefloat D = 0.20; // Toe Strengthfloat E = 0.02; // Toe Numerator (분자)float F = 0.30; // Toe Denominator (분모)float W = 11.2; // Linear White Point Valuefloat3 Uncharted2Tonemap(float3 x){   return ((x*(A*x+C*B)+D*E)/(x*(A*x+B)+D*F))-E/F;}float4 ps_main( float2 texCoord  : TEXCOORD0 ) : COLOR{   float3 texColor = tex2D(Texture0, texCoord );   float ExposureBias = 2.0f;   float3 curr = Uncharted2Tonemap(ExposureBias*texColor);   float3 whiteScale = 1.0f/Uncharted2Tonemap(W);   float3 color = curr*whiteScale;   return float4( pow(color, 1/2.2), 1 );}Toe, Shoulder 등을 조정할 수 있음pow(1/2.2) 필요함
Filmic Tone Mapping적용하려면…Lighting 모두를 손대야 할 수도 있다.LDR 상태에서 Lighting을 조정(Tweak)했다면 단순히 공식 적용하는 것만으로는 부족하다.
ReferencesFilmic Tone Mappinghttp://filmicgames.com/http://www.slideshare.net/ozlael/hable-john-uncharted2-hdr-lighting?from=ss_embedHDR/Luminancehttp://kyruie.tistory.com/13#ph1_12http://allosha.tistory.com/category/3D%20%EA%B7%B8%EB%9E%98%ED%94%BD%EC%8A%A4%20%EB%A7%A4%EB%8B%88%EC%95%85%EC%8A%A4/HDR%20%EB%A0%8C%EB%8D%94%EB%A7%81Linear Space GPU Gems 3, Chapter 24
Q & A?

D2 Hdr

  • 1.
    H D RHighDynamic Range김정희최유표
  • 2.
    AgendaHDR, Tone Mapping,LuminanceGammaFilmic HDR in Uncharted2Q&A
  • 3.
    HDRHDR : HighDynamic Range디스플레이의 밝기/색상범위 등에 얽매이지 않고 폭넓은 밝기/색상범위를 수행하는 것RGBA 24Bit Color = 1677만색= 70dB실제 세계 = 1012색 = 120dB 16Bit Color = 4.4* 1012 = 120dB어둠 달밤 여명 방안 햇빛원추체 : 밝은 빛이나 색을 느낌간상체: 어두운 빛을 느낌dB = 10 * Log10(X)1012 = 120dB원추체간상체
  • 4.
    HDRHDR로 얻을 수있는 이점음영을 큰 손실 없이 리얼하게 표현노출 시뮬레이션눈부심 표현
  • 5.
    음영표현예아스팔트 반사율 7%0~255에서는18  어둡다!하지만 현실에서는 둔하게나마 빛나 보임!태양은 255보다 훨씬 큰 휘도를 갖기 때문에…아스팔트<<넘사벽<<태양
  • 6.
  • 7.
    노출 시뮬레이션인간이 지각할수 있는 Dynamic Range80~120dB, 10-6 ~ 106하지만 보고 있는 Scene의 최대or평균 휘도에 영향을 많이 받음액정을 어두운 곳에서 보았을 때 대낮의 야외에서 보았을 때광채(Iris)라는 눈의 부위가 안구로 통하는 광량을 조정하고 있기 때문에
  • 8.
    노출 시뮬레이션Scene의 평균휘도를 구한 후 Tone Mapping을 실행하면 적정 휘도로 Scene을 표현할 수 있다!즉 눈의 광채가 광량을 보기 편하게 조정하는 동작을 흉내 낼 수 있다.Tone MappingHDR 영상을 디스플레이로 표현하기 위한 색상 조정/가공 과정
  • 9.
    노출 시뮬레이션어두운 곳에눈이 익숙해져 있는 상태에서 밝은 곳으로 이동하면 사물이 눈부시게 보인다.밝은 곳에서 일정 시간이 지난 후에야 노출이 적절하게 보정된다.
  • 10.
    눈부심 표현휘도가 높은빛이 렌즈 안에서 반사되거나 속눈썹에서 회절 되어서 생기는 현상Bloom : 고휘도의 빛이 희미하게 넘침Glare : 고휘도의 물체에서 나오는 빛줄기< Bloom(좌) / Glare(우) >
  • 11.
    HDR ProcessHDR 프레임버퍼HDR텍스쳐Tone MappingHDR 광원표시Bloom/GlareHDR 렌더타겟동적인 환경맵 등을 이용HDR 텍스쳐Int8 LDR 텍스쳐여도 상관없지만 환경 맵이나 자체 발광 텍스쳐는HDR을 사용하는 것이 좋음
  • 12.
    유사 HDRInt8 LDR텍스쳐 사용0~255 색  0~1 휘도 (보통의 경우)0~255 색  0~2or0~4 휘도 (색표현↓휘도↑)DXTC 압축이 가능< 0~1(좌), 0~2(중), 0~4(우) >
  • 13.
    유사 HDR로스트플래닛 (2007)압축 기법DXT5 이용{r,g,b,1.0} 중 최대값 M 선택인코딩: {r/M, g/M, b/M, 1/M} = {R, G, B, A}디코딩: {R/A, G/A, B/A} = {R*M, G*M, B*M}단점 알파값을 사용할 수 없음R,G,B의 차이가 크면 해상도가 떨어짐
  • 14.
    Bloom/GlareBloom평균 휘도 계산고휘도 추출 (Tone Mapping과 연관)고휘도 부분 BlurGaussian Filter1/4통합1/81/161/32
  • 15.
    Work Buffer회전해서 압축Blur원래대로되돌림모두 합성Bloom/GlareGlare
  • 16.
    Tone Mapping동일한 Scene이라도어느 휘도를 기준으로 영상을 조정하는가에 따라서 다르게 보일 수 있다.  Tone Mapping의 기본 개념
  • 17.
    Tone Mapping평균 휘도를Key로프레임 내의 컬러들을 Display가 표현 가능한 1677만색으로 가중치를 붙여 조정하는 것가장 단순한 선형 변환비선형 변환비선형의 조합
  • 18.
    Tone Mapping조정을 하지않는다면 색이 치우침조정을 통하여 색이 풍부해지는 효과
  • 19.
    휘도 측정Luminance 평균구하기Lum(x,y) : (x,y) 픽셀의 휘도값δ : 아주 작은 값MipMap최저 레벨인 1x1 픽셀의 휘도를 이용할 수도 있음 (DirectX Sample)
  • 20.
    휘도 측정Lum(x,y) :CIE Yxy이용RGB  LuminanceLuminance  RGB
  • 21.
    휘도 측정각 픽셀의Luminance (3x3)Down Sampling (4x4)
  • 22.
    휘도 조정기본 공식예LumAvg0.36, MiddleGrey 0.18  ½ 어두워짐LumAvg 0.09, MiddleGrey 0.18  2 밝아짐
  • 23.
  • 24.
    휘도 조정Reinhard의 방식Lwhite= 흰색으로 매핑하고자 하는 가장 작은 휘도값White 2White 6
  • 25.
  • 26.
    빛 적응휘도가 크게차이나는 곳을 이동하면 적응이 필요함어두운 곳  밝은 곳 (몇 초만에)밝은 곳  어두운 곳 (약 30분 정도)게임에서는 적응 휘도를 사용하여 적당히!
  • 27.
    빛 적응dt :프레임 시간 간격τtau: 적응률τRods : 간상체의적응률, 약 0.2τCones : 추상체의 적응률, 약 0.4
  • 28.
    빛 적응LumAdapted :현재 프레임의 Adapted Lum (?)LumAvg = 0.5LumAvg = 0.5LumAvg = 0.1< 4 프레임을 저장할 때 >
  • 29.
    빛 적응암순응밝기와 명도감소이미지 분산약간 청색으로 보임암순응 휘도?
  • 30.
    GammaGamma?TV에서 수상부 입력전압에 대한 음극선관 휘도와 피사체 휘도에 대한 카메라 출력 전압의 비율γ, r로표기Gamma와 CRTTV나모니터 속에는 형광물질이 발라진 CRT가 있는데이 CRT는 발광소자의 특성 및 기술적 한계로 인해 전기 신호의 입력값을 비례적으로 재현하지 못한다.CRT의 입력과 출력 비율은 평균 2.2 대부분 2.0~2.4 vs Mac 1.72
  • 31.
    Gamma우리가 보는 일반모니터도 r2.2제대로 보이는 이유는 이미지가 밝게 보정되어 저장되어있기 때문
  • 32.
  • 33.
  • 34.
  • 35.
    Linear Space Lighting어떤이미지가 더 좋아 보이는가?Good vs Correct
  • 36.
  • 37.
  • 38.
  • 39.
    Linear Space LightingHW및 DX의 지원D3DSAMP_SRGBTEXTURE (Texture)D3DRS_SRGBWRITEENABLE (RenderTarget)pow Function이 필요없다!
  • 40.
  • 41.
    Linear Space LightingDiffuseMap Gamma SpaceNormal MapLinear SpaceSpecularUncharted 2 : Linear하지만 Gamma Space가 맞는것 같다.Ambient OcclusionUncharted 2 : Linear하지만 Gamma Space가 맞는것 같다.
  • 42.
  • 43.
  • 44.
  • 45.
    Filmic Tone MappingLinearCurve vsReinhardL.C : 색조가 심하게 변화됨R : 부드러운 변화, 하지만검은성분이 사라짐< Linear Curve (위), Reinhard (아래) >
  • 46.
    Filmic Tone MappingFilmicTone Mapping풍부한 색상, 선명한 검은색어떤 색상에서도 선명함< Reinhard (위), Filmic Curve (아래) >
  • 47.
    Filmic Tone Mapping검은색표현 : Filmic > Linear > ReinhardSoft Highlight : Filmic = Reinhard > Linear
  • 48.
  • 49.
  • 50.
  • 51.
    Filmic Tone MappingbyHaarm-Peter Duiker (KODAK Film 참고?)float4 ps_main( float2 texCoord : TEXCOORD0 ) : COLOR{ float3 texColor = tex2D(Texture0, texCoord ); float3 ld = 0.002; float linReference = 0.18; float logReference = 444; float logGamma = 0.45; float3 LogColor; LogColor.rgb = (log10(0.4*texColor.rgb/linReference) / ld * logGamma + logReference) / 1023.f; LogColor.rgb = saturate(LogColor.rgb); float FilmLutWidth = 256; float Padding = .5/FilmLutWidth;// apply response lookup and color grading for target display float3 retColor;retColor.r = tex2D(FilmLut, float2( lerp(Padding,1-Padding,LogColor.r), .5)).r;retColor.g = tex2D(FilmLut, float2( lerp(Padding,1-Padding,LogColor.g), .5)).r;retColor.b = tex2D(FilmLut, float2( lerp(Padding,1-Padding,LogColor.b), .5)).r; return float4(retColor,1);}pow(1/2.2) 불필요3번의 Texture Look Up이 필요
  • 52.
    Filmic Tone MappingbyJim Hejl, Richard Burgess-Dawson이전 페이지 버전의 근사/최적화pow(1/2.2) 불필요float4 ps_main( float2 texCoord : TEXCOORD0 ) : COLOR{ float3 texColor = tex2D(Texture0, texCoord ); float3 x = max(0,texColor-0.004); float3 retColor = (x*(6.2*x+.5))/(x*(6.2*x+1.7)+0.06); return float4(retColor,1);}
  • 53.
    Filmic Tone MappingfloatA = 0.15; // Shoulder Strengthfloat B = 0.50; // Linear Strengthfloat C = 0.10; // Linear Anglefloat D = 0.20; // Toe Strengthfloat E = 0.02; // Toe Numerator (분자)float F = 0.30; // Toe Denominator (분모)float W = 11.2; // Linear White Point Valuefloat3 Uncharted2Tonemap(float3 x){ return ((x*(A*x+C*B)+D*E)/(x*(A*x+B)+D*F))-E/F;}float4 ps_main( float2 texCoord : TEXCOORD0 ) : COLOR{ float3 texColor = tex2D(Texture0, texCoord ); float ExposureBias = 2.0f; float3 curr = Uncharted2Tonemap(ExposureBias*texColor); float3 whiteScale = 1.0f/Uncharted2Tonemap(W); float3 color = curr*whiteScale; return float4( pow(color, 1/2.2), 1 );}Toe, Shoulder 등을 조정할 수 있음pow(1/2.2) 필요함
  • 54.
    Filmic Tone Mapping적용하려면…Lighting모두를 손대야 할 수도 있다.LDR 상태에서 Lighting을 조정(Tweak)했다면 단순히 공식 적용하는 것만으로는 부족하다.
  • 55.
  • 56.