Post processing in_color

POST PROCESSING IN COLOR

이민웅

Shader Study

목차

Flimic Tone Mapping

Color Grading

Image Sharpening

Color Correction

Photo Filter

Flimic Tone Mapping

John Hable이 Unchated2 HDR Lighting 발표

문서에서 소개한 내용

Flim에서의 색상 Curve가 더 나은 결과를 보

여준다는 것에서 착안

밝아질수록은 Reinhard방식과 유사하게 타

들어가는것을 방지하고, 어두워 질수록 어

두운 영역이 더 어두워 지도록 만듬

Flimic Tone Mapping

John Hable의 Blog를 통해서, Fixed 된 버전이라고 소개.

Gamma 보정을 최종적으로 적용 (pow(x, 1/2.2))

A = Shoulder StrengthB = Linear StrengthC = Linear AngleD = Toe StrengthE = Toe NumeratorF = Toe Denominator

Note: E/F = Toe Angle

Flimic Tone Mapping

Flimic Tone Mapping

Color Grading

http://ttmayrin.tistory.com/34 Color Grading by LookUpTexture (컬러 그레이딩 by LUT)

톤 매핑 (HDR to LDR 변형) 및 그에 따른 색 보정 (LDR color to color 변형) 기능을 포함

http://udn.epicgames.com/Three/ColorGradingKR.html

Color Grading

기본 텍스쳐는 RGB값을 컨버팅한 UV좌표에 정확히 자기의 Color를 가지고 있는 상태 텍스쳐를 16x16x16 3DTexture로 제작 사용하면 tex3D한방

으로 ColorGrading이 가능

LUT를 이용한 ColorGrading은 Post Effect로서의 색보정 역할 뿐만 아니라 개별 사물이나 캐릭터에도적용이 가능 Actor의 ShaderCode마지막에 LUT관련 함수만 적용해주

면 완성

추가 텍스쳐 제작없이도 LUT만 만들어 놓으면 다양한 색의 사물이나 몬스터, 이펙트를 다량으로 생성할 수 있음 포토샵 색조정은 어디까지나 한계가 있음

Color Grading

1. ColorGrading을 적용할 게임장면을 캡쳐하여 포토샵에서 불러옴

2. 기본이 되는 LUT도 같이 불러옴

기본 LUT 텍스쳐 256x16

16x16x16 3D 텍스쳐로 만들어서 사용 가능

3. 포토샵의 여러 기능으로 화면을 마음껏 원하는 이미지로 편집

- 여기서 중요한 것은 불러온 LUT도 같이 바뀌어야한다는 점

4. 원하는 화면이미지에서 LUT를 따로 저장

GrayScale용 LUT

float3 CalcLUT( sampler InLUT, float3 InColor )

{// requires a volume texture 16x16x16 unwrapped in a 2d texture 256x16// can be optimized by using a volume texturefloat2 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 translucencyfloat 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 );}

float3 CalcLUT( sampler InLUT, float3 InColor ){return tex3D( InLUT, InColor * 15.f / 16.f + 0.5f / 16.f ).rgb;}

16x16x16 3D VolumeTexture로 제작된 경우

256x16 LUT일 경우 ShaderCode from Unreal3

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)

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;

}

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);

Color Correction

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));

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;

}