Chromatic Aberration 4 (색수차)

이전 글

- Chromatic Aberration 1 (색수차)

- Chromatic Aberration 2 (색수차)

- Chromatic Aberration 3 (색수차)

이전 글들에서 Chromatic Aberration(CA)에 대해서 알아보았다.

CA의 기본 개념은 간단했고 응용방법들도 여럿 있었다.

실제로 게임에서 사용되고 있는 곳이 많은 효과다.

게임에서 많이사용 하는건 크게 두가지 정도인듯 하다.

단순 uv 차이로 인한 CA, 그리고 방사형 블러를 이용한 CA.

단순 uv차이로 인한 CA는 화면의 임펙트를 더해주고 방사형 블러를 이용한 CA는

시작점에 집중하게 하는 느낌이 난다.

실제로 구글에서 Chromatic Aberration으로 검색하면 수많은 이미지를 볼 수 있다.

실제로 CA는 사진에서는 카메라 렌즈에 의한 오류로 볼 수 있다.

하지만 게임에서는 카메라 렌즈에 의한 오류도 비쥬얼을 위해 많이 사용한다.

앞서 구현했던 CA를 되짚어 보면 1번은 단순 rgb 위치 이동,

2번은 원형으로 rgb 위치 이동, 3번은 코사인을 활용한 블러(반복 샘플링)느낌으로 스무딩.

다음 응용 작업을 하기 전에 개념을 먼저 체크해 보자.

UV좌표는 0~1사이의 값을 가지고 있고 shader toy에서는 왼쪽 아래에서 시작한다.

U좌표를 r로 V좌표를 g로 시각화 하면 아래와 같다.

그림 1.

이 uv값을 normalize 하면 아래와 같은 형태를 가진다.

그림 2.

normalize의 의미는 단순히 방향을 위한 단위벡터를 만들기 위함이며 위 시각화는 uv값을 표현하기 위한 예제 일 뿐이다.

그림 3. normalize(uv-0.5)의 결과. u를 r에 v를 g에 매핑한 모습.

그림 4. 그림3의 결과에서 uv의 마이너스 영역에 b채널을 1로 설정한 후 시각화.

범위 조절을 위해 normalize(uv-0.5) 하여 uv의 범위를 0.0~1.0을 -0.5~0.5로 바꾼후 정규화 한다.

방향만을 고려하기 위해 normalize 해주었다.

그림 3과 4를 보면 좀 더 이해하기 쉽다.

그리고 가운데 영역을 제외하고 외부 영역만 CA를 할 수 있도록 범위 조절을 한다.

원형의 범위를 지정하기 위해서는 간단한 몇가지 방법이 있는데 Chromatic Aberration 2 (색수차)처럼

uv를 -1~1의 범위를 만든 후 제곱하면 가운데로 갈수록 0에 가까워지고 바깥으로 갈 수록 1에 가까워진다.

destCoord = (destCoord-0.5)*2.0;

float range = dot(destCoord, destCoord)

그림 6. uv값이 가운데로 갈수록 0, 바깥으로 갈수록 1.

여기서는 비슷한 방식을 사용한다.

uv를 -0.5~0.5의 범위로 만들어 length(destCoord -0.5)를 사용하여

가운데로 갈수록 루트0 (0), 바깥으로 갈수록 루트0.5 (대략0.7)의 값을 가지도록 한다.

그림 7.

영역조절용으로 제곱을 활용한다.

pow(length(destCoord -0.5), falloff).

예를들어 falloff값을 3정도 준다면 3제곱근 값을 사용하기 때문에 가운데로 갈수록 0,

바깥으로 갈수록 0.158이었던 값을 세제곱근값인 0.0034으로 사용한다.

이 범위조절값을 r,g,b 채널마다 차이를 줘서 샘플링시 사용할 offset 값을 만들고 반복 샘플링 하여

부드러운 CA를 만든다.

이 방식은 Chromatic Aberration 3 (색수차) 보다는 조금 더 무거운데 그 이유는 같은 반복 샘플링을 한다고 해도

지금 방식은 오프셋을 다르게 줄 때 마다 r,g,b를 다른 오프셋값으로 가져와야 하기 떄문에 샘플링 횟수가 3배다.

기존 방식들을 모두 모아서 체크 해 보자.

0123

그리고 이 shader toy 작업자분의 홈에가면 꽤 재미있는 필터가 많다.

하나씩 체크해 봐도 좋을 듯.

참고

- original shader toy content