대단한 기술은 쓰지 않았습니다. 어디까지나 기본에 출신. 웹게임이니까요 ㅋㅋ
용량을 줄이기 위해 노력했고, 가능한한 적은 용량으로 좋은 결과물이 나오도록 했습니다.
쉐이더 계산은 용량이라기 보다 GPU 연산에 달려 있으니까요. 아무래도 그쪽에 의지하게 되었죠.
일단 완성된 쉐이더.
우선 기존의 쉐이더를 보겠습니다.
기본으로 들어있는 쉐이더인 Bumped Diffuse.
말그대로 노말맵과 Base Texture만 있는 기본쉐이더.
일단, 기본쉐이더는 너무 어두워서 쓸 수가 없습니다. Main Color를 가장 밝게 한 것임에도 불구하고.
그래서 기본 쉐이더를 쓰려면 어쩔 수 없이 Self illumination 쉐이더를 사용해야지요.
Self - illumination 쉐이더중 Bumped specular 입니다. 좀 밝아졌고, (여기서 더 올리면 타버립니다) 노말맵도 허벅지나 스카프 등에서 좀 보입니다만 여전히 너무 어둡고 배경과 이질감이 납니다.
아마 쉐이더 관리자가 없는 회사라면, 여기서 끝나는게 정상일 겁니다.
그렇지만 우린 아니지요.
그럼 이제 본격적 분석 들어갑니다.
이 쉐이더에서 텍스쳐만 없애본 상태입니다. (그냥 없애기만 하면 하얗게 날라가기 때문에 약간 main color를 낮췄습니다)
이런 기본 쉐이더들의 문제는 열심히 만든 노말맵이, 빛이 닿지 않은곳에 가면 전부 다 날라간다는 것입니다.
어두운 부분을 보시면 전부 회색으로 되어 있지요.
이런 부분을 극복하는 것은 커스텀 쉐이더를 제작할때 가장 기본적으로 고려되어야 하는 부분입니다.
다른 게임도 마찬가지 문제를 극복하도록 노력했죠.
테라에서는 IBL (Image Based Light) 기법으로, 큐브맵을 만들어서 환경광을 추가해 노말맵이 보일 수 있도록 만들었고,
미국 GDC에서 봤던 스타워즈 온라인에서는 팀 포트리스2 에서 사용한 것과 같은, 칼라 그라디언트를 이용한 텍스쳐 와핑 (Texture Warping) 을 사용해서 극복하려 했습니다.
크흑 미국 갔다온 보람이 있어
그런데 둘 다 텍스쳐를 (작지만) 사용하는 녀석이라, 지역마다 이 텍스쳐를 관리해 줘야 하고 수동으로 만들어 줘야만 합니다.
뭐 만드는건 크게 어렵지는 않습니다만 나름 귀찮아지는 데다가 텍스쳐 개수가 많아져서 I/O와 전송량을 조금이라도 차지한다는게 문제… 우리는 웹게임이므로 이것마저도 줄여보기로 결심했습니다.
그래서 사용한 것은 아주 기본적인 글로벌 라이팅 원리인 hemisphere lighting (반구조명) 방식입니다.
이 방식은 너무나도 간단한 원리로,
Color = a · SkyColor + (1 - a) · GroundColor
라는 공식을 이용하며
2개의 색을 정해놓고 하나는 하늘색 (천반구) 하나는 땅 색 (지반구) 로 결정한 다음,
Normal 방향이 어느 쪽을 바라보느냐에 따라 두 색을 적절한 각도에 맞는 색으로 보여주는 방식입니다.
텍스쳐는 전혀 사용 안하며, 어차피 노말맵을 사용하므로 있는 노말맵을 이용해서 2개의 색만 정해주면 끝납니다.
물론 큐브맵을 사용하는 IBL이나 Warping보다 조금 덜 복잡한 색이 나오게 됩니다만, 경험상 그렇게 큰 구분이 나오지도 않기 때문에 지금은 한물 간지 오래 된 이 구식 방식으로도 충분히 결과물이 나올 것이라 생각했습니다.
정말 쉽죠?
그렇게 해서 제작해 보았습니다.
새로 만든 쉐이더. Specular도 없이 그냥 Diffuse 상태입니다. 노말맵만 적용된. 이번엔 라이팅도 특별하게 제작하지 않고, 기본 라이팅을 사용하였습니다. (그래야 호환성이 좋아요)
여기에 위에서 말한 천반구 조명을 추가해 보겠습니다.
여기의 하늘은… 약간 녹색끼가 추가된 파랑색이로군요. 그리고 사막 지형이라 공기가 맑고, 강하게 내리쬘 겁니다. 이런 경우에는 보통 천반구의 색 영향이 강하게 들어오지요. 좀 강하게 넣어 보겠습니다.
영향을 좀 더 잘 보이게 하기 위해 그늘로 자리를 옮겼습니다.
그리고 천반구(하늘) 색을 넣어 보았습니다.
음영진 부분이어서 노말이 전혀 보이지 않던 부분까지도 노말이 보이기 시작합니다.
이번엔 반대로 지반구(땅 색깔) 을 추가!
특히 햇살이 강하게 내리쬐는 이런 사막 환경에서는, 땅 색깔이 강하게 반사되어 쳐 올라오곤 합니다.
물론 이 색상값들은 유동적으므로, 기후변화나 위치변화에 따라 얼마든지 바뀔 수 있습니다.
이렇게해서 GI 효과가 심플하게 완성되었습니다. 이전보다 화사하고 노말도 잘 보이고 따뜻합니다.
그다음 스페큘러 효과 추가.
위 그림에
이 스페큘라를 더하면
이렇게 됩니다.
그리고 거기에 다시 2차 스페큘러 추가.
원래 니시카와 젠지씨가 쓴 소닉 게임 기술에서 봤던 기법인데, 요즘 게임들은 너나할것 없이 쓰고 있더라고요 ㅋ
이 계산법도 꽤나 간단한 법입니다. 기존에 스페큘러 계산했던 공식을 재응용하여 카메라 방향에서 가짜 조명을 하나 더 쏘고 있는 것처럼 보이게 해서 입체감을 살리게 하는 방법인데요, 실제 방송에서도 자주 볼 수 있는 기법이기도 합니다.
물론 테라에서도 사용했더라고요. 역시 세상에 나만 아는 지식따윈 없어!
하지만 우린 그냥 심심하게 스페큘러를 단색으로 사용한 것이 아니라, 여기에 다시 Hemisphere lighting 색상을 곱해, 반구조명에서 나오는 은은한 색상임을 강조하였습니다. AD나 파트장이나 과도한 오바 색감보다 은은한 색감을 좋아하니, 튀는 느낌을 자꾸 주면 좋지 않겠지요.
즉 이렇게 말입니다. 반구조명 색상의 영향을 받고, 거기에 다시 스페큘러 색상이 곱해집니다. 흰색으로 하게되면 위와 같이 되겠지요.
이렇게 된 결과물을 다시 더하면,
좀 더 복잡미묘한 결과물이 됩니다.
노말맵도 좀 더 확실히 보이구요.
여기에 다시 외각을 강조하는 림라이트 추가. 이전의 림라이트가 너무 색상이 강해서 글로우 같은 느낌이었다면, 여기서는 다시 Hemisphere light 값을 곱해서 부드럽게 만들어 주었습니다.
테라에서 사용된 림라이트도 IBL과 각종 텍스쳐 색상, 마스킹에 따른 반응을 하게 되어 있습니다만 스페큘러 패스라서 반짝반짝 빛나는 느낌의 림라이트입니다. (때문에 라이트 디렉션 부분에서만 더 강하게 나타나게 되어 있는 방식이지요)
하지만 우리는 그것보다는 이미지를 좀 더 차분하게 만들어주면서 배경과 분리할 수 있도록 하였습니다.
이렇게요.
이걸 다시 더하면.
(디렉셔널 라이트 * 반구조명) + 스페큘러 + 가짜 스페큘러 + 림라이트
이제 여기에 텍스쳐를 곱해줍니다.
(텍스쳐 * 디렉셔널 라이트 * 반구조명) + 스페큘러 + 가짜 스페큘러 + 림라이트
여기에 마지막으로 리플렉션!!!
리플렉션을 하기 전에 주의해야할 사항이 몇 개 있는데요.
일단 우리는 노말맵이 다릅니다. 주의하세요 캐릭터팀.
일단 노말맵 색상 자체가 다릅니다.
이렇게 생겼어요
파랑색이 빠져 있습니다! 이유는 노말맵이 만들어 지고나서 R과 G는 그냥 사용하지만, B 채널은 사실 거의 1값이기 때문에 계산에 큰 영향을 끼치지 않기 때문인데요, 때문에 공식 자체가 R과 G를 계산하지만 B는 그냥 1이라고 강제로 넣어버리는 방식으로 되어 있습니다.
o.Normal = float3(NormalTex.r,NormalTex.g,1);
때문에 노말맵의 파랑색은, 스페큘러 마스킹으로 사용하게 됩니다! 그냥 놔두면 전체에 스페큘러가 먹어 버리기 때문에 반드시 blue는 검은색으로 처리해 주시구요, 스페큘러가 필요한 부분에만 흰색으로 칠해주시면 되겠습니다.
이렇게 해서 채널 하나를 절약할 수 있게 되는 거지요..
하지만 이 때문에 정말 중요한 한 가지가 있습니다!
우리 노말맵은 노말맵이 아니라 텍스쳐라는 것입니다!
유니티 이녀석이, 텍스쳐 타입을 노말맵으로 하면…
자기 멋대로 노말맵 계산 공식을 내부에서 만들어 버려서, blue 값을 다른데 사용할 수가 없게 만들어 버립니다. 마구 뒤섞더군요.
때문에 저희는 노말맵 계산 공식으로 유니티 것을 사용한게 아니라 자체적으로 만들어 썼기 때문에 유니티에게는 노말맵이라고 가르쳐 줘서는 안됩니다. 노말맵이라고 가르쳐 주는 순간, 얘네는 자기네 포맷으로 이미지를 재정렬 시켜버려서 엉망이됩니다. (이거 찾느라 고생을 좀…)
그러므로 반드시 텍스쳐로 설정해 주셔야 합니다. (원래 노말맵 자리에 일반 텍스쳐를 넣으면 워닝이 뜨게 되어 있습니다만, 이름을 바꿔서 피해갔습니다)
그리고 노말맵의 알파 채널은, 리플렉션 마스크로 사용됩니다.
이것때문에 조금 불편한게 생겼는데요.
아래 그림을 보시죠.
어깨와 가슴을 리플렉션을 주기 위해 마스킹 설정을 한 것을 알 수 있는데요,
이것은 특이하게도 스페큘러 마스킹때와는 반대로 흰색 바탕에 검은 색을 칠해주어야 효과가 납니다!!!!
이렇게 만든 이유는, 리플렉션이 필요 없을 때에는 아예 알파 채널을 만들어 주지 않으면 되는데, 아예 만들어 지지 않으면 알파 채널이 ‘흰색’ 으로 채워진 것으로 자동으로 인식하기 때문입니다. 즉. 알파 채널을 만들어 주지 않으면 전체가 리플렉션이 먹어 버리는 현상이 일어나게 되지요.
이것은 모든 텍스쳐를 만들때마다 검은색으로 알파를 일일히 넣어줘야 하고, 일부 버전의 포토샵에서는 그렇게 저장하면 저장이 안되는 문제도 간간히 생기기 때문에 매우 귀찮게 됩니다.
때문에 리플렉션에 한해서는 (노말의 알파를 이용하는 녀석) 흰 색 바탕에 검은색으로 표시해 줘야 효과가 나오게 만들어 놓았습니다. 이렇게 하면 리플렉션이 필요 없으면 ‘그냥 알파 채널을 만들지 않기만 하면’ 되는 것이니까요. 오히려 혼동이 적습니다.
좀 더 심플하게 만들고 싶었는데, 일단 이게 가장 그나마 실수를 줄일 수 있는 방법이라 생각했습니다.
어쨌건 리플렉션 마스킹 추가.
금속이 반짝반짝.
기본 텍스쳐와 곱해집니다.
이건 움직여야 이뻐요 ㅋ
이렇게 리플렉션까지 연산되어 나온 최종 결과물.
밝은 빛 아래에서. 좀 타긴 합니다. 블룸값 수정을 해야 할지도.
그늘로 들어가도 라이팅 디테일이 잘 보입니다.
등짝을 보자.
멀리서 봐도 잘 보입니다.
SSAO 까지 추가된 최상급 버전의 이미지.
알파 테스팅 버전과 노 알파 버전이 커밋되어 있습니다. 한번 사용해 보세요.
이제 기본은 되었고… 이어서 남은 작업은 다음과 같습니다.
SSS 추가 : 피부 색감보정을 위해서 작업이 추가될 것 같습니다. 어쩔 수 없이 마스킹 때문에 텍스쳐 한 장이 추가될지도… 크흐흑. (아니, 아직 일러! 알파 없는 쉐이더의 메인 텍스쳐의 알파 채널을 이용하자!)
염색 추가 : 염색이 추가될 부분의 기획을 다시 봐서 추가해야겠습니다. 텍스쳐를 안쓰려면 버텍스 칼라로 해야 하나…? 안되겠네요. 이건 추가 해야겠네.
알파 블렌딩 쉐이더 추가 : 어렵지는 않을것 같은데 해봐야 알겠어요. 주인공은 안쓰겠지만 몬스터 같은 녀석들을 위한 좀 더 가벼운 버전의 쉐이더를 만들어야겠지요.
기존에 만든 건물과 이펙트 쉐이더 재조정 : 으아아아아아아아아.