지난 3월 글로벌 서비스를 시작한 조이시티의 자체 개발 PS4 타이틀, '3on3 프리스타일'은 지난 2004년 정식 서비스를 시작한 온라인 게임 '프리스타일'을 PS4 콘솔에서 재해석한 작품이다. 길거리 농구가 주는 자유분방한 분위기를 전작에서 가져오면서도, PS4 플랫폼에 맞춘 UI와 고퀄리티 그래픽을 채용했다.

이번 NDC 2017에서는 조이시티 TAD실의 양환의 프로그래머가 강단에 올라 '3on3 프리스타일'의 비주얼 콘셉트 목표와, 이를 달성하기 위해 시도했던 여러 가지 방법들을 공유하는 시간을 가졌다. 언리얼 엔진을 이용한 개발에 익숙하지 않았던 실무자들은 어떤 과정을 통해 게임을 완성할 수 있었을까? 양환의 프로그래머는 몇 가지 예시를 통해 3on3 프리스타일이 가진 특유의 비주얼 콘셉트를 완성할 수 있었던 이야기를 설명해 나갔다.

▲ 조이시티 TAD실 양환의 프로그래머




'3on3 프리스타일' 개발 시 목표 중 하나는 인게임 그래픽으로 시네마틱 영상을 제작하는 것이었다. 이를 위해서는 언리얼엔진4가 시스템적으로 적합했는데, 퀄리티 좋은 결과물을 보유하고 있는 것은 물론, 사용하기 편한 기능과 인터페이스 등의 장점을 가지고 있었다.

언리얼엔진4를 사용하기로 결정한 후 우선했던 것은 게임의 비주얼 콘셉트에 맞게 배경을 제작하는 것이었다. 그러기 위해서는 배경의 각 요소들을 재사용 가능하도록 적당한 크리고 모듈화하는 것이 필요했고, 콘셉트에 맞춰 심플하고도 카툰스러운 분위기의 텍스처를 만들었다.

▲ 단순한 텍스처일수록 오히려 그림자 품질이 떨어져 보이는 효과가 발생

이런 도중에 언리얼엔진4 상 몇 가지 이슈가 발생했는데, 그중 하나가 단순한 텍스처에서 그림자의 품질이 저하된다는 것이었다. 3on3 프리스타일에서 배경 퀄리티는 중요한 요소였기에 고민이 클 수밖에 없었다. 하지만, 반대로 복잡한 텍스처에서 그림자 품질이 오히려 높다는 것을 확인할 수 있었다. 위 두 그림의 차이는 텍스처로, 일반적으로 단순한 텍스처가 만들기 더 쉬울것이라고 생각하는데, 동일 조건에서 같은 퍼포먼스로 비교할 경우 오른쪽이 더 만들기 쉬울 수 있다.

하지만, 3on3 프리스타일의 비주얼 콘셉트에 필요한 것은 깔끔한 쉐이딩, 다행히도 게임의 특징 상 월드(world)가 한정적이고, 카메라가 비춰지는 부분이 제한적이라는 것을 이용해 모자란 부분을 보완하고, 안 보이는 부분을 간략하게 처리하는 방식으로 깔끔 비주얼을 표현하고자 노력했다.


먼저, 라이트맵 밀도(lightmap density) 밀도에 따른 그림자 퀄리티는 위의 그림과 같다. 오른쪽으로 갈수록 퀄리티가 좋아지지만, 그만큼 무거워지는 것은 당연한 일. 이를 해결하기 위해서는 게임의 주 무대가 되는 경기 코트를 중심으로 높은 텍셀 밀도를 형성하는 것이 필요했다.

코트와 펜스, 그리고 코트에서 가까운 건물 등 게임플레이 시 시야에 가까운 곳에 배치된 모든 오브젝트들에 대해서는 이상적인 텍셀 밀도를 형성하여 제작하는 반면, 건물에 가리거나 일반적으로 잘 안보이는 오브젝트, 그림자가 드리워지지 않는 도로 등에는 텍셀 밀도를 최소화 하는 방향으로 제작했다. 또한, 일반적인 카메라 방향에서 좋은 퀄리티가 나올 수 있도록 전체적인 밀도를 조절했다. 물론, 위의 모든 것들은 퍼포먼스를 체크를 병행하면서 진행했다.

▲ 라이트맵 밀도 또한 선택과 집중이 필요했다

이렇게 한 번의 설정으로 끝나는 작업이 있는가 하면, 매번 힘든 작업도 있기 마련이다. 바로 PBR 문제다. PBR를 위해서는 베이스와 노멀 텍스처가 필요하다. 예를 들면 메탈릭과 러프니스 를 사용해 오른쪽에 보이는 기둥을 만들 경우, 노란 부분에는 러프니스를 0.5, 메탈릭을 0.1로 주고, 아래 부분은 러프니스 0.2, 메탈릭 0.8과 같은 수치를 적용하게 된다.

이러한 개념은 이해했지만, 막상 사용하려니 머릿속으로는 수치를 찾아내기가 쉽지 않았다. 마음에 드는 값을 수치로 찾기는 힘들었고, 그렇다고 값을 매번 수정하면서 텍스처를 만드는 작업은 시간이 많이 소요됐다. 따라서 이를 해결하기 위해 실시간으로 변화를 확인하며 작업하는 방법은 없을까 구상하게 되었다.

이를 위해 사용한 것은 마스크 텍스처로, 질감을 바꿔가며 변화를 지켜볼 수 있었던 한편, 인스턴싱을 이용해 다른 머테리얼로 대체해 보는 시도 또한 가능하게 됐다.



이렇게 PBR을 위한 리소스를 제작하는 시간도 줄어들었고, 다음으로는 디테일을 올려볼 수 없을까 하는 고민을 갖게 되었다. 여러 가지 방법을 고민한 결과, 의상 등 재질의 세부 디테일을 살리기 위한 방법으로 프라이머리 텍스처와 세컨더리 텍스처를 함께 이용하기로 결정했다.

처음 의상에 512 사이즈의 텍스처를 하나만 사용했을 경우 결과물이 썩 마음에 들지 않았다. 따라서 512사이즈의 프라이머리 텍스처에 256사이즈의 세컨더리 텍스처를 타일링하는 방식을 사용해 봤고, 그 결과물은 512x512 텍스처 하나만은 사용했을 때보다 전체적인 완성도가 높아지는 것을 확인할 수 있었다. 2048x2048 텍스처 하나와 비교했을 때도, 약 16분의 1 정도의 텍스처만으로도 꽤 유사한 퀄리티를 나타낸다는 것도 알 수 있었다.

▲1/16의 텍스처만으로도 비슷한 품질의 퀄리티를 나타낼 수 있었다

이렇게 3on3 프리스타일의 거의 모든 세부적인 디테일은 위와 같은 방식으로 나타내게 되었는데, 앞으로를 위해서 텍스처들을 데이터베이스화 의 필요성을 느꼈다. 이후 일정 기간마다 서로 피드백을 주고받으면서 범용적으로 사용될 수 있는 패턴들을 데이터베이스화 했고, 그 결과 그때그때 과제에 맞춰 편한 텍스처를 가져다가 사용하는 것이 가능해졌다.

위와 같은 방식으로 적은 비용으로도 꽤 근사한 퀄리티를 나타낼 수 있었고, 이렇게 만들어낸 캐릭터들은 별다른 가공 없이 인게임 소스로 영상을 제작하는 것도 문제가 없었다. (위에서 확인할 수 있는 트레일러가 인게임 소스를 이용해 만들어진 것이다)

▲ 다음 과제는 300명의 관중 NPC를 추가하는 것

질적으로 좋은 성과를 나타낸 이후에는, 그와 반대로 양적으로 해결해야 하는 문제들에 직면하게 되었다. 바로 활기찬 경기장을 만들기 위해 필요한 군중 NPC의 숫자가 그것인데, 처음에는 '많으면 많을수록 좋으니, 넣을 수 있는 만큼 많이 넣어
보라'는 주문을 받게 되었다.

당시 주문에 대략 몇 명 정도 넣으면 좋겠냐고 질문했더니, 300여 명이라는 대답을 들을 수 있었다. 우선은 300명의 군중 NPC를 추가하기 위해 단순한 형태로 제작하는 방식을 택하기로 했다. 이후 퍼포먼스를 체크했을 때 결과는 목표로 했던 프레임에 미치지 못한 만큼 좋지 않았다. 뿐만 아니라 GPU에서 NPC가 차지하는 비율을 확인해본 결과 약 40%를 차지하고 있음을 알 수 있었다.


이러한 문제를 해결하기 위해, NPC들을 그룹으로 묶기 시작했다. 처음에는 4명의 NPC를 하나로 묶어 드로우콜을 최소화하였고, 이후에는 16명까지 한 그룹으로 묶었다. 이와 함께 불필요하거나 사용빈도가 낮은 본들을 차례대로 제거하면서 최적화 작업을 진행했다. 그 결과는 이전보다 약 8fps 정도의 성능이 향상되었지만, 아직 목표로 했던 프레임에는 도달할 수 없었다.

이후에는 AmbientOcclusion, AmbientCubemap, NPC physics 등 비주얼적 영역이 적은 플래그들을 최적하기 시작했다. 하지만 여전히 300명이라는 숫자는 무거웠다. 마지막으로 사용한 것은 캡슐 쉐도우(Capsule Shadow)를 구현하는 것이었다. 매우 저렴한 비용으로 NPC들의 그림자를 표현할 수 있었고, 당시 이는 꽤나 매력적인 요소였다. 가장 중요했던 부분은 캡슐 쉐도우를 적용한 뒤에도 큰 이질감이 없었다는 것이다. 이러한 노력을 들인 결과 300명의 군중 NPC를 추가하고도 목표로 하는 프레임에 근접할 수 있었다.