[유나이트 서울 2018] '붕괴3' 애니메이션 스타일, 유니티로 어떻게?

[강연자 소개] 잭 허(Jack He) 강연자는 미호요에서 테크니컬 및 아트 디렉터를 역임하고 있다. NPR 스타일 렌더링, 실시간 게임을 위한 물리 상호작용 등을 연구해왔으며, 현재는 유니티를 활용한 고품질 애니메이션 스타일 구현법을 다루고 있다.

지난 2016년 출시된 ‘붕괴3’는 전 세계 개발자들에게 큰 놀라움을 선사했다. 경이적인 수준의 그래픽과 게임 완성도, 그리고 IP로서의 높은 가치를 선보이며 ‘중국’에 대한 편견을 보란 듯이 깨부쉈다. ‘붕괴학원2’에서 얼핏 비치던 가능성을 몇 년만에 현실로 뒤바꿨다.

개발사인 미호요(miHoYo)는 유니티의 기능을 십분 활용했다. 진정한 ‘애니메이션 스타일’을 구현하기 위해 부족한 게 있다면, 독자적인 방식을 통해서라도 끝까지 구현해냈다. ‘붕괴3’는 그런 고집의 결정체였다.

붕괴3는 다양한 특수 효과를 사용한다. 다이나믹 파티클(Dynamic Particles), 블룸(Bloom), 플레이너 리플렉션(Planer Reflection), 디스토션(Distortion) 등을 통해 수준급의 렌더링을 구현했다. 모바일 환경에서 리플렉션을 구현하기 위해 옵셔널 블러 패스(Optional blur pass)를 사용했으며, 금속 재질의 바닥에 매트한 느낌을 주기 위해 메탈 브러쉬(Metal brush)를 디스토션시켰다. 이후 스펙큘러 스케치 마스크(Specular sketch Mask)를 사용해 전체적인 리플렉션을 상승시켰다. 바닥이 없을 경우 프레스널(Fresnal)을 사용했으며, 전체 해상도를 1/3 이하로 가져갔다. 결과적으로 블러(Blur)가 되기 때문에 충분한 값이다.

풀스크린 디스토션(Full Screen Distortion)은 회전 칼날 등 씬 이펙트(Scene effect)에서 사용된다. 세 개의 채널로 두 개는 오프셋(Off-Set)으로, 나머지 하나는 뎁스 인텐시티(Depth Intensity)에 사용했다. 전체적인 효과는 포스트 프로세싱(Post-Processing)으로 적용했으며, 결과적으로 개별 적용보다 빠른 모습을 보여줬다. 모바일에서는 이런 트레이드 오프(Trade-off)도 감수할 만하다.

아울러 블룸을 통해 영화 같은 조정이 가능하다. 여기에 신데시스(Synthesis)를 이용하면 효과적인 스페셜 이펙트를 만들 수 있다.

날씨와 구름은 다양한 컨피겨레이션(Configuration)을 추구했다. 컬러맵(Color Map)을 사용하면 과하기 때문에 멀티 레이어로 쉐이딩(Shading)을 진행했다. 이를 통해 시간, 날씨에 따라 각기 쉐이딩을 구현할 수 있었다. 결과적으로 산 같은 모양의 구름, 천둥 번개 구름 등 다양한 환경을 조성하는 데 성공했다. 백그라운드와 컬러에는 키프레이 데피니션(KeyFrame Definition)을 사용해 시간에 따라 달라지는 색상을 표현했다.

대기가 변화되는 걸 표현하기 위해 포그(Fog), 스카이박스(Skybox) 등을 활용했다. 씬 포그는 패러미터가 다양한데, 색상 및 거리 등을 적용할 수 있다. 스카이박스 역시 쉐도우, 구름 색상 등을 조절할 수 있기 때문에 두 기능을 활용해 화창함, 밤, 낮 등 다양한 환경을 구현할 수 있다. 아울러 캐릭터 쉐이딩 역시 이 부분에 영향을 받게 되며, 로컬 쉐이딩도 라이팅 볼륨에서 결정된다.

배경의 입체적 표현을 위해 뎁스 오브 필드(Depth of Field)를 사용했다. 백그라운드 레이어가 별도의 카메라를 사용하게 하여 조율했으며, 최고의 비주얼을 위해 헥사곤 게더 패턴(Hexagon gather pattern)을 사용했다. 아울러 루미넌스(Luminance)는 2 정도로 적용했고, 전체 퍼포먼스를 안정시키기 위해 다이내믹 레졸루션(Dynamic Resolution)을 블러 사이즈에 맞춰서 적용했다. 그리고 블러 간의 관계를 정의하기 위해 트랜지션 커브(Transition Curve) 역시 사용했다.

전투 중 효과적인 클라이막스 연출을 위해 적용된 불릿 타임 이펙트(Bullet-time effect)는 타임 스케일(Time Scale)을 활용한 결과물이다. 타임 스케일에 맞춰 물방울이 4개의 모양으로 변화하며, 애니메이션 커브(Animation Curve) 기능을 활용해 시간이 느려질수록 물방울이 수직으로 늘어지도록 만들었다.

미호요는 중국 내 유명 서브컬처 플랫폼 빌리빌리(bilibili)에 붕괴3 IP를 활용한 다양한 영상을 게재한 바 있다. 해당 동영상에는 미호요의 기술력이 집약되어있으며, 현재 3억 회 이상의 시청횟수를 기록하는 등 높은 인기를 얻고 있다.

미호요는 아니메(Anime) 스타일 동영상을 제작하기에 앞서 완벽한 캐릭터 쉐이딩을 목표로 잡았다. 에어리얼 라이팅에 적절하게 반응하는 것이 필수였으며, 이를 위해 멀티 램프(Multi Ramp)를 사용했다. 옷감 등에는 멀티 채널 램프를 사용했으며, 눈과 헤어스타일에는 애니소트로픽 매테리얼(Anisotropic material)을 적용했다.

멀티 채널 2D 램프는 셀 쉐이딩(Cel Shading)과 유사한 효과를 내기 위해 다양한 색상을 디퓨징(Diffusing)해서 적용했다. 일반적인 디퓨징은 쉐도우가 지저분해 보이기 때문에 아니메 스타일 그래픽에 적용하기엔 어려움이 있다. 이 난점을 해결하기 위해 3개 레이어를 사용해 미세하게 보이도록 했으며, 레이어가 중첩되면서 표현이 한층 풍부해졌다.

멀티 램프를 이용해 쉐이딩을 할 때 브러쉬 텍스처 패턴을 활용해 다양한 결과를 만들어낼 수 있다. 다수의 브러쉬 패턴을 저장해 여러 가지를 같이 사용하면 손으로 그린듯한 효과를 낼 수 있다.

고품질의 림 라이트(Rim light)를 얻기 위해 림리스(Rim less), 스무드리스(Smoothless)한 표현을 활용했다. 글로벌 파라미터 외에도 부분적인 버라이어티를 강화했으며, 큐브맵을 사용해 림 라이트 색상을 특정할 수 있었다. 아울러 AO 텍스처와 쉐도우를 사용해 오클루젼(Occlusion)을 가렸다.

아니메 스타일에는 그림자가 별로 없다. 기본적으로 단일 버텍스(Vertex) 컬러를 사용한다. 캐릭터 쉐도잉을 위해 유니티에 내장된 PCSS를 활용했지만, 완벽한 결과가 나오진 않았다. 거리에 상관없이 일정한 뷰 베이스 쉐도우맵(View-based shadow map)을 사용했고, 내추럴 트랜지션(Natural Transition)을 줄이기 위해 PCSS를 다시 활용했다.

눈 부분은 물리 굴절을 활용했다. 빛의 방향 등에 따라 리프렉티브 인덱스(Refractive Index)가 달라지는데, 이 부분을 고려하지 않으면 눈이 예쁘게 만들어지질 않는다. 물결, 코스틱 이펙트(Caustic effect)도 고려했다. 기존에 생성된 쉐이드를 활용했고, 빛의 변경(edge)을 드러낼 수 있도록 만들었다.

헤어는 하이라이트가 동적으로 구현되는 걸 목표로 삼았다. 위지위그(WYSIWYG) 컬러를 사용했고, 멀티 램프 역시 적용했다. 특별한 하이라이트를 위해 로우 프리퀀시(Low-frequency), 러프니스(Roughness)와 AO 텍스처를 적용했다. 애니소트로픽 하이라이트를 위해 플로우맵을 사용, 디렉션과 형태에 따라 하이라이트를 구현했다. 여기에 지터(Jitter) 맵을 사용해 디스토션을 추가로 만들었다. 이를 통해 스트립(Strip)의 두께를 제어할 수 있었다.

다만, 빛과 카메라의 위치에 따라 쉐이핑이 달라지는 문제가 있었다. 아울러 패턴 표현에도 한계가 있었기 때문에 새로운 방식을 개발해 적용했다. 우선 수직 방향으로 헤어 UV를 전부 분해했으며, 0부터 1까지 몇몇 커브와 베이스 쉐이핑을 구현하기 위해 지터 노이즈를 사용해 두께를 조절했다. 지터 스케일 등의 파라미터를 조절하면서 다양한 쉐이핑을 구현하는 데 성공했다.

아웃라인 자체는 버텍스 노말(Vertex Normal)을 필요로 했고, 추가적으로 버텍스 컬러를 사용해 선의 두께를 제어했다. 카메라와 오브젝트의 사이의 거리도 감안할 필요가 있다.

하지만 백 페이스는 애매한 엣지가 자주 등장한다는 단점이 있었다. 이에 지오메트리로 직접 드로잉을 했으며, 프리프로세싱(preprocessing)에서 크리즈 엣지(Crease-edge)를 잡을 수 있었다.

또 다른 접근법으로는 이미지 스페이스(Image space)가 있다. 거의 대부분의 아웃라인을 커버할 수 있으며, 복잡함과 상관없이 퍼포먼스가 꾸준히 나온다는 장점이 있다. 다만, 선의 두께를 변경하는 것이 조금 어렵기 때문에 독립성을 얻기 위해선 씬 아웃라인 렌더링을 거쳐야한다.

관절 부분은 유니티의 휴먼 스켈레톤(human skeleton)을 사용하면 이상한 결과가 나올 때가 있기 때문에 모델링 툴을 활용해 직접 블렌딩했다. 두 개의 관절에 각각 90도, 140도에 해당되는 블렌드 쉐이프(Blendshape)를 적용했으며, 조인트 코렉션(Joint correction)을 사용해 추가적인 효과를 보기도 했다.

향후 미호요는 씬 렌더링을 위해 PBR 매터리얼과 결합된 브러쉬 모듈레이션(brush modulation)을 선보일 예정이며, '붕괴3'를 비롯한 게임에 대한 최적화 작업 역시 진행할 계획이다.