[포니 게임 개발] 28. 카툰 쉐이딩(쉘 셰이딩)

한동안 글이 없었죠? 이 게임에 스크립트로 사용하는 쓰는 루아 녀석이 자꾸 가비지 컬렉션하다가 멈춰버리는 현상때문에 언어를 새로 개발하고 있었슴다... (PGLight 관련 게시글을 찾아보세요...ㅋ)

최근에는 여러가지 셰이딩 모드를 테스트해봤습니다. 생각보다 깔끔하게 카툰셰이딩을 하는게 쉬운일은 아니네요. 여러가지 문제점 중에 하나는 일반 Directional Light만 있는 경우에는 그냥 입사각도에 따라서 적당히 노말벡터랑 내적해서 계단함수 넣어서 적당히 끊어주면 되는데, Point Light를 도입하다보니, 거리감쇠를 넣을수 밖에 없더라구요. 거리감쇠도 계단함수로 할수는 없으니... Point Light에서는 계단과 부드러움이 동시에 나타나는 이상한 조화현상이.... 그래서 다른 셰이딩 모드가 없나 한참 고민하고 테스트하다가 이렇게 글쓰게 됐어요.

1. 일반 셰이딩 (사실적 렌더링)

사실적 렌더링에서 셰이딩을 하는 방법은 간단하죠.

float PhotoRealistic(float x) { return x; }

노말벡터와 광선벡터를 내적한 값을 전혀 건드리지 않고 그냥 사용합니다. 위 코드와 그림과 같은 함수를 사용하는거죠.

그림자와 더불어 명암이 부드럽게 드러나기에 입체감이 느껴집니다.

이는 점 광원 아래에서도 마찬가지지요.

하이라이트에서도 마찬가지.

2. 기존까지 사용하던 카툰 셰이딩 (3단계 계단)

위의 사실적 렌더링은 비교를 위해서 굳이 넣은것이구요, 실제로는 저 코드가 아니라 셸세이딩을 위해 다음과 같은 코드를 그동안 썼었어요.

float cellstep3(float x) { return ceil(x*3)/3; }

저 코드대로 그래프를 그리면, 이렇게 나옵니다. 원래는 0~1로 부드럽게 이어질 직선이 인위적으로 3등분되어 뚝뚝 끊어져나옵니다. ceil을 이용해서 값들을 위로 끌어올렸기에 전체적으로 밝아보이기도 하죠. 다만 문제점은 경계가 너무 날카롭다는거 (이걸 의도로 했다면 좋은거겠구요)

대시 등판을 보면, 명암이 3등분된 것이 명확하게 보입니다. 또한 하이라이트 역시 칼같이 잘려요.

문제는 점 광원 마저 칼같이 잘리면서 둥근 테두리를 형성합니다.

역시나 명암이 3등분되었습니다. 어찌 보면 좀 어색해보이기도해요.

이 방법은 점 광원에선 도저히 써먹을수가 없어서, 그동안은 점 광원은 사실적 렌더링을 적용했습니다. 그래서 같은 포니라도 점광원 아래에서는 입체감이 살아나고, 직선광원 아래서는 입체감이 줄어드는 기묘한 현상이 있었죠...

3. SmoothStep을 이용한 카툰렌더링

그래서 모서리도 둥글게하고, 점 광원 테두리도 안 나타나게 하는 방법을 뒤졌습니다.

다행히도 HLSL Intrinsic함수로 smoothstep이라는 놈이 있더군요. 에르미트 보간법을 이용한 놈이랍니다.

float cellsmooth2(float x) { return smoothstep(0.33, 0.67, x); }

그러면 이렇게 부드러운 계단 곡선이 나타납니다. 근데 문제는 이놈이 2단 계단이라서, 0쪽에 파묻혀 버리는 부분이 많습니다. (광선벡터와 법선벡터 내적값이 대게는 1보다는 0쪽에 가깝게 나타나는 경우가 많으니까요) 그래서 전반적으로 어둡게 나올수 있는데, 그것을 대비해 x에 약간에 bias를 더해주는것도 괜찮습니다. 저는 0.16정도를 더해줘봤어요.

점광원에서도 부드러운 테두리가 나타납니다. 다만 역시나 어두운쪽은 과격하게 어둡네요. (실은 이게 맞는거지요. ceil이 어두운곳까지 밝게 만들었던거니까요.)

하이라이트와 음영 모두 테두리가 부드러워요. 부들부들

계단현상이 일어나는걸 막기 위해 그림자를 뭉개다보니 그림자는 부드러워질수 밖에 없죠. 그런데 음영이 날카롭게 들어가면 둘이 서로 안 어울릴수밖에 없습니다. smoothstep은 음영도 부드럽다보니 조금더 자연스럽네요. 다만 흠은 카툰 셰이딩의 느낌이 안나요. 그냥 사실적 셰이딩에서 어두운쪽과 밝은쪽을 약간 조정해놓은듯한 기분입니다.

4. 이중 SmoothStep을 이용한 카툰렌더링

그래서 최종적으로 제가 꺼내든 칼은 이중 smoothstep을 이용해서 3단 계단을 만든것이죠.

float cellsmooth3(float x) { return 0.5*(smoothstep(0.16, 0.34, x) smoothstep(0.66, 0.84, x)); }

이렇게 하면 요런 3단 계단이 나옵니다. 역시나 0쪽에 치우치는 부분을 줄이고자 실제 코드에서는 bias로 0.1을 더해줬구요.

다리를 보면 확실히 3단으로 명암이 들어간게 보입니다. 경계가 생각처럼 썩 부드럽지는 않네요

점광원 아래에서도 문제 없습니다. 3번에서 나타났던 지나치게 어두워보이는것도 덜하네요.

명암이 확연하게 3단계로 구분됩니다. 약간 부드럽게 보이구요.

그래서 최종적으로 4번으로 고르게 되었습니다. (이게 어째 자꾸 계산량이 많은걸로만 고른다? smoothstep 같은 경우는 내부적으로 saturate와 4번 이상의 곱셈과 나눗셈이 들어가는 연산이라서...)

사진을 비교해보기 좋게 정리해봤어요.

사실적 렌더링	날카로운 3단 계단	부드러운 2단 계단	부드러운 3단 계단