Houkai 3rd Unite 2018 Tech Demo

Houkai 3rd Unite 2018 Tech Demo are hosted on both Tokyo and Beijing but only Unite Tokyo 2018 does have video.

Due to space limitations, the text version of this speech will be divided into two parts.

https://connect.unity.com/p/unite-2018-beng-pi-3-zai-unityzhong-shi-xian-gao-pin-zhi-de-qia-tong-xuan-ran-xia

## Part 1

Hello everyone, welcome to Unite 2018 to participate in our speech. Simply introduce yourself, my name is He Jia, and I am currently the technical director at miHoYo. My team and I focused on real-time rendering in PBR and NPR, as well as process animation and interactive physics for animated CG and games. Currently, part of our work is to use Unity to achieve high quality cartoon rendering.

The theme of this presentation is "Achieving high quality Anime style rendering on Unity". The implementation of these methods is optimized for each platform's features, from mobile to high-performance PCs.

Let us briefly introduce the main aspects involved in this speech. First, we will introduce some rendering features related to "Houkai 3rd" on the mobile side. Then we will talk about some of the techniques used in animated style CG rendering, such as: illustrator-style character rendering, rendering of special materials, rendering of special effects, and post-processing with cartoon rendering. The last part is about some miscellaneous and some prospects for future contents.

First, let's take a look at some of the rendering features used in the "Houkai 3rd" scene.

As you can see from the image below, a lot of special effects are used in the scene to improve performance. For example: Bloom post-processing effects, Dynamic Particles, Planar Reflections, Screen Distortion effects, etc. Below we will analyze each of these effects one by one.

These dynamic effects are shown below:

Let's take a look at how to achieve high quality reflections.

High-quality reflection on the mobile side, Planar Reflection is a better way to combine the effects and performance factors. The usual practice is to use the ground as a plane of symmetry. After placing the camera in a symmetrical position, the scene is rendered to reflect the result.

In order to express the metallic texture of the ground, we first apply the hexagonal sampling blur to the reflection result, and then use the metal normal map to add distortion to the reflection result. In addition, we also use the specular mask and Fresnel reflection. To further enhance the reflective texture. On some secondary reflective surfaces that are far from the ground or non-horizontal, Planar Reflection is not applicable, for which we use ambient map reflection as an alternative.

In order to minimize the overhead of rendering the reflection scene, we limit the reflection resolution to 1/3 or less. Since the reflection texture will be blurred, even if the resolution is reduced, the difference is not obvious, and we use simplified version of the material that is also used during the rendering of the reflection, some small objects that are not important are ignored.

Let's take a look at another effect: Full screen distortion effect

We used screen distortion effects in "Houkai 3", such as the trailing effect of weapons, spacetime effect, waterfall and other scene effects.

In the process of rendering distortion effect, we use 3 channels to store the distorted rendering results, 2 for storing the UV offset, and the other for storing the distortion strength Mask, which is used to perform depth clipping and distance-based Strength control.

Using a separate Pass to render the distortion results to the framebuffer texture is more expensive for the mobile platform, so we integrated the distortion effect in the final post-processing, which is much faster than the former. However, this method may also cause the problem that the front object is mixed into the back twisted material because there is no layering treatment, but considering the performance limitations of the mobile platform, this compromise is worthwhile relative to the overall effect.