Color Control

1,678 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,678
On SlideShare
0
From Embeds
0
Number of Embeds
13
Actions
Shares
0
Downloads
16
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • Selective Color Correction This was very useful for us, since it allowed artists to fix individual colors and end of Crysis without having to re-tweak lighting (which takes much much longer) Color range based on Euclidian distance ColorRange = saturate(1 - length( src - col.xyz) ); Color correction done in CMYK color space Similar to Photoshop = Happy artist c = lerp( c, clamp(c + dst_c, -1, 1), ColorRange); Finally blend between original and correct color Orig =lerp( Orig, CMYKtoRGB( c), ColorRange);
  • Photo Filter (need real images) Blend entire image into a different color mood – so artists where able to give a warmer/colder color mood – again without having to re-tweak entire lighting settings Artist defines “mood color” Final mood color is based on luminance 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)); Example: Left – original, right 50% mix with a orange’ish color – colors feel much warmer
  • Color Control

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

    ×