[게임 개발 및 쉐이더] GLSL에서 색상 깨짐 효과, 조각 효과 내기

화면 부분 깨짐 효과 및 색상 깨짐 효과

이러한 효과를 내기 위해서는 일정한 영역 단위로 화면에 노이즈를 주고, 색상을 채널로 나누어 노이즈를 추가해야 한다. 이 게시물에서는 상기 노이즈를 구현하는 과정에 대해 서술한다.

본 게시글에서는 두 가지를 구현한다. 그림이 임의의 모양대로 꺠지고, RGB 색상이 어긋나는 것을 아날로그처럼 표현한다. 예전 아날로그 모니터의 경우 R, G, B 데이터를 아날로그 신호로 받기 때문에 중간에 노이즈가 있거나 신호가 한칸 밀리게 되면 각 위치에 존재해야하는 RGB 색상이 몇칸씩 밀려 색상이 R,G,B 조합으로 그려지는 픽셀들이 서로 다른 위치에 깨져서 표시되기도 하였다. 이러한 현상을 의도적으로 구현하기 위해서 특정 지점에 있는 R,G,B 색상을 모두 출력하는 것이 아니라, R만 출력하고 옆에 있는 G 색상을 가져와서 출력하고, 또 다른 위치에 있는 B 색상을 가져와서 섞어서 출력함으로써 색상 표현에 오류가 발생한 것 처럼 효과를 낼 수 있다. 이러한 효과는 디지털 요소에서 무언가 잘못되어 플레이어에게 위화감을 조성할 때, 또는 무언가 잘못되어가는 분위기를 극대화하기 위해 사용할 수 있다.

노이즈의 불연속성

먼저 이러한 노이즈는 연속적으로 부드럽게 발생하지는 않고 끊기는 효과를 주면서 표현하기도 한다. 보통 쉐이더에서는 임의 상태 변수를 저장하고 관리하기 쉽지 않기 때문에, 흐르는 표현을 내기 위해서 시간 변수를 받아서 사용한다. 예를 들어 물이 울렁이는 효과나, 불이 타오르는 효과는 연속적이기 때문에 연속적인 실수를 반환하는 시간을 uniform 으로 받아서 처리할 수 있다. 화면 노이즈 역시 연속적으로 발생하고 마치 신호를 받을 수 없을 때 발생하는 노이즈 처럼 표현을 할 수 있겠으나, 이 게시물에서는 불 연속적으로 딱 끊기는 노이즈를 발생하고자 한다. 즉 예를 들어, 0.5초마다 노이즈의 형태가 바뀌어 출력되게끔 할 수 있다.

그런 작업을 위해서는 시간 함수 y=x 에 대해서 불연속적으로 끊길 수 있도록 계단 형태의 함수로 변환해야한다. 이러한 수식을 시각적으로 표현하기 위해 Octave 라는 수식 프로그래밍 도구를 사용해서 시각화 해 보았다.

set(0,"DefaultAxesFontName", "NanumGothic") set(0, 'DefaultAxesFontSize', 15) grid on; x = -10:0.1:10; y = x; y= floor(1/5*x)*5; stairs(x, y, 'b-', 'LineWidth', 2);

floor 함수를 통해 실수를 소수 버림해주면, 시간에 연속적이던 x 변수는 일정 간격으로 조각나 표현되는 것을 확인할 수 있다. 이 방법을 사용해서 계단 형태로 만들 수 있다. 초 단위로 조각 나게끔 하기 위해 단순히 소수를 버려주면 된다.

만약 5초 단위로 변화를 주기 위해서는 시간 변수를

\frac{1}{5}

하고 소수를 버린뒤에 다시 5를 곱하면 된다.

이러한 방법을 사용해서 초 마다 노이즈가 발생하는 효과를 내 본다.

먼저 버텍스 쉐이더는 별거 없다. UV 정보를 넘겨주면 된다. 이 게시글에서는 픽셀 쉐이더에서 UV 좌표를 조절함으로써 노이즈 효과를 내는 것에 초점을 맞춘다.

픽셀 쉐이더에서는 기본 텍스처를 받고, 시스템 시간을 받는 time을 uniform으로 받는다. 그리고 이전 버텍스 쉐이더로부터 UV 좌표도 받는다. 그리고 UV 좌표를 기준으로 랜덤 함수를 생성할 수 있는 rand 함수를 만들고, 올림하거나 내림하여 딱 끊어낼 수 있는 stair 함수를 만든다. delta는 1로 하면 초단위로 끊어내고, 1/5 를 넣어 5초 단위로 끊어낼 수 있다.

실제 계산 영역은 복잡하지 않다. R, G, B 색상 영역 단위로 UV를 흐트리기 위해서 각 R,G,B 마다 임의 숫자를 곱한 랜덤 올림수를 구해준다. 여기서는 uv 좌표와 시간 정보를 받아서 1/10초 마다 새로고침 되게 하기 위해 델타 값을 10로 넣었다. 15는 uv 좌표를 1/15 단위로 조각내어 노이즈를 발생하게끔 하기 위해 다시 계단 형태로 UV 좌표를 변환한 것이다. 시간에는 임의로

\times 1

\times 2

\times 3

배하였는데 색상 마다 다른 노이즈 값을 받아내기 위해서 임의 값을 곱한 것이다. 어차피 rand 함수에 의해 지정된 위치에 대한 노이즈 값을 뿌려주기 때문에 약간만 달라도 되는 것이다.

이러면 1/15초 마다 노이즈가 격자단위로 나뉘는 결과를 얻을 수 있다. 이 게시글에서는 고정적인 시간 1/15초 마다 반복되게끔 구현하였는데, 다음 게시글에서는 조금 더 변수를 넣어 규칙적이지 않은 시간처리를 하는 방법에 대해 알아보고자 한다.