유니티 엔진에서 렌즈 왜곡 효과 모방하기

먼저 이 게시글에서는 렌즈 왜곡 효과를 구현하기 위해 실제 권장되는 공식을 사용하는 것이 아니라, 임의로 화면 거리에 따라서 왜곡을 주는 방식으로 구현 해 볼 예정이다. 왜곡을 밖으로 줄 것인지, 안으로 줄 것인지에 따라서 볼록 또는 오목 렌즈를 모방할 수 있다.

위와 같은 기본 텍스처 뷰가 있다고 할 때, 중심 0.5 는 왜곡되지 않고 바깥으로 갈 수록 왜곡이 된다. 즉 중심으로부터의 거리에 따라 어떤 왜곡을 수행하면 되는 것이다.

이 값을 그대로 출력해보면 위와 같은 텍스처가 출력된다. 이제 여기 이 밝기에 따라서 각 지점의 왜곡 정도를 지정해줄 것이다. 중심이 검은 색이므로 0이고, 바깥으로 갈수록 1이 된다. 여기서, 나중에 smoothstep 을 통해서 자유롭게 거리 정보를 부드럽게 수정할 수 있도록 (즉 왜곡 정도를 수정할 수 있도록) smoothstep 기능을 넣어줄 것이다.

참고로 변수로부터 받는 _Center.xy 는 UV 좌표의 중심점이다. (0.5, 0.5)로 고정해도 되지만, Center은 Properties로 받을 수 있게끔 구현하였다.

즉 원의 크기를 자유롭게 조절하고, 페이드아웃 되는 정도를 자유롭게 변경할 수 있다.

이제 각 텍스처 UV 정점마다 방향 벡터를 구한다. 정 중앙은 (0,0)일 것이고, 왼쪽 벡터들은 x 성분이 -1, 오른쪽 정점의 벡터들은 x 성분이 +1이 될 것이다. 이를 위해서는 단순히 _Center.xy 를 빼주면 된다.

그리고 각 정점에서 방향 벡터를 구하면 되므로, normalize 해준다.

그러면 최종적으로 각 픽셀에서 어느 방향으로 밀어야하는지 (UV를 밀어내야하는지) 방향 벡터를 구할 수 있게 된다. UV를 밀어내면 해당 밀어낸 위치에 있는 색상이 당겨진다. 즉 UV를 밀면 이미지는 당겨지고, UV를 당기면 이미지는 밀어진다.

이제 각 픽셀 정점 UV에 방향 벡터를 더해주면 되는데, 중심에서 멀어질수록 세기가 강해져야지 왜곡 효과가 발생한다.

이를 구현하기 위해서 uv 좌표에 현재 방향 벡터를 더하되, 방향 벡터에 각 정점별 거리 세기를 곱하고, 일괄 크기(_Intensity)를 곱한다.

즉 기존 UV 좌표에 방향 벡터 * 각 정점별 세기 * 종합 세기를 수행하는데, 여기서 주의할 사항이 하나있다. 위 소스코드를 그대로 적용하면 동일하게 확대, 축소가 되는데 그 이유는 아래와 같다.

1차원으로 UV를 나타낸 것 이다. UV Pos의 방향 벡터를 구하면 결과적으로 -1.0 또는 0.0 , 1.0이 된다. (1차원 기준), 여기에 각 정점의 Distance를 곱하면 결과적으로 Size + Direction 이랑 Normalized Direction * Distance 이 100% 동일하다는 것을 알 수 있다. (물론 상황에 따라 distance와 벡터 뺄셈식은 미세하게 다를 수 있다.) 이를 최초 UV pos에 더하면 같은 간격(stride)로 UV가 확장된 것을 알 수 있다. 즉 거리마다 세기가 강하게 더해져야 하는데, 전반적으로 간격이 동일하게 된다.

이를 해결 하기 위해서 거듭 제곱을 해주면 된다. 값이 커짐에 따라서 값이 가팔라지기 때문에 강도가 커질 수 있다.

따라서 특정 Scale을 거듭제곱 해주도록 한다. 이 역시 Property로 받을 수 있게끔 구현하였다.

이를 그대로 UV에 적용하면 위와 같은 결과가 나온다.

아까 smoothstep 의 강도를 조절하여 원 크기를 늘리면 위와 같이 왜곡이 되는 것을 볼 수 있다. 근데 문제가 존재하는데, 바로 가장 자리 테두리의 UV가 붕괴되어 끝 지점이 무한히 반복되는 것을 알 수 있다. 즉 가장자리에서는 다시 왜곡이 되지 않도록 눈 속임을 줄 수 있다.

이를 위해 mask를 위한 원 하나를 또 만들어준다.

1.0을 빼주었는데, 이는 흰색 영역에 왜곡 효과가 적용되게 하기 위함이다. 검은 영역은 0이므로 세기를 곱하면 0이 되고 왜곡 효과를 완전히 없애준다. (가장 자리에서는)

이렇게 구한 mask를 곱하면 위와 같은 결과가 나온다.

그러나 정석적인 렌즈 왜곡 방법은 아니다. 여기에 RGB 색상 왜곡 (Chromatic Aberration) 을 추가하면 꽤 그럴싸하게 된다.