Shadertoy 'Creation' 분석

• 도입
• 기본 코드들
• 17행
• 18행

“Creation by Silexars” by Danguafer

도입

오늘은 Shadertoy 의 인기 쉐이더 중 하나인 ‘Creation’ 을 분석해보려고 합니다. 주석을 빼면 총 19행의 짧은 코드이지만 위의 이미지에서 보실 수 있듯이 단순하다는 느낌은 별로 들지 않습니다.

Shadertoy 불 쉐이더 분석에서 의도치 않게 매우 긴 글을 썼기 때문에 이번에는 쉬어가는 의미에서 조금 짧은 코드를 골랐습니다. 하지만 이번 코드는 매우 인기있는 코드로, Shadertoy 에서 조회수는 13만회(전체 4위), ‘like’ 를 받은 수가 410회(전체 15위)나 됩니다. 이렇게 유명한 코드를 분석하려니 긴장도 좀 됩니다. 꼼꼼하게 한 줄 한 줄 분석해보도록 하겠습니다.

기본 코드들

‘Creation’ 전체 코드

4, 5 행은 define 부분입니다. Shadertoy 에서는 \(\pi, \sqrt{2}\) 같은 자주 쓰이는 변수를 저장하기 위해서도 쓰이지만 이렇게 코드를 축약하거나 더 나아가서 Code golf 를 하기 위해서도 쓰입니다. Code golf 란 같은 일을 가장 짧은 길이의 코드로 수행하기 위해 코드를 압축하는 경쟁적인 게임입니다. 다만 이런 코드의 압축이 너무 심하면 코드를 거의 못 알아볼 정도가 될 수도 있습니다. 여기서는 예제 코드를 작성할 때 풀 수 있는 코드는 가급적 코드를 풀어서 사용하도록 하겠습니다. 일단 t 는 time 으로, r 은 resolution 으로 쓰겠습니다.

9행에서 z=t 를 넣고 있습니다. 우리는 t 대신 time 을 쓰면 되겠습니다.

10행에서는 for loop 를 i=0,1,2에서 돌리고 있습니다. Shadertoy 에서 사용하는 GLSL 의 Fragment shader 에서도 다른 많은 프로그래밍 언어들처럼 for loop 가 가능합니다. 저는 처음에 for loop 가 되는 걸 보고 놀랐습니다. 픽셀 단위이고 병렬 처리되는 쉐이더라서 어쩐지 for loop 는 안될 것 같았기 때문입니다.

for loop 의 계산 결과는 18행에서 마무리되고, c 배열의 0, 1, 2 번째 자리에 각각 값을 넣어줍니다. 20행을 살짝 보면 실제로 컬러값을 반환하는 fragColor 에서 vec4(c/l, t) 값을 사용합니다. 이것은 vec4(c[0]/l, c[1]/l, c[2]/l, t) 와 같습니다. for loop 를 3회 돌린 이유가 RGB 컬러 값을 따로 계산하기 위해서였다는 것을 알 수 있습니다.

11-14 행에서는 지금까지 많이 봤던 boilerplate code 를 다루고 있습니다. 다만 uv 와 p 를 동시에 정의하고 있고, for loop 안에서 새롭게 정의하고 있다는 점에 주목해주시기 바랍니다. 위에서 살펴본 것처럼 for loop 는 RGB 채널을 따로 계산하고 있고 uv, p 좌표도 독립적으로 계산하게 됩니다.

15행은 time 에 for loop 를 돌 때마다 .07 을 더해주고 있습니다. R 채널은 .07, G 채널은 .14, B 채널은 .21 이 더해지게 됩니다. 프리즘을 통과할 때 색이 산란되는 실험을 해본 적이 있으신가요? 이것은 색수차 효과(Chromatic aberration)라는 것으로, 15행의 코드는 이를 간단한 버전으로 재현하는 것입니다. ‘Creation’ 의 정지 이미지를 보면 R, G, B 가 색수차 효과처럼 살짝 차이나게 배열되는 것을 확인할 수 있습니다.

출처 링크

16행의 length(p) 는 p 벡터의 길이를 계산합니다. distance 로도 length 를 계산할 수 있습니다. diatance 는 두 점 사이의 거리를 계산하고, 거리는 곧 길이이기 때문에 length(p1 - p2) == distance(p1, p2) 가 됩니다. 여기서 나온 length(p) 는 length(p - 0) == distance(p, 0) 과 같다고 생각할 수 있습니다. 즉 원점과 p 사이의 거리, 또는 원점을 중심으로 하는 흐릿한 원의 영역이라고 말할 수 있습니다.

그럼 지금까지 살펴본 코드들 중 필요한 것만 묶어서 그려보겠습니다.

안쪽은 검은색이고 바깥쪽으로 갈수록 밝아지는 원이 생겼습니다. 이 원을 step 이나 floor 를 사용해서 단계를 나타내도록 표현할 수도 있습니다. ‘Creation’ 의 핵심 코드는 이 원을 변화시켜서 아름다운 패턴을 만듭니다. 그 방법을 지금 바로 알아보겠습니다.

17행

17행과 18행이 이 코드의 핵심입니다. 이 코드의 원리를 알아내려면 이 두 행의 구성요소를 이리저리 바꿔보다보면 비밀이 풀릴 것입니다. 아니면 커피 한 잔과 함께 천천히 이 블로그 포스트를 읽어보는 방법도 있겠습니다.

uv+=p/l*(sin(z)+1.)*abs(sin(l*9.-z*2.));

먼저 17행부터 알아보겠습니다. 먼저 눈에 띄는 것은 아껴뒀던 uv 를 드디어 사용하는 것입니다. uv 는 12행에서 p 의 값을 복사했고 그 뒤에는 p 만 계산하다가, 드디어 uv 를 사용합니다. uv 는 0.0~1.0 사이의 값을 가지고 있습니다.

여기에 p/l, sin(z)+1., abs(sin(l*9.-z*2.)) 를 서로 곱해서 더해줍니다. 복잡해 보이지만 하나씩 살펴보겠습니다.

첫번째 항부터 살펴보면 p/l 입니다. p 는 -0.5~0.5 사이의 값으로, 가운데가 (0,0) 으로 가장 작은 xy 값을 가집니다. 이것을 l 로 나눠줍니다. l 은 위에서 봤던 가운데가 검은색인 원입니다. 검다는 것은 값이 작다는 뜻입니다. 따라서 이 원은 분모가 가장 작기 때문에 가운데가 가장 큰 값을 가질 것이라고 추측할 수 있습니다.

그럼 한번 그려보겠습니다.

12행에서는 p/l 의 결과를 일단 그려줍니다. p 가 vec2 이기 때문에 최종 컬러에 들어가는 4개의 벡터 중 R, G 채널을 차지하고 있습니다. 예측대로 가운데에서 가장 큰 값을 보여주고 있기 때문에 색상이 제일 뚜렷합니다.

그런데 원점을 중심으로 x+ 방향과 y+ 방향의 색상은 매우 뚜렷해서 거의 1에 가까운 값이 나오는 것 같습니다. 이를 확인하기 위해 13행의 주석을 해제해보면, 실제로 p/l 의 x 는 \(x \ge 0.0\) 이고 \(y \simeq 0.0\) 인 구간에서 1.0 에 가까운 큰 값을 갖습니다. 저는 처음에는 이 부분이 잘 이해가 안됐습니다만, 사실 l=length(p) 이기 때문에 l은 p.y=0 일 때 p.x 와 같은 값이 되기 때문에 1.0 이 되는 게 맞습니다. (\(l = \sqrt{p.x^2+p.y^2}\)) 그리고 p.y 가 아주 작은 값이 되는 x+ 축 주변에서 여전히 1에 가까운 값을 갖습니다.

14행의 주석을 해제해보면 이 사실을 직관적으로 알 수 있습니다. x+, y+ 축에서 p/l 은 0.999 이상의 값을 갖습니다.

15행은 실제로 uv 에 p/l 을 더하면 어떤 값이 되는지를 나타냅니다. 16행의 주석을 해제하면 1에 가까운 값이 어떤 범위에 있는지를 좀 더 직관적으로 파악할 수 있습니다.

그럼 두번째 항인 sin(z)+1. 를 살펴보겠습니다. z 는 time 이고, R,G,B 채널에 각각 .07, .14, .21 의 값을 더해줘서 색수차 효과를 낸다고 앞에서 설명드렸습니다. sin 은 어떤 입력이 들어가든 -1.0~1.0 의 값을 출력하고, 여기에 1을 더하면 0.0~2.0 의 값을 출력합니다.

일단 색수차 효과는 나중에 넣도록 하고, 지금은 sin(time)+1. 을 p/l 에 곱한 다음 uv 에 더해보겠습니다.

time 이 들어가자 역동적인 변화가 생겼습니다. p/l 은 0배에서 2배까지 uv 에 더해집니다. 이 부분은 단순해서 설명할 것이 별로 없어 보입니다.

세번째 항은 abs(sin(l*9.-z*2.)) 입니다. 이것도 z 를 time 으로 치환하여 계산해보겠습니다. 식이 복잡하니 하나씩 풀어서 설명하겠습니다.

일단 length(p)*9. 값을 RGB 채널에 모두 넣어보면 아주 작은 검은색 원이 생기는 것을 볼 수 있습니다. 처음에 length(p) 값을 RGB 채널에 넣었을 때보다 원이 훨씬 작아졌습니다. 작은 값은 거의 사라지고 대부분 큰 값이 된 것입니다.

13 행의 주석을 해제해보면, 검은 화면만 보이는 것을 알 수 있습니다. 시간은 빠르게 증가하는 값이기 때문에 l 값은 순식간에 음수가 되어서 검은색만 보이는 것입니다. 그럼 여기에 sin 을 씌운 14행의 주석을 해제해보면 어떨까요?

신기하게도 원점에서 바깥으로 뻗어나가는 디스크 패턴 이 나옵니다. 반대로 -time * 2. 대신 +time * 2. 를 넣어보면 원점으로 들어가는 디스크 패턴이 나옵니다. ‘Creation’ 에서 볼 수 있는 원점에서 끝없이 뻗어나가는 듯한 느낌의 패턴은 바로 이 식에서 비롯됩니다.

length(p) 뒤에 곱해지는 9 를 다른 값으로 변화시키면 각 디스크의 굵기를 조절할 수 있습니다. 굵기가 얇아지면 속도가 느려지고, 굵어지면 속도가 빨라집니다. -time 에 곱해지는 2 도 속도에 관계되는 변수입니다. 숫자가 커질수록 속도가 빨라집니다. 60 정도로 놓으면 싸이키델릭한 분위기의 화면을 볼 수 있습니다.

15행은 이 식에 abs 를 씌워서 범위를 0.0~1.0 으로 바꾼 것입니다. 링에서 어두웠던 부분은 얇아지고 밝은 부분이 늘어난 것을 볼 수 있습니다.

이제 17행에서 이 세 개의 항을 모두 곱한 다음에 uv 에 더해줍니다. 주석을 해제하면, 원점에서부터 바깥쪽으로 퍼져나가는 물결이 나타났다가 사라지는 것을 확인할 수 있습니다. (참고 : 17행에서는 앞에서 썼던 l 대신에 length(p) 를 써서 변수가 오염되지 않도록 했습니다.) 이것만으로도 멋진 것 같습니다만, 이제 원래 코드의 18행에 얽혀 있는 마지막 비밀을 풀어서 이 코드의 원리를 온전히 우리의 것으로 만들어볼 차례가 되었습니다.

마지막 주석을 해제하면 이런 모습이 됩니다.

18행

역시 여기도 복잡합니다.

c[i]=.01/length(abs(mod(uv,1.)-.5));

역시 하나씩 풀어보겠습니다. 일단 드디어 c 배열에 값을 넣고 있기 때문에 미뤄뒀던 for loop 를 구현해야 할 것 같습니다. 그리고 안쪽부터 들여다보면, mod(uv, 1.) 이 보입니다.

mod(a, b) 는 a 를 b 로 나눈 나머지입니다. b 가 1 일 때, 정수라면 mod 값은 당연히 0이겠지만, 쉐이더가 다루는 실수에서는 소수점을 나타냅니다. 이것은 유사 랜덤값을 계산할 때 봤던 fract 를 생각나게 합니다. 사실 mod(x, 1.) 은 fract(x) 와 동일합니다. 위의 그래프에서 2행의 주석을 해제해서 두 식이 같은 값인 것을 확인할 수 있습니다.

그리고 여기서 -.5 를 해주면, 범위는 -0.5~0.5 가 될 것이고, abs 연산을 해주면 0.0~0.5 가 될 것입니다. 3, 4 행의 주석을 해제해서 이 연산을 따라갈 수 있습니다. 4행까지 오면 그래프는 삐죽삐죽한 삼각형이 반복되는 산 모양이 됩니다.

원래 값이 uv 이므로 아무 것도 없는 uv 에 이런 연산을 하면 어떤 모습이 되는지 쉐이더로도 그려보겠습니다.

R, G 채널에 abs(mod(uv,1.)-.5) 를 넣으면 안쪽은 어둡고 바깥쪽으로 갈수록 밝아지는 형태의 화면을 볼 수 있습니다. 원래 uv 의 범위는 0.0~1.0 이기 때문에 위의 그래프에서 값이 0.5 에서 시작해서 0으로 갔다가 다시 0.5 로 가는 것을 확인했다면, 화면에 색이 이렇게 배치되는 것을 이해하실 수 있을 것입니다.

그 다음 13행의 주석을 해제해보면, 화면 크기에 따라 약간 옆으로 눌린 검은색 원이 형성되는 것을 볼 수 있습니다. 이것은 uv 에는 p 와는 달리 화면 비율에 대한 처리(resolution.x/resolution.y 를 곱해주는 것)를 해주지 않았기 때문입니다. 이런 불균형함이 ‘Creation’ 의 애니메이션 중간에 약간 눌린 타원이 등장하게 하여 시각적 풍부함을 더해줍니다.

14행의 주석을 해제해보면 아주 작은 붉은 원을 볼 수 있습니다. 기존의 값을 역수로 곱해주고 아주 작은 값인 .01 만 분자에 남겼기 때문에 0보다 커서 눈에 보이는 값의 면적은 매우 작아졌습니다.

이제 지금까지 모은 정보로 18 행이 어떤 의미인지 해석해보자면 아주 좁은 타원 영역을 만드는 것입니다. 하지만 이 좁은 타원 영역은 17행에서 받는 uv 를 기반으로 하기 때문에 디스크 형태로 원점에서 바깥쪽으로 퍼질 수 있습니다. 그럼 이제 마지막으로 17, 18 행을 조합하면 ‘Creation’ 이 재현될 것입니다.

일단 for loop 를 거쳐서 time 에 .07 씩 더해준 후에 c[i]=uv.x; 로 uv 중 하나의 값만 넣어보았습니다. 앞에서 설명드렸던 색수차 효과가 희미하게 보이는 것을 확인할 수 있습니다. 색수차 효과는 특히 물결이 커지면서 잦아들기 시작할 때 가장 잘 보입니다.

초기 세팅(18, 21행 주석)

21행의 주석을 해제해보겠습니다. 20행은 c 값을 RGB 채널에 그대로 넣어주고 있지만, ‘Creation’ 에는 21행처럼 마지막에 c/l 을 넣어줍니다. l=length(p) 로 바깥쪽으로 갈수록 큰 값이기 때문에, 이것으로 c 를 나눠주면 이미지의 흐릿한 부분이 사라지고 constrast 가 뚜렷해지는 것을 볼 수 있습니다. 그리고 색수차 효과도 더 진해집니다.

21행 주석 해제(18행 주석)

다시 21행을 주석처리하고, 18행의 주석을 해제해보면 색수차 효과를 나타내는 RGB 의 작은 점들이 원점에서 바깥쪽으로 퍼져나가는 것을 볼 수 있습니다. 18행은 앞서 보여드린 것처럼 이미지를 작은 타원으로 모아주는 효과를 갖지만, 18행을 계산하는 uv 는 time 을 기반으로 하는 z 값에 의해 변하기 때문에 역시 바깥쪽으로 퍼지게 됩니다.

18행 주석 해제(21행 주석)

이제 마지막으로 21행의 주석도 해제하면, 작았던 점들이 커지는 것을 볼 수 있습니다. l 은 원점 주변에서 매우 작은 값이기 때문에 이 값으로 나눈 값은 커지게 됩니다. 따라서 전체적인 광점의 크기가 커지고 디테일이 살아나게 됩니다.

모든 주석 해제(최종 이미지)

이것으로 Creation 의 분석을 마치겠습니다. 다음에도 멋진 이미지와 함께 돌아오겠습니다. 긴 글 읽어주셔서 감사합니다.