Post processing in_color

1. 이민웅
Shader Study
POST PROCESSING IN COLOR

2. 목차
 Flimic Tone Mapping
 Color Grading
 Image Sharpening
 Color Correction
 Photo Filter

3. Flimic Tone Mapping
 John Hable이 Unchated2 HDR Lighting 발표
문서에서 소개한 내용
 Flim에서의 색상 Curve가 더 나은 결과를 보
여준다는 것에서 착안
 밝아질수록은 Reinhard방식과 유사하게 타
들어가는것을 방지하고, 어두워 질수록 어
두운 영역이 더 어두워 지도록 만듬

4. Flimic Tone Mapping
A = Shoulder Strength
B = Linear Strength
C = Linear Angle
D = Toe Strength
E = Toe Numerator
F = Toe Denominator
Note: E/F = Toe Angle


John Hable의 Blog를 통해서, Fixed 된 버전이라고 소개.
Gamma 보정을 최종적으로 적용 (pow(x, 1/2.2))

5. Flimic Tone Mapping

6. Flimic Tone Mapping

7. Color Grading
톤 매핑 (HDR to LDR 변형) 및 그에 따른 색 보정 (LDR color to color 변형) 기능을 포함
http://udn.epicgames.com/Three/ColorGradingKR.html
http://ttmayrin.tistory.com/34 Color Grading by LookUpTexture (컬러 그레이딩 by LUT)

8. Color Grading
 기본 텍스쳐는 RGB값을 컨버팅한 UV좌표에 정확
히 자기의 Color를 가지고 있는 상태
 텍스쳐를 16x16x16 3DTexture로 제작 사용하면 tex3D한방
으로 ColorGrading이 가능
 LUT를 이용한 ColorGrading은 Post Effect로서의 색
보정 역할 뿐만 아니라 개별 사물이나 캐릭터에도
적용이 가능
 Actor의 ShaderCode마지막에 LUT관련 함수만 적용해주
면 완성
 추가 텍스쳐 제작없이도 LUT만 만들어 놓으면 다
양한 색의 사물이나 몬스터, 이펙트를 다량으로 생
성할 수 있음
 포토샵 색조정은 어디까지나 한계가 있음

9. Color Grading
기본 LUT 텍스쳐 256x16
16x16x16 3D 텍스쳐로 만들어서 사용 가능
1. ColorGrading을 적용할 게임장면을 캡쳐하여 포토샵에서 불러옴
2. 기본이 되는 LUT도 같이 불러옴

10. 3. 포토샵의 여러 기능으로 화면을 마음껏 원하는 이미지로 편집
- 여기서 중요한 것은 불러온 LUT도 같이 바뀌어야한다는 점
4. 원하는 화면이미지에서 LUT를 따로 저장
GrayScale용 LUT

11. 256x16 LUT일 경우 ShaderCode from Unreal3
float3 CalcLUT( sampler InLUT, float3 InColor )
{
// requires a volume texture 16x16x16 unwrapped in a 2d texture 256x16
// can be optimized by using a volume texture
float2 Offset = float2(0.5f / 256.0f, 0.5f / 16.0f);
float Scale = 15.0f / 16.0f;
// Also consider blur value in the blur buffer written by translucency
float IntB = floor(InColor.b * 14.9999f) / 16.0f;
float FracB = InColor.b * 15.0f - IntB * 16.0f;
float U = IntB + InColor.r * Scale / 16.0f;
float V = InColor.g * Scale;
float3 RG0 = tex2D( InLUT, Offset + float2(U
, V) ).rgb;
float3 RG1 = tex2D( InLUT, Offset + float2(U + 1.0f / 16.0f, V) ).rgb;
return lerp( RG0, RG1, FracB );
}
16x16x16 3D VolumeTexture로 제작된 경우
float3 CalcLUT( sampler InLUT, float3 InColor )
{
return tex3D( InLUT, InColor * 15.f / 16.f + 0.5f / 16.f ).rgb;
}

12. Image Sharpening
이미지를 선명하게 하여 보정
Simply lerp between low-res blurred image with original image by a ratio bigger than 1
Sharp = lerp(blurred, orig, bigger than 1 ratio)

13. vector rcpres;
float4 lSharp(in float2 Tex : TEXCOORD) : COLOR0
{
float4 inColor = tex2D(s0, Tex);
float4 blur = inColor;
blur += tex2D(s0, float2(Tex.x, Tex.y+rcpres.y)) * 0.25;
blur += tex2D(s0, float2(Tex.x, Tex.y-rcpres.y)) * 0.25;
blur += tex2D(s0, float2(Tex.x+rcpres.x, Tex.y)) * 0.25;
blur += tex2D(s0, float2(Tex.x-rcpres.x, Tex.y)) * 0.25;
blur += tex2D(s0, float2(Tex.x-rcpres.x, Tex.y+rcpres.y)) * 0.25;
blur += tex2D(s0, float2(Tex.x-rcpres.x, Tex.y-rcpres.y)) * 0.25;
blur += tex2D(s0, float2(Tex.x+rcpres.x, Tex.y+rcpres.y)) * 0.25;
blur += tex2D(s0, float2(Tex.x+rcpres.x, Tex.y-rcpres.y)) * 0.25;
blur /= 3;
float4 final = lerp(blur,inColor, 3);
return final;
}

14. Color Correction
 Color range based on Euclidian distance
 ColorRange = saturate(1 - length( src - col.xyz) );
 색상보정은 CMYK 공간에서 수행
 c = lerp( c, clamp(c + dst_c, -1, 1), ColorRange);
 원본화면과 보정된 색상 화면을 조합
 Orig =lerp( Orig, CMYKtoRGB( c), ColorRange);

15. Color Correction

16. Photo Filter
 칼라값을 이용하여 전체 이미지의 분위기를 바꿈
 아티스트가 색을 지정
 cMood = lerp(0, cMood, saturate( fLum * 2.0 ) );
 cMood = lerp(cMood, 1, saturate( fLum - 0.5 ) * 2.0 );
 최종 칼라는 휘도(luminance)와 사용자 비율(user ratio)
설정값으로 분위기 색값과 전체 이미지를 혼합
 final= lerp(cScreen, cMood , saturate( fLum * fRatio));

17. float fRatio = 0.25;
float moodR = 0.5;
float moodG = 0.4;
float moodB = 0.25; //default is a mild orange
float4 colorMood(in float2 Tex : TEXCOORD) : COLOR0
{
float4 cScreen = tex2D(s0, Tex);
float4 cMood = 1;
cMood.r = moodR;
cMood.g = moodG;
cMood.b = moodB;
float fLum = ( cScreen.r + cScreen.g + cScreen.b ) / 3;
cMood = lerp(0, cMood, saturate(fLum * 2.0));
cMood = lerp(cMood, 1, saturate(fLum - 0.5) * 2.0);
float4 final = lerp(cScreen, cMood, saturate(fLum * fRatio));
return final;
}