[고도엔진 내부 쉐이더 공부] 울렁, 일렁 거림 효과 구현

쉐이더에서 울렁임 효과 주는 방법

이 게시글에서는 엔진에서 fragment 쉐이더를 사용해서 어떻게 울렁임 효과를 주는지 자세히 알아본다. 이 쉐이더를 알아두면 각종 다양한 효과에 활용할 수 있다. 바람이 흔들리는 효과부터 시작해 어떤 표면이 일렁이는 효과, 물 효과, 다양한 텍스처가 일렁이는 효과 등을 구현할 수 있다.

위 이미지는 원본 이미지에 대해서 물결을 치듯이 울렁 거리는 효과를 낸다. 우선 이 게시글에서는 일정한 속도로 일렁거리게 끔 효과를 구현할 것이고, sin 함수의 모양대로 느낌을 내고자 한다.

우선 기본적인 쉐이더를 구현하기 위해 임의의 Sprite2D 객체를 만들고 여기에 텍스처 이미지를 적용한다.

이 객체의 Material 에 새로운 Shader을 등록한다. 우선 코드로 작성하기 위해 일반 Shader로 생성하였다.

코드는 매우 간단하다. 텍스처를 울렁거리게끔 효과를 내는 것이기 때문에, 텍스처의 UV 좌표를 울렁거리게 하면 된다. 이러한 울렁 거리는 효과를 위해 sin 의 파형 모양대로 울렁거리게끔 할 것이고, UV 좌표에 따라서 sin 의 정도가 달라지면 된다. sin 값은 약 2 * 3.141592 까지 1개의 주기를 가지기 때문에, 이미지 전체에 한 번의 주기만큼 흔들리게 하려면 sin(2*3.14 * uv 방향)를 곱하면 된다. 여기서 왜 uv 방향을 곱하냐면, UV 값은 0 ~ 1의 값을 가지고 있기 때문에 각각 지점 마다 0 ~ 2*3.14 까지의 sin 값으로 들어가게끔 하기 위함이다. 그리고 sin 값의 결과는 다시 -1 ~ 1 의 값을 가지기 때문에, 배율을 하여 적은 값으로 표현할 수 있다. 이 값을 uv x에 더하면 결과적으로 y 방향으로 갈수록, x축에는 울렁 거림 효과를 넣을 수 있다. 이 때 시간 값을 더해서 시간에 따라 천천히 반복되는 효과를 부여할 수 있다.

즉 아래 sin 의 나온 값에 0.05을 곱하면 결과는 -0.05 ~ 0.05 까지 값이 나온다. 이 값을 uv x에 더해줘 약간의 일렁거림 효과를 구현할 수 있다.

그리고 sin 값의 uv.y 가 하나의 주기를 표현한다고 했는데 여기서는 3.14를 곱했으니 반 주기를 표현한다. 반 주기에 10을 곱해, uv y 전체에 걸쳐 반주기가 10번 반복되게끔 하였다. (한주기로는 약 5번)