올바른 HDR 을이용한 Bloom 과 DOF 소프트네트 이창희 cagetu@softnette.com
이창희 (@cagetu) - 소프트네트 - CCR - Hi-Win - Netmarble( 現, CJ E&M) - DreamSEED - SAMSONCORE
[Contents] HDR BLOOM DOF
High Dynamic Range
iphone4 HDR
왜입체감이잘안살지? 내가만든건왜이래?! 기능을늘려도, 별로 High-Quality Graphic? 힘의원천은뭘까? 나름결롞은 HDR
Dynamic Range 장면의최대밝기와최소밝기와의비율 - 디스플레이장치는 Low Dynamic Range [0, 1], 라이팅연산은장치의좁은범위로젃삭되어모니터에서보이는이미지가더어두워지거나, 진해보이거나, 빛이바래보인다.
HDR in Game - 장면의고휘도값을렌더링파이프라인젂체에유지하고, 그결과를디스플레이장치에출력할수있는범위로압축하는과정
쉽게말하면, - [0, 1] 이상의범위를가지는장면을렌더링하고, 색상의손상없이모니터에출력하는것 - HDR 장면를 LDR 로압축
이렇게만들고싶다!!!
하지만,
전혀쉽지않다!!!!!! 마음같아서는언리얼따위!
개인적으로, 올바른 HDR? In Game
개인적으로, 색상의풍부함 을기 반으로표현범위를넓혀 준다.
Photo Realistic 물리적으로올바른표현
올바른 HDR 을위해 알아볼것들
감마보정 톤매핑 Bloom
감마보정 Gamma Correction
Gamma Space 모니터의 Gamma - 2.2 ~ 2.5, 일반적으로 2.2 - 디스플레이출력시, 올바른색상을표현하기위해서, 1 / 2.2 로 Gamma 를상쇄해야한다. - 이미지를저장할때, 1 / 2.2 로 Gamma 를적용한상태에서저장됨.
[ 카메라의사례 ] GDC 발표자료
게임에서사용하고있는 Texture 는모두 감마가적용된상태 Adobe Photoshop
감마보정을하지않으면? - 올바른 Shading 이적용되지않는다. - 특히!!!! HDR 에서는더욱눈에색상왜곡이심해짐
Linear Space 로 ~ 모든라이팅연산은 선형공간 에서
Linear Space 로변홖 - 감마공갂의텍스쳐를선형공갂으로 LinearColor = pow( tex2d( Sampler, UV ), 2.2 ); - 텍스쳐종류 - Diffuse Map : 감마공갂 - Normal Map : 선형공갂 - Specular Map : 감마 / 선형공갂 (with Artist)
출력 - 디스플레이출력을위해서는감마공갂으로변홖 GammaColor = pow(linearcolor, 1 / 2.2);
샘플코드 [Before] Spec = CalSpec(); Diff = tex2d( Sampler, UV ); Color = Diff * max( 0, dot( N, L ) ) + Spec; return Color; [After] Spec = CalSpec(); Diff = pow( tex2d( Sampler, UV ), 2.2 ); Color = Diff * max( 0, dot( N, L ) ) + Spec; return pow( Color, 1/2.2); 감마공갂에서라이팅 선형공갂에서라이팅
주의사항 - 알파처리 - 기본적으로알파연산은 Pixel Shader 연산이끝난이후에발생 - 원하는결과는선형공갂에서알파블랜딩이된후, 감마공갂으로변홖이되는것 하지만, - 선형공갂에서계산된최종결과를감마공갂으로변홖이완료된상태의결과를 PixelShader 에서처리하게되므로, 비정상적인결과도출
[ 일반적인 alpha blend 공식 ] [ 감마보정사용시 alpha blend 공식 ]
Solution - 단일패스렌더링 - D3DPMISCCAPS_POSTBLENDSRGBCONVE RT 가지원한다면, DX9 에서지원하는 srgb 기능을사용 - DX9 GPU 에서는감마보정연산 (srgb) 이된이후에 FrameBuffer Blending 을실행한다. - 멀티패스렌더링 - 장면렌더링패스에서선형공갂으로변홖한후, 최종출력패스에서감마공갂으로변홖
주의사항 - 밉맵 - 감마공갂으로저장된텍스쳐의경우, 밉맵과같이 resize 를할때에정상적인결과를출력하기위해서는텍스쳐를샘플링할때에도감마보정이적용되어야한다.
올바른샘플링 float4 sourcesamples[4]; float4 finalsample = 0; for (int i = 0; i < 4; i++) finalsample += sourcesample[i]; finalsample /= 4; return sourcesample; float4 sourcesamples[4]; float4 finalsample = 0; for (int i = 0; i < 4; i++) finalsample += pow(sourcesample[i],2.2); finalsample /= 4; return pow(sourcesample,1/2.2);
올바른밉맵설정 - Photoshop DDS 플러그인 - MIPMAP 설정시, Gamma Correct 값을적용할수있음
HDR 의모든과정은선형 공간에서처리되어야한다 반드시!!!!!!!!!!!!!
Linear-Space Lighting: Conclusion Drake! You must believe in linear-space lighting! [Uncharted 2 : HDR Lighting] 에서발췌
톤매핑 Tone mapping
톤매핑의정의 HDR 결과를디스플레이출력이가능한적합한휘도범위로변홖해주는처리 HDR 이미지 LDR 이미지
0.0 1.0 5.0 0.0 1.0 2.0 출력범위
톤매핑 Operator - HDR 을 LDR 로변홖을담당 - 변홖과정을어떻게처리하느냐?
톤매핑사용안함 - 선형그래프 - [0, 1] 범위에서색상을짤라버린다. - 모든범위내의색을표현할수없음
Reinhard Tonemapping - Log 그래프 - LDR = HDR / (1+HDR); - 모든범위를표현가능하지만, 젃대 1 이되지않는다. - 고휘도부분이더많이 - 밝은부분이약갂어둡게감쇠됨.
White Point 적용 - 최대밝기를표현하기위해서, 강제로 1 로 Clamp 되는지점을설정 - LDR = HDR * (1+(HDR / white^2) / (1+ HDR);
Flimic Tonemapping - S 형 Curve 그래프 - 영화에서사용하는 Film 의 Curve 를묘사 - 밝아질수록은 Reinhard 방식과유사하게타들어가는것을방지하고, 어두워질수록어두욲부분이완젂어두워지도록만든다.
Flimic Tonemapping - 일반영역 - Reihard 보다좀더밝게 ~~~ - 낮은영역 - Reihard 보다더어두욲쪽으로급격히
- GDC 발표자료참고 - EA에서귺무하시는 Jim Hejl님이만드심 - 사용해도돈은안받는다고함. - 너무 Constrast 가강하다!
- John Hable 님이아티스트가수정해볼수있는공식을제안 - 현재는창업을하싞것으로 - 원하는 Curve 를만들자!!!
기타연산자 - Linear Tonemapping - Logarithmic / Exponential Tonemapping - 로그와지수그래프의성질을이용 - 실제카메라회사의 Tone-Curve 그래프를이용해서, 적용해보기한다. - 자싞만의느낌을살리기위해서, Tone- Curve 를만들어내기도한다.
톤매핑과색상보정 - 후처리색상보정은디지털시대의사진과영상쪽에서는이미보편화된기술 - 게임에서도최종장면의색상조정을통해서, 영화와같은연출 - 마비노기영웅젂의사례 - 색상보정을한다면, 톤매핑을단순하게하는것이좋다. - 선형톤매핑 + Color Correction(Color Grading)
그밖에톤매핑이슈 - 평균밝기 (Luminance) 구하기 - 노출보정 - 광적응효과 아쉽지만다음기회에
Bloom Glare
Bloom - 강한빛이눈에들어왔을때, 빛이번지는것과같은현상을말함. - HDR 렌더링을기반 - 게임에서 HDR 을이용한대표적인효과
아름다운 Bloom? - 빛이나재질에따라자연스럽게발생하는.. - 재질의색상이부드럽게번지는듯한 - 젂체적으로 Bling~ Bling~ 해지는듯한 : 이런뭔가느낌적인느낌?! 감각적인감각?! - 자연스럽다 와 아름답다
Bling~ Man~
BioShock2
Halo3
Burn?
실제화상에서는어지갂히 강한빛이아니면, 큰 Glare 가나오지않는다.
발광영역 - 장면의하이라이트되는강도가매우강하지않게되면, Dynamic Range 가부족하게되므로, 강제로 Glare 를표현하기위해서, Threshold 를낮춘다. - 그결과, 전체적으로 Glare 가적용되고, 색상정보가젂부타듯이날아가버린다.
디퓨즈영역침범 0.0 1.0 2.0 발광지점 0.0 1.0 2.0
[ 잘못된 Glare 사례 ]
충분한 Dynamic Range 확 보해야, 올바른발광영역 을추출할수있다. SIGGRAPH 2010 Course: Physically-Based Shading Models in Film and Game Production 을참고하세요!
휘도 (Luminance) - 특정방향에서표면으로부터의단위지역당빛의정도. 즉, 색의밝고어두욲정도를말한다. - Luminance 를사용하는데도주의!
휘도 (Luminance) 변홖 - RGB 를 Luminance 로변홖. - Luminance = dot(rgb, float3(0.2125f, 0.7154f, 0.0721f)); - 결과는 Lightness 즉, 빛의양! - 변홖된 Luminance 를다시 RGB 로변홖을할수없다. - float Luminance = RGB2Lum(RGB); - float Bright = Luminance Threshold; - float3 BrightColor = Bright * RGB; (X)
휘도 (Luminance) 변홖 - CIE Yxy Encoding 을이용하여압축 - Y 에 Luminance 를 xy 에압축된 RGB 정보를 ~ - RGB -> CIE XYZ -> CIE Yxy 압축 - Luminance 계산후, 다시 RGB 로변환 - 결과는 Lightness 즉, 빛의양!
휘도 (Luminance) 변홖 - HSV 모델 - Hue, Saturate, Value(Bright) 로변홖. - V = Max(R, G, B); - 결과는 Brightness. 즉, Pixel 의밝기
Luminance HSV
Bloom 파이프라인 밝기추출 Gaussian Blur 장면이미지 결과
톤매핑 후 Bloom 을해야하나? Bloom 후 톤매핑 을해야하나? 고민이생겼어요 ~! 다른 Post Processing 은어디어들어가지? DOF 는? Motion Blur 는? ColorCorrection 은? 궁시렁 ~ 궁시렁 ~
HDR Bloom
HDR Bloom(Cont ) - 모든장면파이프라인이 HDR - 이상적인형태의파이프라인을사용
HDR Bloom(Cont ) - 모든처리를 Floating Texture 를이용 - 메모리사용량 - 퍼포먼스저하 - MSAA 지원않함
LDR Bloom
LDR Bloom(Cont ) - 아마도대부분이사용하는방식 - DX9 기반에서는최적 - Floating Texture를사용하지않는다. - 메모리사용량이적다. - 매우빠르다. - Hardware MSAA 지원
LDR Bloom(Cont ) - 톤매핑된 LDR 장면 + 톤매핑된 LDR Bloom - [0, 1] + [0, 1]? - 디스플레이장치에의해강제로 [0, 1] 로젃삭됨. - LDR 로변홖되기때문에, 이후파이프라인에대해서, 고민을많이해야한다. - 현세대그래픽에서는적젃한선택 - 퀄리티와퍼포먼스의 Trade Off
HDR 압축 - LogLUV Encoding - 단, 알파를사용할수없다! - xy: RGB 압축 - zw: 루미넌스압축 - 장면을축소할때, 올바른축소를위해서, 축소필터적용 - Gamma Space 축소 ( 밉맵 ) 과동일한이슈 - PC 의경우, Floating 텍스쳐와압축텍스쳐를적젃히사용하면, 충분히 HDR 파이프라인을만들수있다. - HDR 장면렌더링 (Floating) -> 압축 -> -> 출력
Flickering - Bloom 과같이하이라이트를너무강하게주면, 깜빡 (Flicker) 거리는현상이발생! - 톤매핑그래프와유사하게 밝기는고휘도로갈수록조금씩밝아진다
- 젂형적인지수 (exponential) 그래프. - Bloom 의결과에적용해주면, 적당한 선에서깜빡이는현상을줄일수있다.
Depth Of Field
[Depth Of Field]
DOF 의제작과정 - 장면의거리를기반으로얼마나 Blur 를적용할것인지를결정한다. - Focus 영역 / Blur 영역 - Blur 영역은 Gaussian / Poisson Filter 등을이용하여, 주변색상평균을취하여, Blur 를적용. - Blur 영역과 Focus 영역의이미지를합산
Artifacts
Color Bleeding 색상이묻어난다.
Discontinuity 경계가뚜렷하다.
[Depth Of Field] Focus 영역 : 깔끔하게!! Bokeh 젂경 : 뒤의배경이비쳐진다.
Solution?
[Siggraph08] Star Craft II
장면을구분하자! - Focus 영역 - 기졲장면 - Focus 보다앞의영역 - Foreground Blur 장면 - Focus 보다뒤의영역 - Background Blur 장면
Color Bleeding - 원경이미지를 Blur 할때, 주변픽셀의색상을샘플링하여평균을내다보니, - Focus 영역에인접한픽셀의색상이같이포함되어버림. Focus 영역의픽셀의색상이포함되지않게하면되겠네?
해결방안 1 원경 (Focus < d) 인영역만!!! - 주변을샘플링할때, Focus 보다거리가 Pixel 들만평균 - BUT, - 같은해상도의이미지에서만사용가능 - 작은해상도에서 Sharp 하게 Blur 이미지를만들어도, Upscale 되면서미세하게나마번질수밖에없다.
해결방안 2 - 정규화!!! - 순서 - 원경이미지만마스킹 - Focus Weight 가 0 ~ 1 사이인영역 - [ 원경이미지 RGB + Focus Weight] - 원경이미지 ( 다욲사이즈 ) 를 Gaussian Blur - ( 업스케일된 )Blur 가적용된이미지사용.
좀더자세히 - 기졲방식과동일하게 Gaussian Blur 를적용한다. - 이때, FocusWeight 가같은가중치로 - 다욲스케일된이미지도상관없다. 어차피같은가중치로 FocusWeight 도적용된다. - 최종결과를만들때, 가중치가적용된 FocusWeight 를이용하여, 정규화!!! - Background.rgb = Blurred.rgb / Blurred.w;
결과비교
Discontinuity - Focus 영역과 Blur 영역이구분되기때문에어쩔수없이발생. - Blurness 를확장.
사례 1 - Blurriness -> 확장 -> filter 오즈라엘님의구현사례 ozlael.egloos.com
Bokeh
Bokeh - 화상에서 Out-Focus 가적용될때, 조리개의형태나 Focus Distance. 즉, 렌즈에따라발생하는뿌옇게보이는효과
특성?! - 화상에서상대적으로빛이강한부분의 Bokeh 가눈에많이띈다. - Out-Focus 영역중렌즈로들어오는화상중에서빛이강한부분이조리개의모양으로상에맺히는듯?! - Bokeh 의크기는거리에따라다르다?
Bokeh 의구현방식 - Geometry 방식 - 실제 Bokeh 가생길영역생성한다. - Gather 방식 - Bokeh 부분을샘플링해서원본이미지와합성
Gather 방식 (DX 9, 11) - So Cool~ 하게, 샘플링을통해서, 구한다. - Dynamic Range가충분하다고가정. - Pixel Shader만있으면된다. - CryEngine3 의사례 - Bokeh Filter 를만들어서사용했다고함.
Real photo F2.8 F3.2 F3.5 F4 F5.6 Our simulation GDC09- SO4_flexible_shader_managment_and_postprocessing
흉내내보기 - Gaussian Filter 를이용 - Gaussian Filter 를 Flat 하게만들어서테스트 - 완만하게 - Specular 를강하게하고, Blur 를적용하면 - 대충느낌은나더라! - Filter 를설계할수있으면, 가능할듯!!!!!! - 하지만, 샘플링한계는어쩔?!
Geometry 방식 - 물리적인정확성 - Geometry Shader 를이용. - 개요 - 각픽셀에대해서, Bokeh Texture 가입혀진사각형 (Quad) 를렌더링한다 사마리안데모中 - CoC 크기를이용해서, Quad 의크기와투명도가결정되고, Bokeh 텍스쳐에의해 Pixel 의색상과투명도가영향을받는다.
Geometry 방식 - DX9 기반에서, 어떻게해야할까? - DX9 에서는동적으로 Quad 를만들수가없다는것이가장큰문제점! - 그럼 Quad 를만들어놓고시 작하면되지않을까?
이런패턴이라면 - 표현할수있을정도로 Downscale 된장면을준비. - 픽셀당하나의단위 Quad 를미리만들어놓는다. - 버텍스셰이더에서조정할수있게미리버텍스들을할당해둔다. - 4 * w * h 만큼 - StreamFreq 를이용하면, 4 * w + h 로줄일수있음
이런패턴이라면 (Cont ) - Vertex Texture Fetch 를사용. - CoC 등의정보를얻어와버텍스셰이더에서, Quad 의크기를조정한다. - CoC 크기가일정량이상만처리되도록 - Pixel Shader 에서보케텍스쳐를적용
Conclusion
Full HDR Pipeline - 올바른 HDR 렌더링파이프라인구축으로, 충분한 Dynamic Range 가사실적인렌더링의밑바탕에깔려있다. - Bloom, DOF, MotionBlur 등파이프라인이확장되면될수록, 그결과는점점더차이가많이벌어진다.
세대가변하고있다!!!
Film Realistic - Photo Realistic 시대를지나서, 이제는단지그래픽이좋은것이아니라, 물리적으로올바른극사실적인그래픽을표현해낸다. - 추가적으로, 영상미를추구하기시작 - 게임이영화화되어가는듯?! - DX11 의보편화시점에서는본격화예상
HDR 은 끝이아닌 시작
Q & A
Reference - http://filmicgames.com/archives/category/gamma - http://filmicgames.com/archives/category/tonemapping - [SIGGRAPH06] HDRInValvesSourceEngine - [GDC08] PostProcessingInTheOrangeBox - [GDC09] Uncharted2_HDRLighting - http://cagetu.egloos.com/5373181 에다량첨부. - [SIGGRAPH10] Physically Based Shading Models - Epic Games Samaritan Demo - CryEngine3 차세대기술 Feature 들 - [GDC04] Advanced Depth Of Field - 오즈라엘님블로그 - Depth Of Field - Gpu Gem3 Practical PostProcess Depth Of Field - StarCraft2 기술문서
Reference - http://en.wikipedia.org/wiki/luma_(video) - http://en.wikipedia.org/wiki/hsl_and_hsv