컬러 그레이딩 포스트 프로세스 이펙트

같은 씬에 다양한 컬러 그레이딩을 적용해 본 이미지입니다.

개요

언리얼 엔진에서 용어 컬러 그레이딩 은 톤 매핑 (HDR to LDR 변형) 및 그에 따른 색 보정 (LDR color to color 변형) 기능을 포함합니다. (HDR/LDR = High/Low Dynamic Range)

톤 매퍼

톤 매퍼 기능의 목적은 HDR의 넓은 색 범위를 모니터가 표현할 수 있는 작은 LDR 범위로 매핑시키기 위함입니다. 이는 일반 렌더링 후의 포스트 프로세싱 중 수행됩니다. 글로벌 톤 매퍼는 3개의 입력(RGB)과 출력(RGB)을 가진 기능입니다. 로컬 톤 매퍼는 인접 픽셀을 고려하지만, 훨씬 엄격하게 (즉 느리게) 계산합니다. 톤 매퍼의 좋은 기능은 색이 매우 밝아도 픽셀의 색을 보존하려 한다는 점입니다.

다음 그래프는 0에서 5사이의 각 채널이 0에서 1사이의 새 범위에 어떻게 매핑되는지 보여줍니다:

사용된 함수는:

GammaColor = LinearColor / (LinearColor + 0.187) * 1.035;

밝은 색은 점점 더 밝아지긴 하지만 어두운 것보단 훨씬 덜한 것에 주목하십시오. 검정은 그대로 검정이지만, 톤 매핑되지 않은 곡선보다 굴곡진 곡선은 거의 직선인 부분이 있습니다. 이는 약간의 대비(contrast) 강화 효과로 나타납니다. 톤 매퍼를 사용할 때, 그리고 소스 이미지를 밝기에서 좀 더 동적(HDR)으로 보이게 하고 싶을 때 좋은 결과를 얻기 위한 일반적이고 예상 가능한 수준입니다. 이는 더욱 실제 필름같은 모습으로 나타납니다.

제시된 톤 매퍼 공식에는 조절할 수 있는 상수가 이미 둘 있으며 조금 더 복잡한 수식도 가능합니다만, 품질/유연성/성능 등이 고려되어야 하므로 좋은 함수를 찾는게 그리 쉽지만은 않습니다. 간단한 공식을 고수하고 LDR색 결과물을 간단한 색 룩업으로 수정하기로 결정했습니다. 이미 HDR 색을 제한된 색 범위로 매핑해 본 바, 어두운 색에 대해 다양한 표현이 가능함과 동시에 밝은 색도 수정할 수 있었습니다. 이 방법은 이해하기 좋으며, 지역적인 콘트롤 등의 유연성을 크게 얻을 수 있으며, 성능도 거의 일정합니다.

에디터에서 Filmic 타입을 선택하면 톤 매퍼를 켤 수 있습니다. (PostProcessChain / UberPostProcess).

톤매퍼 타입을 선택할 수도 있습니다. Filmic 식으로 작동하는 Customizable (커스텀 가능) 톤 매퍼도 있습니다. 이걸로 톤매퍼 커브의 끝부분을 선형인 것과 블렌딩(하여 마치 톤매퍼/선형 매핑이 없었던 것처럼) 할 수 있습니다. 이런 식으로 톤매퍼가 영향을 끼치는 어두운 부분을 조절할 수 있는 겁니다. 렌더링 성능면에서는 약간 느리다는 점만 주의하시면 되겠습니다.

색 보정

룩업 테이블을 통한 색 보정 기능을 구현했습니다. 세 개의 1d 룩업 테이블 대신, 조금 더 (채도감소(desaturation)와 같은) 세련된 색 변형이 가능해지는 3d 룩업 테이블 하나를 사용하기로 했습니다. 다음 이미지는 (현재 텍스쳐 브라우저에 보이는 모습 그대로) 256x16 텍스쳐에 풀린 16x16x16 색 중립 LUT(룩업 테이블)의 모습입니다:

(이 이미지를 웹브라우저에서 복사하지 마시고, 다음에 오른클릭 후 링크를 다른 이름으로 저장... 하십시오: RGBTable16x1.png)

수정된 텍스쳐는 아래와 같아 보입니다:

LUT를 활용하려면, 사용하려는 LUT 텍스쳐를 포스트 프로세스 볼륨에 할당할 필요가 있습니다.

LUT 텍스쳐를 만드는 작업 방식

절차:

• 조절하려는 씬 대표 스크린샷을 만든 후 포토샵 문서에 삽입
• 중립 256x16 LUT 를 포토샵에다 로드 (이 페이지에서 RGBTable16x1.png 이미지를 딸 수도 있습니다. 그냥 복사하대 붙여넣기 하지 마시고, 다음에 오른클릭 후 링크를 다른 이름으로 저장... 하십시오: RGBTable16x1.png)
• LUT를 스크린샷 포함하여 포토샵 문서에 삽입 (LUT 문서에서 전체 선택, 복사, 스크린샷 문서로 전환, 붙여넣기)
• 색 조작 적용 (조절 레이어를 추가하는 것이 최곱니다. 그렇지 않으면 죄다 일일히 사전에 평준화(flatten)하고 사후에 256x16으로 잘라내야 하니 까다로워 지겠습니다.)
• 256x16 LUT 선택 (레이어 패널에서 LUT 레이어 선택, Menu: Select/Load Selection, Ok)
• LUT 콘텐츠를 병합하여 복사 (Menu: Edit/Copy Merged)
• 붙여넣고 엔진이 읽을 수 있는 비압축 포맷으로 256x16 텍스처 저장 (Menu: File/New, Menu: Edit/Paste, Menu: File/Save As)
• 에디터에서 텍스처 가져오기 및 ColorLookupTable(색 룩업 테이블) 텍스처 그룹 지정

다양한 색 보정이 가능합니다. 예를 들면:

• 밝기(Brightness)
• 채도(Saturation)
• 단순 대비(Contrast) (제한된 선형)
• 상위품질 대비 (중간이 급경사진 곡선 등)
• 이미지의 어둡거나 중간톤 및 밝은 (커브 등의) 부분에 대한 선택적인 변경
• 특정 색(LAB처럼 밝기가 별개의 채널에 있는 색 공간에 최적)에 대한 선택적인 변경
• 심지어 다른 색 공간에 대한 조절도 가능 (예를 들어 LAB는 밝기와 색을 독립적으로 유지하니 꽤나 유용하겠습니다.)

LUT 텍스쳐간의 블렌딩

게임에서 텍스쳐는 시간(이전 색 보정에 사용된 시간 값)에 따라 자동으로 블렌딩됩니다. 여러 LUT간 블렌딩이 성능에 미치는 영향은 적습니다.

계산 색 조정과 LUT 텍스처 혼합

포스트 프로세스에서 (그림자, 중간톤, 하이라이트, 채도 등의) 일정 공식을 통해 색 보정을 허용한 지가 오래지만, 각 픽셀당 계산은 화면상에서 이루어 졌습니다. 3D 룩업 테이블을 통해 블렌딩 후 색 변형을 테이블로 통합할 수 있게 되었습니다. 포스트프로세싱은 산술적으로(ALU) 무거운 셰이더였기에 프레임당 산술 연산량은 훨씬 적어 속도가 많이 빨라지게 되었습니다.

추가 개선사항

현재 룩업 테이블을 256x16 텍스쳐로 직접 임포트합니다. 이는 별로 직관적이지 않아서 익숙하지 않으면 이미지를 해석하기가 어렵습니다. 커브 시각화나 샘플 이미지 같은 것들이 텍스쳐가 하는 기능을 좀 더 명확하게 보여줍니다. 콘텐츠 브라우저의 해당 항목에 커서를 올리면, 현재 뷰에 대한 효과를 미리 볼 수도 있습니다.

이미지 그레인

Image Grain (이미지 그레인)이 활성화되고 나면 (컬러 그레이딩 전의) 이미지 색을 변화시키는 약간의 노이즈 형태를 볼 수 있을 겁니다. 이 노이즈는 발광(luminance) 효과만 냅니다. 이걸 사용하면 씬에 필름같은 느낌을 늘릴 수 있습니다. 이 노이즈는 어두운 부분에만 영향을 끼치며, 그 세기도 조절할 수 있습니다. (최대는 1이나 0.2 정도 까지가 이성적인 값입니다.)

전체 색 범위에 영향을 끼치는 약간의 노이즈는 (스케일이 0이라도) 항상 남아 있습니다. 이게 품일을 높이는 데 도움이 될 수 있습니다. 내부적으로 색은 종종 채널당 8비트로 처리되며, 거기서 나타날 수 있는 (그레디언트에서 보이는 것과 같은) 밴딩 부작용은 그 정도 노이즈 비트로 숨길 수 있습니다.

콘솔 변수

콘솔 변수 TonemapperType (톤매퍼 유형)을 통해 다양한 톤매퍼 유형간을 전환할 수 있습니다.

콘솔 변수 ColorGrading (컬러 그레이딩)을 통해 블렌딩을 디버깅하거나 현재 어떤 LUT 텍스처가 사용중인 지를 알아볼 수 있습니다.

콘솔 변수 ImageGrain (이미지 그레인)을 통해 이미지 그레인 세팅을 만질 수 있습니다.

제한 사항

• 색상 축 당 개별 값이 16개뿐인 것은, (포토샵 등의) 이미지 처리 툴에서 가능한 색 변형과 유사하게 하기 위해서일 뿐입니다. 마찬가지로 출력 값이 256개뿐인 것이 몇몇 (10bit DAC와 같은) 하드웨어에서의 제한 사항이 될 수 있습니다.
• 성능상의 이유로 (8 룩업) 셰이더에서 LUT를 보간하지 않으나, 대신 텍스쳐 필터링 하드웨어를 사용합니다. (D3D10 이전의) 옛날 하드웨어에서는 정밀도가 제한될 수 있음에 유의하십시오.
• 새 메쏘드의 분할스크린 적용을 염두에는 뒀습니다만 테스트하진 않았습니다. 각 뷰에는 각자의 LUT 블렌딩을 가질 수 있게 되어 있습니다. 두 뷰가 동일한 LUT를 사용할 경우에 최적화되는 듯 하지만, 최악의 경우는 아닙니다. (두 플레이어가 각기 다른 게임플레이 효과를 사용하여 별도의 색 보정을 사용한다고 가정해 보십시오.)
• weighted blend(가중된 블렌딩)은 LUT간 페이드 처리하기에 나쁘지 않습니다만, 가끔은 (환경 LUT 위에 빨강색조를 입히는 경우처럼) 레이어 이펙트가 나을 때도 있습니다. 이와 같은 구현 사항은 간단하긴 해도 위험할 수가 있습니다. 블렌딩 도중 의존 텍스쳐 룩업을 요청하게 되며, (이미지에 채도를 넣었다 뺐다 한 것처럼) 심한 밴딩 현상이 나타날 것입니다. 축당 테이블 요소가 16개 밖에 되지 않기에 품질이 정말 많이 손상되게 됩니다. 기존 math 색 보정이 유효한 상태이기에, 단일 절차 레이어로 사용할 수 있습니다.

모바일 지원

LUT 기반 컬러 그레이딩은 모바일 플랫폼에서 지원되지 않습니다. 그러나 언리얼 엔진 3 2011년 12월 버전 이후 단순화된 공식 기반 컬러 그레이딩이 구현되어, 모바일 디바이스에서 렌더링되는 씬의 채도감소(desaturation), 하이라이트 색의 현시, 미드 톤, 그림자 등을 콘텐츠 제작자가 조절할 수 있게 되었습니다. 사용상의 편의를 위해 새로운 환경설정 프로퍼티 세트가 WorldInfo 와 PostProcessVolume 의 Post Process Settings 부분에 추가되었습니다. 그러나 이 프로퍼티는 모바일 플랫폼에 국한된 완벽히 별개의 구현에서 사용되는 것으로, PC 나 콘솔에서 보던 포스트-프로세스 체인과는 관계가 없다는 점, 유념해 주시기 바랍니다.

환경설정

모바일 컬러 그레이딩은 기본적으로 꺼져 있습니다. 이 기능을 켜려면 게임 BaseEngine.ini 환경설정 파일의 [SystemSettings] 부분에 MobileColorGrading=True 줄을 추가해 주면 됩니다.

컬러 그레이딩 효과의 실제 시각적인 모습은 레벨 에디터의 세팅을 통해 제어됩니다. WorldInfo 클래스는 Default Poost Process Settings 아래 Mobile Color Grading 부분에 맵의 디폴트 컬러 그레이딩 세팅을 담습니다. 비슷하게 PostProcessVolumes 에도 일반 세팅에 같은 프로퍼티 세트가 있습니다. 포스트-프로세스 볼륨은 중첩 가능하며, 카메라가 그 안에 들어가면 각각의 컬러 그레이딩 효과가 적용됩니다. 볼륨 사이를 이동할 때 부드럽게 전환되는 기능은 이 글 작성 당시에는 지원되지 않고 있으나, 나중에 가능해질 수 있습니다.

다음은 개별 세팅에 대한 설명입니다:

• Blend 블렌드 - 최종 씬에 얼마만큼의 컬러 그레이딩을 섞을지 결정합니다. (디폴트인) 0.0 은 컬러 그레이딩을 꺼서 효과가 없는 상태인 반면, 1.0 은 100% 의 컬러 그레이딩 결과를 씬에 적용합니다.
• Desaturation 채도감소 - 최종 씬의 채도를 얼마나 감소시킬지 결정합니다. (디폴트인) 0.0 은 채도감소를 적용하지 않는 반면, 1.0 은 이미지의 채도를 완전히 감소시킵(, 즉 회색조로 만듭)니다.
• High Lights 하이라이트 - 씬의 밝은 픽셀에 대한 색 보정을 조절합니다.
• Mid Tones 미드 톤 - 미드 톤에 대한 색 보정을 조절합니다.
• Shadows 그림자 - 씬의 어두운 픽셀에 대한 색 보정을 조절합니다.

공식

위 세팅은 모바일 플랫폼용 GLSL 셰이더에 하드코딩된 계산을 할 때 사용되며, 그 공식은 Engine/Shaders/Mobile/Prefix_PixelShader.msf 셰이더 파일에서 찾아 수정할 수 있습니다. 언리얼 머티리얼 에디터에도 MobileEngineMaterials 콘텐츠 패키지에 MobileColorGrade 머티리얼 함수 형태로 그와 동등한 구현이 포함되어 있어, 이를 통해 컬러 그레이딩 함수가 내부적으로 어떻게 작동하는지 매우 시각적인 형태로 설명할 수 있습니다.

그러나 중요한 점은, 이 머티리얼 함수는 에디터 내 모바일 에뮬레이션 기능용으로만 사용될 뿐, 실제 모바일 디바이스의 결과물에는 영향을 끼치지 못한다는 점을 꼭 기억하시기 바랍니다. GLSL 셰이더 파일과 머티리얼 함수 둘 중 하나를 변경해도 둘 다 동기상태가 유지되도록 할 것을 추천합니다.

링크

• Using Lookup Tables to Accelerate Color Transformations (색 변형 가속을 위해 룩업 테이블 사용하기), Jeremy Selan 저, GPUGems 2