H D RHigh Dynamic Range<br />김정희<br />최유표<br />
Agenda<br />HDR, Tone Mapping, Luminance<br />Gamma<br />Filmic HDR in Uncharted2<br />Q&A<br />
HDR<br />HDR : High Dynamic Range<br />디스플레이의 밝기/색상범위 등에 얽매이지 않고 폭넓은 밝기/색상범위를 수행하는 것<br />RGBA 24Bit Color = 1677만색= 70dB<...
HDR<br />HDR로 얻을 수 있는 이점<br />음영을 큰 손실 없이 리얼하게 표현<br />노출 시뮬레이션<br />눈부심 표현<br />
음영표현<br />예<br />아스팔트 반사율 7%<br />0~255에서는 18  어둡다!<br />하지만 현실에서는 둔하게나마 빛나 보임!<br />태양은 255보다 훨씬 큰 휘도를 갖기 때문에…<br />아스팔트...
음영표현<br />
노출 시뮬레이션<br />인간이 지각할 수 있는 Dynamic Range<br />80~120dB, 10-6 ~ 106<br />하지만 보고 있는 Scene의 최대or평균 휘도에 영향을 많이 받음<br />액정을 어두운...
노출 시뮬레이션<br />Scene의 평균 휘도를 구한 후 Tone Mapping을 실행하면 적정 휘도로 Scene을 표현할 수 있다!<br />즉 눈의 광채가 광량을 보기 편하게 조정하는 동작을 흉내 낼 수 있다.<b...
노출 시뮬레이션<br />어두운 곳에 눈이 익숙해져 있는 상태에서 밝은 곳으로 이동하면 사물이 눈부시게 보인다.<br />밝은 곳에서 일정 시간이 지난 후에야 노출이 적절하게 보정된다.<br />
눈부심 표현<br />휘도가 높은 빛이 렌즈 안에서 반사되거나 속눈썹에서 회절 되어서 생기는 현상<br />Bloom : 고휘도의 빛이 희미하게 넘침<br />Glare : 고휘도의 물체에서 나오는 빛줄기<br />< ...
HDR Process<br />HDR <br />프레임버퍼<br />HDR 텍스쳐<br />Tone Mapping<br />HDR 광원<br />표시<br />Bloom/Glare<br />HDR 렌더타겟<br />동적...
유사 HDR<br />Int8 LDR 텍스쳐 사용<br />0~255 색  0~1 휘도 (보통의 경우)<br />0~255 색  0~2or0~4 휘도 (색표현↓휘도↑)<br />DXTC 압축이 가능<br />< 0~...
유사 HDR<br />로스트플래닛 (2007) 압축 기법<br />DXT5 이용<br />{r,g,b,1.0} 중 최대값 M 선택<br />인코딩: {r/M, g/M, b/M, 1/M} = {R, G, B, A}<br ...
Bloom/Glare<br />Bloom<br />평균 휘도 계산 <br />고휘도 추출 (Tone Mapping과 연관)<br />고휘도 부분 Blur<br />Gaussian Filter<br />1/4<br />통...
Work Buffer<br />회전해서 압축<br />Blur<br />원래대로 <br />되돌림<br />모두 합성<br />Bloom/Glare<br />Glare<br />
Tone Mapping<br />동일한 Scene이라도 어느 휘도를 기준으로 영상을 조정하는가에 따라서 다르게 보일 수 있다. <br />	 Tone Mapping의 기본 개념<br />
Tone Mapping<br />평균 휘도를Key로 프레임 내의 컬러들을 Display가 표현 가능한 1677만색으로 가중치를 붙여 조정하는 것<br />가장 단순한 선형 변환<br />비선형 변환<br />비선형의 조...
Tone Mapping<br />조정을 하지 않는다면 색이 치우침<br />조정을 통하여 색이 풍부해지는 효과<br />
휘도 측정<br />Luminance 평균 구하기<br />Lum(x,y) : (x,y) 픽셀의 휘도값<br />δ : 아주 작은 값<br />MipMap최저 레벨인 1x1 픽셀의 휘도를 이용할 수도 있음 (Direct...
휘도 측정<br />Lum(x,y) : CIE Yxy이용<br />RGB  Luminance<br />Luminance  RGB<br />
휘도 측정<br />각 픽셀의 Luminance (3x3)<br />Down Sampling (4x4)<br />
휘도 조정<br />기본 공식<br />예<br />LumAvg 0.36, MiddleGrey 0.18  ½ 어두워짐<br />LumAvg 0.09, MiddleGrey 0.18  2 밝아짐<br />
휘도 조정<br />휘도를0~1로 압축<br />
휘도 조정<br />Reinhard의 방식<br />Lwhite = 흰색으로 매핑하고자 하는 가장 작은 휘도값<br />White 2<br />White 6<br />
휘도 조정<br />Sample<br />White = Lwhite* Lwhite<br />
빛 적응<br />휘도가 크게 차이나는 곳을 이동하면 적응이 필요함<br />어두운 곳  밝은 곳 (몇 초만에)<br />밝은 곳  어두운 곳 (약 30분 정도)<br />게임에서는 적응 휘도를 사용하여 적당히!<b...
빛 적응<br />dt : 프레임 시간 간격<br />τtau: 적응률<br />τRods : 간상체의적응률, 약 0.2<br />τCones : 추상체의 적응률, 약 0.4<br />
빛 적응<br />LumAdapted : 현재 프레임의 Adapted Lum (?)<br />LumAvg = 0.5<br />LumAvg = 0.5<br />LumAvg = 0.1<br />< 4 프레임을 저장할 때 >...
빛 적응<br />암순응<br />밝기와 명도 감소<br />이미지 분산<br />약간 청색으로 보임<br />암순응 휘도<br />?<br />
Gamma<br />Gamma?<br />TV에서 수상부 입력 전압에 대한 음극선관 휘도와 피사체 휘도에 대한 카메라 출력 전압의 비율<br />γ, r로표기<br />Gamma와 CRT<br />TV나모니터 속에는 형...
Gamma<br />우리가 보는 일반 모니터도 r2.2<br />제대로 보이는 이유는 이미지가 밝게 보정되어 저장되어있기 때문<br />
Gamma<br />
Gamma<br />
Gamma<br />
Linear Space Lighting<br />어떤 이미지가 더 좋아 보이는가?<br />Good vs Correct<br />
Linear Space Lighting<br />OMG!<br />
Linear Space Lighting<br />Gamma 보정<br />
Linear Space Lighting<br />
Linear Space Lighting<br />HW 및 DX의 지원<br />D3DSAMP_SRGBTEXTURE (Texture)<br />D3DRS_SRGBWRITEENABLE (RenderTarget)<br />p...
Linear Space Lighting<br />
Linear Space Lighting<br />Diffuse Map <br />Gamma Space<br />Normal Map<br />Linear Space<br />Specular<br />Uncharted 2 ...
Filmic Tone Mapping<br />
Filmic Tone Mapping<br />
Filmic Tone Mapping<br />
Filmic Tone Mapping<br />Linear Curve vsReinhard<br />L.C : 색조가 심하게 변화됨<br />R : 부드러운 변화, 하지만검은성분이 사라짐<br />< Linear Curve...
Filmic Tone Mapping<br />Filmic Tone Mapping<br />풍부한 색상, 선명한 검은색<br />어떤 색상에서도 선명함<br />< Reinhard (위), Filmic Curve (아래)...
Filmic Tone Mapping<br />검은색 표현 : Filmic > Linear > Reinhard<br />Soft Highlight : Filmic = Reinhard > Linear<br />
Filmic Tone Mapping<br />Linear<br />
Filmic Tone Mapping<br />Reinhard<br />
Filmic Tone Mapping<br />Filmic<br />
Filmic Tone Mapping<br /><ul><li>by Haarm-Peter Duiker (KODAK Film 참고?)</li></ul>float4 ps_main( float2 texCoord  : TEXCOO...
Filmic Tone Mapping<br />by Jim Hejl, Richard Burgess-Dawson<br />이전 페이지 버전의 근사/최적화<br />pow(1/2.2) 불필요<br />float4 ps_mai...
Filmic Tone Mapping<br />float A = 0.15; // Shoulder Strength<br />float B = 0.50; // Linear Strength<br />float C = 0.10;...
Filmic Tone Mapping<br />적용하려면…<br />Lighting 모두를 손대야 할 수도 있다.<br />LDR 상태에서 Lighting을 조정(Tweak)했다면 단순히 공식 적용하는 것만으로는 부족하다...
References<br />Filmic Tone Mapping<br />http://filmicgames.com/<br />http://www.slideshare.net/ozlael/hable-john-uncharte...
Q & A<br />?<br />
Upcoming SlideShare
Loading in …5
×

D2 Hdr

3,685 views
3,435 views

Published on

Published in: Business, Technology
1 Comment
6 Likes
Statistics
Notes
No Downloads
Views
Total views
3,685
On SlideShare
0
From Embeds
0
Number of Embeds
1,212
Actions
Shares
0
Downloads
0
Comments
1
Likes
6
Embeds 0
No embeds

No notes for slide

D2 Hdr

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

×