Chromatic Aberration 2 (색수차)

이전 글

- Chromatic Aberration 1 (색수차)

이전 글에서 Chromatic Aberration(색수차)를 간단히 구현하는 방법을 알아 보았다.

추가로 좀 더 그럴듯하게 보이도록 몇가지 응용을 해 보자.

rgb를 다른 uv로 사용한다는 기본 개념으로 하면 여러가지 응용이 가능하다

uv의 x축. 왼쪽 0 에서 오른쪽 1 ( 이값은 사용하는 환경에 따라 다르며 shader toy 기준)

그림1

uv의 y축. 아래쪽 0 에서 위쪽 1 ( 이값은 사용하는 환경에 따라 다르며 shader toy 기준)

그림2

위 두가지를 조합해서 0~1 사이의 uv값을 -1~1사이로 변경

vec2 coords = (uv - 0.5) * 2.0; 

이 값을 제곱하면 1~0~1의 값이 된다.

그러면 중앙으로 갈수록 0에 가깝고 바깥으로 갈수록 1에 가까운 값이 된다.

float coordDot = dot (coords,coords);

그림3

vec2 testUV = coords * coordDot; 

그림 1(uv의 x), 2(uv의 y)값에 그림 3을 곱해 밝은 부분을 조절한다

x	y	x와 y 동시 표현
그림 4	그림 5	그림 6

여기에 크기를 조절하기 위해 적당한 수치를 오프셋으로 추가

vec2 testUV = RPower(30) * coords * coordDot;

늘어지는 양을 맞추기 위해 텍셀사이즈를 곱해주고 그림 1,2의 uv를 기준으로 위 그림 7을 빼준다.

vec2 _MainTex_TexelSize = 1.0/iResolution.xy;

vec2 testUV =uv - _MainTex_TexelSize.xy * RPower *coords * coordDot;

x	y
그림8	그림9

이렇게 얻은 testUV가 R채널의 uv가 된다.

원래라면 그림 1,2처럼 uv값이 되어야 하지만 살짝 왜곡되게 하여 값을 얻어온다.

01

작업 내용 : https://www.shadertoy.com/view/ttccDM

서클 형태를 활용해서 앞쪽으로 빨려들어가는 느낌을 줄 수 있다.