(NDC2014) 소울로 살펴보는 하이 퀄리티 모바일 콘텐츠 제작기

(NDC2014) 소울로 살펴보는 하이 퀄리티 모바일 콘텐츠 제작기

1. 소울 소개

- 모바일 테크데모

- 한국지사에서 주도적으로 개발

- 제작기간 4달, 제작인원 5명

- 소울 스펙

> 타겟 디바이스 : 아이폰5s, 넥서스5

> 렌더 제한 : 화면당 250,000 폴리곤, 화면당 500드로우콜

> 스케일 : 시타델의 4배 크기(2km x 2km)

2. 프리프로덕션

- 컨셉 디자인

> 미래의 서울a

> 핵전쟁에 의해서 모든 전력시설이 끊기고 태양 에너지만을 사용하는 외계문명 컨셉

> 수송선도 용을 타고 다니는 느낌

> 기존 컨셉을 뒤엎고 배경을 3개로 분할(너무 무겁고 단일화된 레벨로 재미없다.)

 ㆍ동굴 : 반사 및 물리기반 렌더링

 ㆍ슬럼 : 다이나믹한 배경과 인공물

 ㆍ야외 : 거대한 지형표현과 자연물 표현

※PBR과 노멀맵을 같이 쓰면 생기는 문제

ㆍ 스펙큘러 쉬머링(specular shimmering) : 각도가 너무 예리한 부분에 스펙큘러가 반짝이면서 노이즈처럼 보이는 부분

3. 제작과정 및 팁

- 오버랩 페인팅(Overlap Paining)

> 시각적 아이디어가 부족할 때 큰 도움

> 컨셉 아티스트의 부담이 덜함.

> 기본 레벨 제작이 끝나면 다양한 각도에서 스크린샷을 캡쳐해서 컨셉 아티스트에게 발송 - 컨셉 아티스트가 그 위에 덧칠

- 샘플맵 제작

> 제작된 에셋들을 기반으로 각자 생각하는 샘플 레벨을 제작

> 있는 에셋으로 컨셉을 보여줄 수 있는 작은 레벨을 제작하여 느낌을 확인한다.

- 배경 에셋

> Zbrush를 이용한 하이폴리곤 제작

> PBR 기반의 템머테리얼 시스, 모바일에서도 잘 구동될 수 있도록

> 기존의 phong과 normal로 표현 되었던 렌더링 시스템들을 좀 더 편하고 예쁘게 표현하기 위함

> 더 어려운 기능이 아니라 더 편함

> 적은 수의 파라미터로 손쉽게 질감 표현 가능(specular power를 제작하지 않음)

> 표면의 거친정도만 지정해주면 된다.

> 기존 방식에서는 라이팅 환경이 바뀌면 머테리얼을 새로 제작(파라미터 수정, 텍스쳐 수정 등)해야 했으나, PBR은 거기서 해방될 수 있다.

※ 러프니스(roughness)

ㆍ 표면의 거칠기를 정의, 이 값에 따라 스펙큘러의 면적, 강도, 반사의 선명도가 변화

ㆍ 기존의 표면의 거칠기를 표현하는 방식(예를 들어 디테일 노말)을 대체할 수 있다.

> 리플렉션 캡처(Reflection Capture) 기능을 이용하여 반사를 제공

 ㆍ여러 지점에서 정적인 반사 요소(씬)를 캡쳐한 다음 구에 재투영

 ㆍ시차 보정이 제공된 일종의 IBL

 ㆍ기존의 큐브맵은 시차가 적용되지 않는 문제가 있었으나, 이 부분을 보완

 ㆍ반사를 예쁘게 나오게 하기 위해서는 주 광원이 좀 약해야 된다.

 ㆍ씬이 좀 어둬워야 반사가 잘 나온다.

 ㆍ내 앞의 어두운 환경에 멀리 있는 광원이 내 앞에 있는 반사체에 반사될 때 가장 예쁘게 나온다. 라이팅 배치하듯이 리플렉션 캡처를 잘 고려해야 한다.

 ㆍ실제로 리플렉션이 들어갈만한 환경, 생길만한 질감을 생성하자.

 ㆍroughness를 극단적인 0이나 1을 주면 부자연스러워지므로 0.1이나 0.9 정도로

 ㆍ광원이 너무 강하거나 반사할 물체가 너무 떨어져있을 때는 이쁘게 나오지 않는다.

- 랜드 스케이프

> 기존의 렌더링 방식보다 지형을 더 효울적이고, 렌더링 속도를 빠르게 하고, 메모리를 적게 먹고, 포폴로지도 자연스럽게 연결된다.

> 자원들을 더 넓은 지형으로 표현할 수 있다.

> Angle Based Blending : 노말의 각도에 따라서 여러 돌과 풀의 질감들을 자연스럽게 블랜딩

 ㆍ페이크 라이팅 : 가상의 라이트 벡터를 이용해 머테리얼 안에서 라이팅을 구현

 ㆍ페이크 라이팅을 명암을 위해 사용하는 것이 아니라 알파 마스크를 이용하여 두 가지 텍스쳐를 블랜딩

> Distance Based Fade : 카메라와 표면의 거리에 따라 해상도가 다른 두 개의 텍스쳐를 블랜딩

  ㆍ텍스쳐가 조밀하면 패턴이 보인다.

  ㆍ카메라와 표면의 거리가 멀어지면 느슨한 텍스쳐를 보이도록 하여 두 개의 텍스쳐가 자연스럽게 블랜딩 되도록한다.

> Heightmap based blending : 월드머신에서 제작한 높이맵을 사용하여 일정값 이하인 부분은 진흙이 나오도록

- 버텍스 애니메이션 : 바람에 흔들리는 천, 전선줄 등을 버텍스 셰이더로 표현

> 그나마 모바일에서 여유가 있는 부분

> 적은 자원으로 높은 효과를 줄 수 있는 부분(동적인 환경 표현)

> 픽셀 쉐이더는 거의 풀로 돌아가서 활용하기 어렵지만 버텍스 쉐이더는 여유가 많다.

- 머테리얼 앰비언트 오클루젼(Material ambient occlusion)

> 리플렉션 오클루젼 혹은 스펙큘러 오클루젼이라고도 부른다.

> 머테리얼 탭의 앰비언트 오클루젼 탭

> 디퓨즈에 제공되는 부분이 아니라 리플렉션 부분에만 차폐를 하도록 적용(뒤쪽 부분이 앞으로 반사되어 스며들어오는 것을 방지)

- 스펙큘러 쉬머링 해결

> 러프니스 컴포지트 텍스쳐(Roughness composite texture) : 예각에서 발생하는 눈부싱 현상을 감소

> 각도가 너무 날카로울 때 사각형의 모서리 같은 부분에서 깜박임 현상이 보이는 것

  실제 환경에서는 적당히 우리 눈이 클리핑하지만 컴퓨터는 잘 알지 못해 깜박인다.

> PBR 렌더링의 단점 중의 하나

> 이런 형상을 스펙큘러 쉬머링이라고 함

> 해결 방법

  ㆍ러프니스 맵을 한번 더 병합

  ㆍ노멀맵을 러프니스 맵으로 지정하면 자동으로 cavity 맵을 생성해준다.

  ㆍcavity 맵 : 노멀맵의 경사에 따른 알파맵(경사가 심하면 하얀색, 평평하면 검은색)

  ㆍcavity 맵을 러프니스 맵에 병합시켜서 러프니스가 약해지도록 한다.

  ㆍ거리가 가까워지면 cavity의 영향을 줄여서 깨끗한 스펙큘러가 보이게 하고,

    거리가 멀어지면 cavity의 영향을 강하게 하여 스펙큘러가 뭉게지도록 한다.

  ㆍ미리 계산해서 리얼타임에 하지 않도록 하여 퍼포먼스를 먹지 않도록 했다.

- 플로우맵(Flow map)

> 하프라이프에 사용한 테크닉

> 두 개의 텍스쳐를 패닝할 때, 텍스쳐 한 장에 패닝시키면 부자연스러우니 텍스쳐 두장을 시간차, sin함수에 의해 부드럽게 블랜딩 시킨다.

> 버텍스 페인팅을 통해서 돌에 의해 꺾이는 부분의 방향이나 속도를 조절

- 포스트 프로세스(Post process)

> temporal AA : 안티 엘리어싱

> bloom

> ColorGrade : 색보정

> AutoExposure : 자동 노출 기능

> 상당히 무겁다. 모바일에서 부담될 수 있다.

- 스페리컬노멀 라이팅(Spherical normal lighting)

> 울긋불긋한 나무가 아니라 빛을 받는 방향으로 부드럽게 빛이 퍼지는 나무가 목표

> 노말을 수동으로 다시 계산, 버텍스 쉐이더 단위로 계산하여 액터의 원본으로부터 위쪽으로 뻗어나가는 노말을 다시 지정하여 부드러운 라이팅 효과를 얻음

> 스페리컬 마스크(spherical mask) : 

  ㆍ나무 바깥의 산란효과와 나무 중앙의 그림자 효과를 위해

  ㆍSSS를 페이크로 구성

  ㆍ머테리얼에서 월드의 좌표에서 오브젝트의 좌표를 뺀 다음 여러 가지를 조작하여 구현

  ㆍ이것을 알파채널로 사용하고 앞의 페이크SSS와 블랜딩하여 나무를 최종 표현

- 스페리컬노멀 파티클(Spherical normal particle)

> 스프라이트 파티클에 스페리컬 노말을 적용하여 볼륨있는 이펙트를 페이크로 구현

- 경운기 컨셉의 수송기

> 애니메이션 블루프린트를 사용하여 속도와 방향에 따라 모션이 바뀌도록 지정

- 갈매기와 가이드 로봇

> 갈매기는 블루프린트로 구현

> 가이드 로봇은 동굴에서 길을 잃지 않도록 안내 하는 역할,  블루프린트 만으로 제작함

  (미리 지정된 위치 마커를 배열해 놓으면 가이드 로봇이 플레이어와 마커의 위치를 계산하여 안내하도록)

- HUD

> 블루프린트로 모든 UI를 제작하여 시간 단축

3. 최적화

- 드로우콜을 줄이기 위해 액터 및 머테리얼 병합

- 디바이스 실행전 라이팅 빌드 확인

- masked와 translucent 모드 최소한으로 사용

- Translucent는 최대한 겹치지 않도록 사용

- 포스트 프로세스는 최소한으로 사용

- Actor merging

> 소울 제작하면서 개발

> 여러 개의 액터를 선택해서 하나로 합쳐주는 기능

> 여러 개의 액터를 선택해서 이 기능을 실행하면 mesh, lightmap, material, lod를 하나로 합쳐줌

> 심폴리곤으로 병합되서 심폴리곤 라이선스가 있다면 활용가능

- 버텍스 쉐이더의 활용

> 남는 자원인 버텍스 쉐이더를 이용

> 픽셀 쉐이더에서 부하를 많이 차지하는 UV변환을 버텍스에서 처리하도록 함

> 실제로 퍼포먼스 측면에서 가장 많은 효과를 본 부분

- 랜드스케이프 최적화

> 컴포넌트 단위로 라이트맵, 헤이트맵, 메쉬, 디테일, 콜리스널러티를 조절

> 걸어다니는 영역에만 디테일을 높이고 다른 부분은 낮추는 식으로 최적화도 가능

- 프리컴퓨티드 비지빌리티(pre computed visibility)

> 오클루젼 컬링이 모바일에서 퍼포먼스를 많이 먹어 미리 계산해서 컬링하는 기능

> 언리얼 엔진에 탑재되어 있다.

> 아티스트가 프리컴퓨티드 볼륨을 미리 설정해놓으면 엔진이 실행되기 직전에 캐릭터의 키와 볼륨을 자동으로 계산해서 컬링을 자동으로 계산

- 어뎁티브 컬 디스턴스(adaptive cull distance)

> 각각의 오브젝트들이 특정거리 이상 되면 보이지 않는 것

> 블루프린트를 사용하여 상황에 따라 컬링 디스턴스를 다르게 적용

> 수송선이 날아갈 때는 멀리 있는 오브젝트까지 보이도록, 도착한 후에는 컬링 디스턴스를 짧게, 멀리 있는 것이 안보이도록

- 칩 컨트라스트(cheap contrast)

> 이펙트에서 텍스쳐의 감마를 조절하기 위해 사용하는 power 노드, 이 노드는 모바일에서는 가볍지 않다.(연산을 5개 차지)

> cheap contrst를 사용하면 두 개로 줄일 수 있어 power 노드를 대체할 수 있다.

- 엔진 퀄리티 조절

> quality switch 노드로 머테리얼 레벨에서 아티스트가 직접 퀄리티 조절 가능

> 해상도 크기, 안티 알리아싱, 보이는 거리, 포스트 프로세스, 그림자, 텍스쳐 해상도, 이펙트 등을 손쉽게 조절할 수 있다.

4. 정리

- 여전히 저사양폰을 무시할 수 없기 때문에 폭 넓은 범위의 디바이스 지원이 필요

- OpenGL ES 3.0 : 모바일의 여러 제한에서 벋어날 수 있다.

- 빠르게 발전하는 모바일 그래픽

  ㆍnVIDIA의 Tegra k1 칩 발표

  ㆍ이 칩으로 인해 모바일에서 다이렉트x11과 OpenGL을 직접 구동할 수 있다.

  ㆍPC로 만든 것을 그대로 모바일로 포팅할 수 있게되는 것