안녕하세요. 스파게티 몬스터입니다.
저는 주로 게임 제작을 하면서 발생하는 엔진 문제를 해결하는 역할을 담당하고 있습니다.
캐릭터 색상이 마비노기와 미묘하게 다릅니다!
어느 날 아트팀에서 헬프 요청이 왔습니다.
"언리얼 엔진에 마비노기 캐릭터 셰이더를 그대로 옮겼는데 캐릭터 색상이 미묘하게 달라요!"
"Unlit 으로 테스트해 봐도 톤이 달라요!"
어찌어찌하면 플레이오네 엔진에서의 색상과 비슷하게 맞출 수 있다 해도 임시방편이 아닌 좀 더 근본적인 해결이 필요했습니다.
염색에 진심이신 밀레시안 여러분들에게 달라진 캐릭터 색을 보이는 것은 절대 있어서는 안되는 문제이기 때문입니다!
<플레이오네 엔진 vs 언리얼 엔진(Unlit) vs 언리얼 엔진(마비노기 전용 셰이더) 캐릭터 색 비교>
이 글에서는 엔진이 바뀌면서 캐릭터 색이 달라 보이는 문제의 원인을 찾고 해결하기 위해 고민했던 내용들을 공유드리려 합니다.
색이란 무엇인가?
게임 엔진에서 셰이더니 Unlit 이니 하는 얘기를 하기에 앞서 그전에 우리가 흔히 얘기하는 색이란 무엇인지 잠시 살펴봅시다.
색이란 무엇일까요?
우리의 눈은 빛이 물체에 도달한 후 반사되는 파장 중, 가시광선 파장을 물체의 색으로 인지하여 봅니다.
사과가 빨간색으로 보이는 것은 사과가 빨간색 빛만 반사하고 다른 빛은 모두 흡수하기 때문입니다.
사과가 반사한 빨간색 빛만 보는 걸까요?
그렇지 않습니다. 자연에서는 이렇게 사과 주변의 물체나 물질에 의해 빛이 흡수, 반사되고 그 반사된 빛이 또 다른 물체에 다다르면 흡수/반사되는 과정이 더 이상 반사할 빛이 없을 때까지 반복됩니다.
이렇게 간접적으로 사과에 반사된 빛까지 모두 눈에 들어오면 우리의 눈은 어떻게 색깔을 인지할까요? 가시광선 탐지기라도 있는 걸까요?
그렇습니다. 눈에는 색깔을 감지하는 원추세포와 명암을 감지하는 간상세포가 있습니다.
헉... 이게 갑자기 무슨 얘기인가요? 차라리 셰이더니 Unlit 얘기를 하라는 소리가 어디선가 들리는 듯합니다.
조금만 더 인내하시면 저의 큰 그림을 파악하고 고개를 끄덕거릴 것입니다.
사실 세포 이름이야 아무래도 상관없습니다.
이 세포를 통해 색깔과 명암을 감지하고 뇌 신경에 전달하면 뇌에서 색깔을 인지하게 된다는 것입니다.
말씀드리고 싶은 것은 이 부분입니다.
원추세포와 간상세포의 분포가 밝기나 색깔에 따라 다르다는 점입니다.
즉, 밝기나 색깔을 인지하는 정도가 일정한 게 아니라는 뜻이죠. 예를 들어, 우리는 어두운 곳에서나 녹색을 볼 때 더 섬세하게 감지할 수 있습니다.
이는 녹색 식물이 많은 자연환경에서 이를 구분하는 능력이나 어두운 곳에서 잘 적응함으로써 생존에 유리했을 거라는 얘기도 있습니다.
아무튼 이런 이유로 TV, 모니터와 같은 디스플레이 기기도 사람의 눈의 인지 능력에 맞추어 제작되었습니다.
디스플레이의 정해져 있는 해상도를 이왕이면 사람의 눈이 잘 감지하는 영역에 더 많이 사용하고 덜 감지하는 영역은 적게 사용하는 거죠. 잘 감지하는 영역의 해상도가 높으면 화질이 좋다고 느낄 테니까요.
이렇게 모든 컬러와 명암이 동일한 분포로 출력되지 않고 좀 더 어두운 부분의 해상도를 높여서 출력되게끔 제작되었습니다.
감마 커브는 이렇게 사람의 눈의 인지 능력에 맞추어 디스플레이 밝기 수준을 조정하는 용도로 사용됩니다.
아래는 CRT 모니터로 출력한 경우 입력 값보다 어두운 영역이 더 많이 분포되도록 출력 됨을 확인할 수 있습니다. (오른쪽 이미지)
요즘에는 HDR 디스플레이가 나오면서 더 다양한 밝기를 표현할 수 있어야 하기 때문에, 예전의 감마 방식 대신 새로운 신호 처리 방식을 사용하여 화면에 출력하기도 합니다.
다만 그전까지 디스플레이 장치들이 위와 같이 제작된 경우가 많았기 때문에 색상 정보가 아닌 단순한 데이터 값으로 계산하고 싶을 때 선형 데이터로 보정하여 사용하기도 했습니다.
지금까지 색이란 무엇인가라는 주제로 살펴보았는데요.
우리가 모니터를 통해 인지하는 색은 다음과 같은 요소들이 영향을 주고 있음을 확인했습니다.
●'사과가 빨간색 빛의 파장을 반사한다'는 것과 같이 빛의 반사/흡수/산란 특성을 정의하는 재질.
●사과에 직접적으로 영향을 주는 빛.
●다른 물체에 의해 반사된 후 사과에 도달하여 간접적으로 영향을 주는 빛.
●모니터에 의해 출력되는 결과와 이에 대한 감마 보정 혹은 톤 보정 처리.
자연 세계에서는 훨씬 더 여러 가지 요소들이 색에 영향을 주고 있겠지만 플레이오네와 언리얼 엔진에서 캐릭터 색감의 차이를 살펴보기 위해 고려한 요소들은 위의 네 가지로 요약해 볼 수 있겠습니다.
어떤가요? 원추세포... 꼭 언급했어야 했나 하는 후회가 이제 밀려오는군요.
플레이오네와 언리얼 엔진의 차이
앞에서 색에 영향을 주는 요소 중 네 가지를 살펴보았습니다. 두 엔진은 이 네 가지에 대해 각각 어떻게 기능을 제공하고 있을까요?
빛에 대한 재질의 반사/흡수와 같은 특성은 게임 엔진에서 머티리얼 (혹은 셰이더)로 이를 정의합니다.
(참고로 빛에 대한 재질의 영향이 전혀 없는 것을 언리얼 엔진에서 Unlit이라고 부르고 이때에는 빛과 무관하게 항상 설정된 색상으로 보입니다.)
플레이오네에서 셰이더를 언리얼 엔진으로 그대로 옮겼다고 했으니 이것의 차이는 없다고 가정해 보죠.
그럼 남아 있는 요소는 다음과 같습니다.
●직접적, 간접적으로 영향을 주는 조명.
●모니터에 의해 출력되는 결과와 이에 대한 감마 보정 혹은 톤 보정 처리.
마비노기가 포팅할 언리얼 엔진에는 루멘이라는 조명시스템이 있습니다.
실시간으로 장면에 영향을 주는 조명의 직접광, 간접광들을 계산해 줍니다.
<루멘을 사용하기 전후 결과 비교>
이는 오래전 제작된 플레이오네에는 없는 기능이죠. 이 조명시스템의 차이가 색에 영향을 줄 수 있을 겁니다.
또 다른 차이점으로 마비노기는 감마 보정을 사용하고 있는데요, 언리얼 엔진은 Tone mapper라는 시스템을 제공하고 있고 여기서 감마 보정이나 다른 보정 방식을 지원하고 있습니다.
톤 보정의 차이점도 역시 색에 영향을 주는 요인이므로 차이점을 살펴보아야 합니다
Tone mapper에 의한 톤 보정의 차이점과 문제 해결
언리얼 엔진은 포스트 프로세스라는 기능으로 Tone mapper를 지원하고 있는데요, 저희가 카메라에서 사용하는 필터 효과 같은 것도 이런 후처리 기능이라 볼 수 있습니다.
포스트 프로세스에서 아래와 같은 컬러 그레이드 텍스처로 감마 보정 대신 컬러 보정을 계산하고 있었습니다.
엔진 디폴트 값이 컬러 보정을 무조건 사용하도록 설정되어 있었습니다.
그래서 관련 파라미터 값을 조절하여 칼라 보정을 사용하지 않고 감마 보정만 계산되도록 수정했습니다.
그 결과 Unlit 셰이더를 사용할 경우 캐릭터가 플레이오네와 같은 색감으로 출력됨을 확인할 수 있었습니다.
<플레이오네 엔진 vs 언리얼 엔진(Unlit) vs 언리얼 엔진(마비노기 전용 셰이더) 톤 보정 후 색 비교>
"자, 아직 Unlit 셰이더 기준이긴 하지만 캐릭터 톤이 플레이오네와 같아졌어요! 컬러 보정만 안 하도록 파라미터 설정을 해주면 됩니다."
그렇지만 이것은 아트팀에게 원하는 결과가 아니었습니다.
"FX 나 배경 쪽에서는 컬러 보정을 사용하고 싶어 해요, 캐릭터만 톤 보정에서 예외 처리할 수 없을까요?"
배경은 캐릭터의 톤을 신경 쓰지 않고 컬러 보정을 사용하고 싶은데요, 캐릭터 때문에 컬러 보정을 사용하지 않으면 배경 색감이 원하는 대로 나오지 않는 문제가 생깁니다.
<캐릭터 기준으로 톤을 맞추면 배경의 톤이 달라진다 (좌: 배경에 톤을 맞춘 경우, 우: 캐릭터에 톤을 맞춘 경우)>
'톤 보정을 처리하는 Tone mapper 단계에서 캐릭터인지 아닌지만 구분할 수 있다면, 캐릭터만 컬러 보정을 하지 않도록 예외 처리해 볼 수 있을 텐데 방법이 없을까?'
고민을 하던 중... 불현듯 아이디어가 머리를 스쳐 지나갔습니다. 캐릭터 외곽선!
그렇습니다. 툰 셰이딩에서 캐릭터 외곽선을 항상 그리는데요,
마비노기 이터니티에서는 엔진의 포스트 프로세스 기능을 사용해서 캐릭터 외곽선을 그려주고 있습니다.
이 기능을 잘 응용해서 캐릭터 외곽선을 그릴 때 캐릭터 식별 마스크 정보도 기록해서 넘겨주면, 톤 보정과 Bloom까지 캐릭터만 예외 처리하고 싶은 곳에 다 사용해 볼 수 있습니다.
<캐릭터 외곽선 그릴 때 따로 기록한 캐릭터 마스크 정보>
이 캐릭터 식별 마스크 정보로 톤맵 보정뿐만 아니라 Bloom도 캐릭터만 따로 조절할 수 있도록 기능을 추가할 수 있었습니다. (흐뭇~)
<캐릭터 전용 톤맵 파라미터 제어>
<캐릭터 전용 Bloom 파라미터 제어>
조명 계산 차이점과 문제 해결
지금까지 진행된 결과로 수정하면 Unlit 셰이딩 모델로 만들었을 때에는 플레이오네와 동일한 색감으로 보이는 것을 확인했습니다.
<플레이오네 엔진 vs 언리얼 엔진(Unlit) vs 언리얼 엔진(마비노기 전용 셰이더) 톤 보정 후 색 비교>
하지만 오른쪽에 보이는 마비노기 전용 셰이더를 사용하는 캐릭터는 여전히 색감이 다르게 보입니다.
그냥 Unlit으로 사용하면 안 되나요? 이렇게 생각할 수 있습니다.
Unlit 은 말 그대로 조명에 영향을 받지 않는 셰이더입니다.
따라서 그림자가 드리워진 나무 그늘 밑으로 캐릭터가 들어가든 말든 항상 위와 같은 가짜 조명이 보일 것입니다.
그래서 마비노기 전용 셰이더를 언리얼 엔진에 맞게 정상화할 필요가 있었습니다.
마비노기 전용 셰이더도 Unlit처럼 플레이오네와 동일한 색감으로 표현되면서, 동시에 조명과 그림자가 반영되도록 하는 것이 이번 목표입니다.
일단 왜 이렇게 어두워 보일까요?
<그림자 맵 비교>
알고 보니 마비노기 전용 셰이더를 사용하는 캐릭터는 항상 그림자가 드리워지게 셰이더가 구현되어 있어 어둡게 보이고 있었습니다.
항상 그림자가 드리워지지 않고 그림자가 필요한 경우에만 음영이 드리워지도록 수정해 보았습니다.
그림자 영역이 아닌 경우 밝아지기는 했지만 빛이 계산되는 영역의 느낌이 툰 느낌보다는 실사 느낌이 나네요.
아마도 언리얼 엔진으로 가져올 때 이런 이유로 항상 그림자가 그려지는 상태로 만들어진 것 같습니다.
툰 셰이딩 느낌을 유지하기 위해 캐릭터의 그림자 색을 별도로 기록하고, 툰 셰이딩에서 사용하지 않는 버퍼는 놀리기 아까우니 라이팅 색을 기록하는 용도로 바꾸어 음영 결과를 반영해 보았습니다.
<수정 전(라이팅 색만 존재) vs 수정 후(그림자 색과 라이팅 색 분리후 음영에 따라 툰 방식으로 합성>
이제 그림자, 기본 조명 계산 결과는 플레이오네와 동일하게 계산됨이 보장됩니다.
다음으로 언리얼 엔진이 제공하는 루멘 간접광 환경에서 마비노기 전용 셰이더를 사용한 경우 간접광 계산 결과가 너무 과하게 나와 캐릭터 색상이 제대로 안 나오는 것을 확인했습니다.
<캐릭터에 대한 루멘 영향력이 높은 상태 vs 낮은 상태>
이는 마비노기 전용 캐릭터 셰이더를 사용하는 경우 루멘 영향력을 따로 제어할 수 있도록 기능을 제공하여 해결했습니다.
<캐릭터 전용 루멘 파라미터 제어하기>
이런 방식으로 루멘 사용을 할 경우와 아닌 경우, 캐릭터 전용 스카이라이트 영향력 파라미터, 포인트라이트 캐릭터 영향력 파라미터 등을 제공하여 배경용 라이팅과 캐릭터용 라이팅 제어를 각각 별도로 할 수 있도록 기능을 제공했습니다.
<캐릭터 전용 포인트라이트 파라미터 제어하기>
이제 배경 라이팅 설정과는 별개로 캐릭터 전용 라이팅을 설정할 수 있어 캐릭터의 색감이 배경 라이팅에 의해 크게 달라 보이지 않게 제어할 수 있게 되었습니다.
마치며...
지금까지 플레이오네와 언리얼 엔진의 캐릭터 색의 차이를 발생시키는 원인을 파악하고 해결하는 과정을 살펴보았습니다.
처음에는 단순히 플레이오네와 색감을 동일하게 보여 주자!로 시작했지만, 하다 보니 더 개선할 수 있는 부분들이 보이고 고민이 되기도 합니다.
캐릭터 렌더링을 위한 기반 작업을 마쳤을 뿐이고 이제부터가 진짜 시작이겠지요.
갈 길은 멀지만 더욱 아름다운 그래픽으로 밀레시안 여러분들에게 선보일 날을 꿈꾸며 최선을 다하고 있겠습니다! 감사합니다.
