Page 0: Page 1: Conversion Color Space & Filtering 발표자 : 이창희 cagetu79@gmail.com cagetu@egloos.com Twitter.com/cagetu Page 2: 알아볼 것들 • 색상 보정 – Channel-Based Color Correction • Level • Curves – Grayscale Conversions – Linear Color Space • 특수 효과 – – – – – Image sharpening through extrapolation Photo Filter Grain Filter Motion Blur Radial Blur Page 3: Channel-Based Color Correction • Levels – Photoshop에서의 Levels command – Gamma, contrast, 전체 이미지의 dynamic range를 수정하거나 독립적으로 채널 색상에 대한 속성들을 조정할 수 있다. [3] • Curves – 생략 Page 4: Grayscale Conversion • RGB를 grayscale로 변환 • Luminance 값 – {0.222, 0.707, 0.071} 은 ITU Rec709 라고 불리는 국제 산업 색상 표준에 따름. [3] Page 5: sRGB 칼라 공간 • 우리가 사용하는 대부분의 디지털 이미지 장비들(디지털 카메라, 모니터, 프린터…)은 표준 non-linear 색 공간이 sRGB를 사용하도록 정해져 있다. 따라서 사진이나 그림 파일들도 그에 맞추어진 형태로 저장된다. • 보통 이미지를 합성(필터링, 블랜딩, 셰이딩…)할 때, 우 리는 색 공간이 linear하다고 생각하지만, 실제 저장된 파 일은 sRGB에 맞춰져 있기 때문에, 연산 전에 먼저 linearize 해줘야 정확한 칼라 연산이 가능해진다고 할 수 있다. 모니터 역시 sRGB에 맞춰져 있기 때문에, 연산 후 sRGB 색 공간으로 변환해줘야 한다. Page 6: sRGB 읽기 • Read sRGB – 텍셀을 fetch할 때, sRGB -> linear – DX10에서는 텍스쳐를 GPU쪽으로 로딩할 때, linear space로 자동 변환되게 할 수 있다. • 변환될 때, 내부적으로 8bit->12 or 16bit로 저장 • 텍스쳐 필터링도 linear space에서 처리 – DX9에서는 로딩 타임이 아닌 텍셀을 fetch할 때 linear space로 변환 • 필터링은 non-linear space에서 하기 때문에, 미묘하게 색이 변함. – 컬러 이미지 외에 선형적인 데이터(노말맵, 스펙맵 등) 은 이미 linear space 에 있기 때문에 따로 처리 할 필 요 없음 Page 7: sRGB 쓰기 • Write sRGB – FrameBuffer에 출력할 때, linear -> sRGB – 블랜딩 모드에서는 프레임 버퍼에서 src를 가져올 때, sRGB -> linear 변환한 결과를 블렌딩 후 sRGB로 변 환 • DX10 이상은 하드웨어적으로 지원 • DX9 에서는 직접 처리 [4] : 비정상적인 출력 :일반적인 alpha blend 공식 주어진 linear space color GPU에 주어졌을 때, 랜더 타겟 색상은 sRGB 공간에서 Blend 수행 전후, 우리가 원하는 GPU 처리 Page 8: sRGB 쓰기 – 알파 블랜딩 - 대부분 D3D9 GPU들은 sRGB 공간으 로 변환 후, blend. 이는 shader 계산이 linear공간에서 되고, sRGB 공간에서 블 랜딩 계산이 수행 => 치명적인 문제 발생 -하드웨어 color –space conversion이 발 생하기 전에, 셰이더 내부에서 알파를 계 산(premultiplied alpha)하면, 위와 같은 공식을 얻을 수 있다. -실제로는 이상하게 보이지만, automatic conversion을 사용하는 것보다는 shader 에서 convert하는 것이, nonpremultipled 경우에서 보다 더 나빠 보이 지 않도록 처리한다. [5] Page 9: Premultipled Alpha • Co = CsAs + (1-As)Cd – RederState • AlphaBlendEnable: True • SrcBlend: One • DestBlend : InvSrcAlpha • 셰이더 내에서, 최종 색상에 미리 계산 – Output.rgb *= Output.a; Page 10: sRGB (Cont’) • Post-Processing을 작업할 때 에는 – 처음 텍셀을 sRGB->linear 변환을 해주고, 마지막 Step의 마지막 Pass에서 linear->sRGB 변환을 해줘야 한다. [2] Page 11: sRGB 기타 이슈 • • Filtering – sRGB 공간에서의 필터링은 그렇게 나쁘지는 않다. MIP-map – Linear 공간에서 계산하기 위해서, 대부분의 library들이 gamma-correct MIP 생 성을 지원(NVTextureTools, D3DX) • DCC – Artist들이 DCC app에서 vertex color를 칠한다면, 이것은 대부분 마치 sRGB 공 간에 보여질 것이며, linear space로 변환될 필요가 있다. • Lighting information – HDR format : linear – LDR format : sRGB 공간 • 처리해야할 필요가 있는 Gamma-correct rendering pipeline으로 전환의 visual side-effect가 존재. 추후 지속적인 관심이 필요. [5] Page 12: Selective Color Correction • Color range based on Euclidian distance – ColorRange = saturate(1 - length( src - col.xyz) ); • Color correction done in CMYK color space [8] – c = lerp( c, clamp(c + dst_c, -1, 1), ColorRange); • Finally blend between original and correct color – Orig =lerp( Orig, CMYKtoRGB( c), ColorRange); Page 13: Image Sharpening • Image sharpening through extrapolation • Simply lerp between low-res blurred image with original image by a ratio bigger than 1 • Sharp = lerp(blurred, orig, bigger than 1 ratio) Page 14: 적용 사례 Page 15: Photo Filter • Blend entire image into a different color mood [6] • Artist defines “mood color” – cMood = lerp(0, cMood, saturate( fLum * 2.0 ) ); – cMood = lerp(cMood, 1, saturate( fLum - 0.5 ) * 2.0 ); • Final color is a blend between mood color and backbuffer based on luminance and user ratio – final= lerp(cScreen, cMood , saturate( fLum * fRatio)); • Luminance? – float4 luminance = {0.299f, 0.587f, 0.114f, 0.0f}; – 무슨 Color Standard라고 하는데…?! Page 16: Photo Filter • Photoshop의 photo Filter • 색상 온도 적용 – 따뜻한 느낌?! Page 17: Grain Filter • 영화 Film과 같은 느낌 • 콘솔 게임에서 많이 사용 Page 18: Left 4 Dead 2 Page 19: 적용!! Page 20: Grain Filter (Cont’) • 재미있는 사실은 TV와 영화가 발전할 수록 noise를 제거하기 위한 노력 [11] – Film VS Digital – HDTV Page 21: Motion Blur • Camera Motion Blur(CMB) • Object Motion Blur(OMB) Page 22: Radial Blur • Radial Blur – Zoom • 극적인 효과 – FPS!!! Page 23: 결론 • “현재 게임들에서 보여주는 퀄리티의 비밀(?)을 찾아보자”에서 출발. – “lighting + shadow + 후보정”이 출력되는 화면을 결정하지 않을까? 하 는 의문에서, ColorControl 정리 • 이제 게임은 3D Rendering 기법에 추가적으로, “Digital Image 기법 ”이라는 익숙하지만(디지털 카메라가 보편화 되었으므로), 게임에서 는 중요하게 생각하지만은 않았던 작업 과정이 이미 많이 적용됨. • 출시하는 콘솔 게임을 보면서, “WoW~ 어떻게, 저런 색감과 영화 같 은, 선명도를 낼 수 있지?!”하면서, 내가 만든 이미지는 왜 다를까? 에 대해서 한번 고민해 볼 필요가 있음. • Uncharted2가 보여주는 HD급의 선명도와 풍부한 색감, 화질에 대 한 비밀을 찾는 것이 목표!!! Page 24: Reference [1]http://www.w3.org/Graphics/Color/sRGB [2]GPUGems3. 24절. The Importance of Being Linear [3]GPUGems1. 22절. Color Controls [4]Premultiplied alpha [5]Adventures with Gamma-Correct Rendering [6]A bit more Deferred - CryEngine, Martin Mittring, Triangle Game Conference 2009.ppt [7]Ford + et al, “Colour Space Conversions”, 1998 [8]Green, “OpenGL Shader Tricks”, 2003 [9]http://wiki.gamedev.net/index.php/D3DBook:Useful_Effect_Snippet s [10]http://www.gamerendering.com/category/specialeffects/page/2/ [11]http://www.psu.com/forums/showthread.php?t=55880 [12]RenderMonkey – Screen Space Effects [13]http://jufoot.egloos.com/1960058 Page 25: