Unite Seoul 2018

This article contains AI-generated translation.

 Author
 Published

[강연자 소개] 잭 허(Jack He) 강연자는 미호요에서 테크니컬 및 아트 디렉터를 역임하고 있다. NPR 스타일 렌더링, 실시간 게임을 위한 물리 상호작용 등을 연구해왔으며, 현재는 유니티를 활용한 고품질 애니메이션 스타일 구현법을 다루고 있다.
[Introduction of the Speaker] Jack He, the speaker, serves as the Technical and Art Director at miHoYo. He has conducted research on NPR-style rendering, real-time physics interactions for games, and currently focuses on implementing high-quality animation styles using Unity.

지난 2016년 출시된 ‘붕괴3’는 전 세계 개발자들에게 큰 놀라움을 선사했다. 경이적인 수준의 그래픽과 게임 완성도, 그리고 IP로서의 높은 가치를 선보이며 ‘중국’에 대한 편견을 보란 듯이 깨부쉈다. ‘붕괴학원2’에서 얼핏 비치던 가능성을 몇 년만에 현실로 뒤바꿨다.
Released in 2016, *Honkai Impact 3rd* surprised developers worldwide with its astonishing graphics, game completeness, and high value as an IP, breaking stereotypes about China. It transformed the possibilities glimpsed in *Houkai Gakuen 2* into reality after several years.

개발사인 미호요(miHoYo)는 유니티의 기능을 십분 활용했다. 진정한 ‘애니메이션 스타일’을 구현하기 위해 부족한 게 있다면, 독자적인 방식을 통해서라도 끝까지 구현해냈다. ‘붕괴3’는 그런 고집의 결정체였다.
The development studio miHoYo fully utilized Unity's capabilities to achieve a true "animation style." If something was lacking, they went all the way to implement it through original approaches. *Honkai Impact 3rd* became the embodiment of such persistence.

붕괴3는 다양한 특수 효과를 사용한다. 다이나믹 파티클(Dynamic Particles), 블룸(Bloom), 플레이너 리플렉션(Planer Reflection), 디스토션(Distortion) 등을 통해 수준급의 렌더링을 구현했다. 모바일 환경에서 리플렉션을 구현하기 위해 옵셔널 블러 패스(Optional blur pass)를 사용했으며, 금속 재질의 바닥에 매트한 느낌을 주기 위해 메탈 브러쉬(Metal brush)를 디스토션시켰다. 이후 스펙큘러 스케치 마스크(Specular sketch Mask)를 사용해 전체적인 리플렉션을 상승시켰다. 바닥이 없을 경우 프레스널(Fresnal)을 사용했으며, 전체 해상도를 1/3 이하로 가져갔다. 결과적으로 블러(Blur)가 되기 때문에 충분한 값이다.
*Honkai Impact 3rd* employs various special effects, including Dynamic Particles, Bloom, Planer Reflection, and Distortion, to achieve top-notch rendering. To implement reflections in the mobile environment, they used the Optional Blur Pass, and to give a matte feeling to the floor with metallic material, they distorted it with a Metal Brush. Then, they used the Specular Sketch Mask to enhance overall reflections. In cases where there was no floor, they used Fresnel and reduced the resolution to less than 1/3. The result is sufficient due to the applied blur.

풀스크린 디스토션(Full Screen Distortion)은 회전 칼날 등 씬 이펙트(Scene effect)에서 사용된다. 세 개의 채널로 두 개는 오프셋(Off-Set)으로, 나머지 하나는 뎁스 인텐시티(Depth Intensity)에 사용했다. 전체적인 효과는 포스트 프로세싱(Post-Processing)으로 적용했으며, 결과적으로 개별 적용보다 빠른 모습을 보여줬다. 모바일에서는 이런 트레이드 오프(Trade-off)도 감수할 만하다.
Full Screen Distortion is used in scene effects such as rotating blades. Two of the three channels are used for offset, and the remaining one is used for depth intensity. The overall effect is applied through post-processing, demonstrating a faster performance compared to individual application. Such trade-offs are acceptable on mobile devices.

아울러 블룸을 통해 영화 같은 조정이 가능하다. 여기에 신데시스(Synthesis)를 이용하면 효과적인 스페셜 이펙트를 만들 수 있다.
Additionally, Bloom allows for cinematic adjustments, and combined with Synthesis, it can create effective special effects.

날씨와 구름은 다양한 컨피겨레이션(Configuration)을 추구했다. 컬러맵(Color Map)을 사용하면 과하기 때문에 멀티 레이어로 쉐이딩(Shading)을 진행했다. 이를 통해 시간, 날씨에 따라 각기 쉐이딩을 구현할 수 있었다. 결과적으로 산 같은 모양의 구름, 천둥 번개 구름 등 다양한 환경을 조성하는 데 성공했다. 백그라운드와 컬러에는 키프레이 데피니션(KeyFrame Definition)을 사용해 시간에 따라 달라지는 색상을 표현했다.
Weather and clouds were pursued through various configurations. Shading was done with multiple layers instead of using a color map to avoid excessive use. This allowed implementing different shadings based on time and weather conditions, resulting in diverse environments like mountain-shaped clouds, thunderstorm clouds, and more. KeyFrame Definition was used for backgrounds and colors to represent changing colors over time.

대기가 변화되는 걸 표현하기 위해 포그(Fog), 스카이박스(Skybox) 등을 활용했다. 씬 포그는 패러미터가 다양한데, 색상 및 거리 등을 적용할 수 있다. 스카이박스 역시 쉐도우, 구름 색상 등을 조절할 수 있기 때문에 두 기능을 활용해 화창함, 밤, 낮 등 다양한 환경을 구현할 수 있다. 아울러 캐릭터 쉐이딩 역시 이 부분에 영향을 받게 되며, 로컬 쉐이딩도 라이팅 볼륨에서 결정된다.
To depict atmospheric changes, Fog and Skybox were utilized. Scene Fog has various parameters, allowing application of colors and distance. Skybox, which can adjust shadows, cloud colors, etc., enables the implementation of various environments such as sunny, night, and day. Character shading is also influenced by these aspects, and local shading is determined by the lighting volume.

배경의 입체적 표현을 위해 뎁스 오브 필드(Depth of Field)를 사용했다. 백그라운드 레이어가 별도의 카메라를 사용하게 하여 조율했으며, 최고의 비주얼을 위해 헥사곤 게더 패턴(Hexagon gather pattern)을 사용했다. 아울러 루미넌스(Luminance)는 2 정도로 적용했고, 전체 퍼포먼스를 안정시키기 위해 다이내믹 레졸루션(Dynamic Resolution)을 블러 사이즈에 맞춰서 적용했다. 그리고 블러 간의 관계를 정의하기 위해 트랜지션 커브(Transition Curve) 역시 사용했다.
Depth of Field was used for the background's three-dimensional representation. Background layers were adjusted using a separate camera, and Hexagon Gather Pattern was used for the best visual quality. Luminance was applied at around 2, and Dynamic Resolution was applied to match the blur size to stabilize overall performance. Additionally, Transition Curve was used to define relationships between blurs.

전투 중 효과적인 클라이막스 연출을 위해 적용된 불릿 타임 이펙트(Bullet-time effect)는 타임 스케일(Time Scale)을 활용한 결과물이다. 타임 스케일에 맞춰 물방울이 4개의 모양으로 변화하며, 애니메이션 커브(Animation Curve) 기능을 활용해 시간이 느려질수록 물방울이 수직으로 늘어지도록 만들었다.
Bullet-time effect, applied for effective climax scenes during battles, is the result of utilizing Time Scale. Water droplets change into four shapes according to the time scale, and Animation Curve was used to make the droplets stretch vertically as time slows down.

미호요는 중국 내 유명 서브컬처 플랫폼 빌리빌리(bilibili)에 붕괴3 IP를 활용한 다양한 영상을 게재한 바 있다. 해당 동영상에는 미호요의 기술력이 집약되어있으며, 현재 3억 회 이상의 시청횟수를 기록하는 등 높은 인기를 얻고 있다.
miHoYo has utilized the *Honkai Impact 3rd* IP on the famous Chinese subculture platform Bilibili, releasing various videos. These videos showcase miHoYo's technical prowess and have gained high popularity with over 300 million views.

미호요는 아니메(Anime) 스타일 동영상을 제작하기에 앞서 완벽한 캐릭터 쉐이딩을 목표로 잡았다. 에어리얼 라이팅에 적절하게 반응하는 것이 필수였으며, 이를 위해 멀티 램프(Multi Ramp)를 사용했다. 옷감 등에는 멀티 채널 램프를 사용했으며, 눈과 헤어스타일에는 애니소트로픽 매테리얼(Anisotropic material)을 적용했다.
In the production of anime-style videos, miHoYo aimed for perfect character shading. It was essential to appropriately respond to aerial lighting, and for this purpose, Multi Ramp was used. Multi-channel ramps were applied to clothing, and anisotropic materials were used for eyes and hairstyles.

멀티 채널 2D 램프는 셀 쉐이딩(Cel Shading)과 유사한 효과를 내기 위해 다양한 색상을 디퓨징(Diffusing)해서 적용했다. 일반적인 디퓨징은 쉐도우가 지저분해 보이기 때문에 아니메 스타일 그래픽에 적용하기엔 어려움이 있다. 이 난점을 해결하기 위해 3개 레이어를 사용해 미세하게 보이도록 했으며, 레이어가 중첩되면서 표현이 한층 풍부해졌다.
To achieve a cel shading-like effect, the multi-channel 2D lamp applied various colors through diffusing. Standard diffusing can make shadows look messy, making it difficult to apply to anime-style graphics. To overcome this challenge, three layers were used to achieve a subtle appearance, and the overlapping layers enriched the representation.

멀티 램프를 이용해 쉐이딩을 할 때 브러쉬 텍스처 패턴을 활용해 다양한 결과를 만들어낼 수 있다. 다수의 브러쉬 패턴을 저장해 여러 가지를 같이 사용하면 손으로 그린듯한 효과를 낼 수 있다.
Using multi-lamps for shading allows for creating diverse results by utilizing brush texture patterns. Storing multiple brush patterns and using them together can create a hand-drawn effect.

고품질의 림 라이트(Rim light)를 얻기 위해 림리스(Rim less), 스무드리스(Smoothless)한 표현을 활용했다. 글로벌 파라미터 외에도 부분적인 버라이어티를 강화했으며, 큐브맵을 사용해 림 라이트 색상을 특정할 수 있었다. 아울러 AO 텍스처와 쉐도우를 사용해 오클루젼(Occlusion)을 가렸다.
For obtaining high-quality rim light, rimless and smoothless expressions were utilized. Besides global parameters, partial varieties were strengthened, and rim light color was specified using cube maps. Additionally, occlusion was concealed using AO texture and shadows.

아니메 스타일에는 그림자가 별로 없다. 기본적으로 단일 버텍스(Vertex) 컬러를 사용한다. 캐릭터 쉐도잉을 위해 유니티에 내장된 PCSS를 활용했지만, 완벽한 결과가 나오진 않았다. 거리에 상관없이 일정한 뷰 베이스 쉐도우맵(View-based shadow map)을 사용했고, 내추럴 트랜지션(Natural Transition)을 줄이기 위해 PCSS를 다시 활용했다.
Anime-style graphics usually have few shadows and use single vertex colors by default. Unity's built-in PCSS was used for character shading, but the results were not perfect. A constant view-based shadow map was used regardless of distance, and PCSS was re-utilized to reduce natural transitions.

눈 부분은 물리 굴절을 활용했다. 빛의 방향 등에 따라 리프렉티브 인덱스(Refractive Index)가 달라지는데, 이 부분을 고려하지 않으면 눈이 예쁘게 만들어지질 않는다. 물결, 코스틱 이펙트(Caustic effect)도 고려했다. 기존에 생성된 쉐이드를 활용했고, 빛의 변경(edge)을 드러낼 수 있도록 만들었다.
The eye part used physical refraction. The refractive index changes depending on the direction of light, and without considering this aspect, the eyes wouldn't look beautiful. Ripple and caustic effects were also considered. Existing shades were used, and they were made to reveal changes in light.

헤어는 하이라이트가 동적으로 구현되는 걸 목표로 삼았다. 위지위그(WYSIWYG) 컬러를 사용했고, 멀티 램프 역시 적용했다. 특별한 하이라이트를 위해 로우 프리퀀시(Low-frequency), 러프니스(Roughness)와 AO 텍스처를 적용했다. 애니소트로픽 하이라이트를 위해 플로우맵을 사용, 디렉션과 형태에 따라 하이라이트를 구현했다. 여기에 지터(Jitter) 맵을 사용해 디스토션을 추가로 만들었다. 이를 통해 스트립(Strip)의 두께를 제어할 수 있었다.
For hair, dynamic implementation of highlights was the goal. WYSIWYG colors were used, and multi-lamps were also applied. Low-frequency, roughness, and AO textures were used for special highlights. Flow maps were used for anisotropic highlights, and highlights were implemented based on direction and form. Jitter maps were used to add distortion, enabling control of strip thickness.

다만, 빛과 카메라의 위치에 따라 쉐이핑이 달라지는 문제가 있었다. 아울러 패턴 표현에도 한계가 있었기 때문에 새로운 방식을 개발해 적용했다. 우선 수직 방향으로 헤어 UV를 전부 분해했으며, 0부터 1까지 몇몇 커브와 베이스 쉐이핑을 구현하기 위해 지터 노이즈를 사용해 두께를 조절했다. 지터 스케일 등의 파라미터를 조절하면서 다양한 쉐이핑을 구현하는 데 성공했다.
However, there was a problem with shaping depending on the position of light and the camera. Moreover, there were limitations in pattern representation, so a new approach was developed and applied. First, the hair UV was completely decomposed in the vertical direction, and jitter noise was used to adjust thickness for implementing several curves and base shaping from 0 to 1. By adjusting parameters like jitter scale, various shapings were successfully achieved.

아웃라인 자체는 버텍스 노말(Vertex Normal)을 필요로 했고, 추가적으로 버텍스 컬러를 사용해 선의 두께를 제어했다. 카메라와 오브젝트의 사이의 거리도 감안할 필요가 있다.
The outline itself required vertex normals and additionally used vertex colors to control line thickness. The distance between the camera and the object also needed to be considered.

하지만 백 페이스는 애매한 엣지가 자주 등장한다는 단점이 있었다. 이에 지오메트리로 직접 드로잉을 했으며, 프리프로세싱(preprocessing)에서 크리즈 엣지(Crease-edge)를 잡을 수 있었다.
However, there was a drawback of ambiguous backfaces frequently appearing. To address this, direct drawing was done with geometry, and crease edges were detected in preprocessing.

또 다른 접근법으로는 이미지 스페이스(Image space)가 있다. 거의 대부분의 아웃라인을 커버할 수 있으며, 복잡함과 상관없이 퍼포먼스가 꾸준히 나온다는 장점이 있다. 다만, 선의 두께를 변경하는 것이 조금 어렵기 때문에 독립성을 얻기 위해선 씬 아웃라인 렌더링을 거쳐야한다.
Another approach is the image space. It can cover almost all outlines and consistently maintains performance regardless of complexity. However, changing line thickness can be a bit challenging, so for independence, scene outline rendering is required.

관절 부분은 유니티의 휴먼 스켈레톤(human skeleton)을 사용하면 이상한 결과가 나올 때가 있기 때문에 모델링 툴을 활용해 직접 블렌딩했다. 두 개의 관절에 각각 90도, 140도에 해당되는 블렌드 쉐이프(Blendshape)를 적용했으며, 조인트 코렉션(Joint correction)을 사용해 추가적인 효과를 보기도 했다.
For joint parts, using Unity's human skeleton sometimes resulted in strange outcomes, so direct blending was performed using modeling tools. Two blend shapes corresponding to 90 and 140 degrees were applied to two joints, and joint correction was used to see additional effects.

향후 미호요는 씬 렌더링을 위해 PBR 매터리얼과 결합된 브러쉬 모듈레이션(brush modulation)을 선보일 예정이며, '붕괴3'를 비롯한 게임에 대한 최적화 작업 역시 진행할 계획이다.
In the future, miHoYo plans to introduce PBR materials combined with brush modulation for scene rendering and also work on optimizing games, including *Honkai Impact 3rd*.