【Unite Tokyo 2018】『崩壊3rd』開発者が語るアニメ風レンダリングの極意

Jack He Technical Director miHoYo Technology Co., LTD

From mobile to high-end PC Achieving high quality Anime style rendering on Unity

Main Topic • Advanced rendering features for mobile • Special effects & PostFX for mobile • Illustration style character shading • Anime style Shading FX • Stylized Scene & Lighting • Miscellaneous stuff and future works

Advanced Rendering for mobile Bloom Dynamic Particles Distortion Planer Reflection

High quality reflection • Rendered at 1/3 or lower resolution • Optional blur pass • Fresnel reflection • Metal brush distortion • Specular sketch Mask Specular mask Metal brush Material Panel

Full screen distortion • Applied with post processing • Depth clipping Mask • Distance based intensity Distortion Offset Depth Intensity Mask

Bloom 1/8 size 1/4 size 1/16 size 1/32 size Bloom. + Original image Extracted Layer Composed

Synthesis Reflection Bloom + Scene Combined Scene + Distortion Final Scene

Weather & Cloud • Various Weather • 24 hour dynamic lighting • Custom Clouds Config

Cloud shading • Multi-channel Layered shading • 8 Cloud template Cloud Color Scheme Cloud Texture (RGBA) R:Shadow Layer1 G:Shadow Layer2 noon afternoon dusk night B:Rim Layer

Cloud Landscape editor • Billboard particles • Custom Cloud type • KeyFrame Definition • Time of day editor Scene Window Weather editor panel

Weather System • Refined atomsphere Fog control • Skybox color configuration • Character Lighting Volume Fog Configuration Panel

Layered Depth of Field Bokeh Intensity • Hexagon gather pattern • Dynamic Res based on blur size • Bokeh Intensity & Rotation Enhance Bokeh by luminance 0.5 1.5 DOF Panel 2.5

Depth of Field

Slow-motion raindrop effect • Time scale slow motion • 4 shapes for different time scale • Stretched on speed • Shape from Speed Curve mapping Rain drop at different Speed Rain drop Control

Anime style CG rendering REPLACE VIDEO HERE www.bilibili.com/video/av14260225/

Anime style CG rendering REPLACE VIDEO HERE www.bilibili.com/video/av7244731

Character shading • Multi ramp shading with Brush style • Anisotropic material, refraction & blur • Main Light, IBL, Rim light • PCSS soft shadows • High quality outline

Multi-Channel 2D Ramp • Multi-channel shading for precise color control • For both diffuse & highlight Diffuse ramp • Specular ramp Fast Intuitive feedback Diffuse Panel Specular Panel

1 Layer 2 Layers 3 Layers Final

Multi-Channel Ramp Hard 2D Diffuse ramp Soft Ramp mask applied

Facial shading tweak • Reduce diffuse shading Shadow • Vertex color Mask control diffuse intensity With vertex color Without vertex color

High quality character shadow • View dependent Shadow map • Use PCSS for soft-shadow • Support Transparent object

Eye Refraction • Texture UV offset based on View dir • Refraction ON Refraction OFF

Light caustic • • Use inverse diffuse calculation to fake lighting Use Fresnel simulates intensity change Caustic ON Caustic OFF Caustic mask texture

主要内容 次世代卡通角色渲染 全局光照，体积光，面积光源 特殊材质的实现及高级反射材质 卡通渲染后处理技术

Hair Shading • WYSIWYG color adjustment • Anisotropic lighting using Tangent • Multi-layer Specular shading • Roughness, Flow and AO map

Anisotropic highlight • light calculation in tangent direction • Low + high frequency specular component Material Preview

Generate strip pattern • Use Jitter map to get random pattern + =

主要内容 • 次世代卡通角色渲染 • 全局光照，体积光，面积光源 Diffuse only • 特殊材质的实现及高级反射材质 • 卡通渲染后处理技术 +HighFreq Specular +LowFreq Specular Combined

Anisotropic Cel-shading Hair • Move along strand direction • Intact strip pattern on edges • Shape variation towards hair tip • Material outline color

Stylized anisotropic • UV direction gradient for each hair strand • Intact strip pattern on edges • Jitter noise on highlight strips • Various parameter Strip Mapping channel Jitter noise Strip pattern define Material Panel

Anisotropic material: silk • light calculation in Bitangent direction Material Parameter Only diffuse +1 layer highlight +2 layer highlight +3 layer highlight

Anisotropic material: silk

Refraction & blur • Command Buffer • Double side material • Blur optimization

geometry based Outline • Continuous vertex normal required • Vertex color controls outline width • perspective corrected line width

Enhanced geometry based outline • Preprocessing detecting crease edge • Used together with backface method

Image space outline • normal & depth detection • Constant performance • Suitable for scene rendering • Camera based width tweak • HVS tweak

Toon Shading FX

Volume light • Procedural light volume control • 3D Noise texture fog • Cookie map defined projection pattern • Blue Noise Dither + TAA

Dynamic real-time GI • Enlighten real-time GI • video as emission source • Avpro Video for decoding • Update GICache • Dynamic volume spot light

Anime style AO • Based on HBAO • HVS color shift off on

Image Space Glare • Lens glare • Star streak • Multiple pass convolution • Color modulation

主要内容 Scene Rendering 全局光照，体积光，面积光源 次世代卡通角色渲染 特殊材质的实现及高级反射材质 卡通渲染后处理技术

Rendering Features Screen Space Reflection Tessellation Image Space outline Stylized PBR material Anime style AO

Stylized Material • PBR based • Harmonized Color • Exaggerate or remove details • Outline on edges albedo normal Roughness Heightmap

Facial expression • Use blend shape for facial morph • Separate expression set of eye, brow, mouth • facial expression helper for animation mapping normal calm smile laugh astonishing sad facial expression helper

Character Joint Fix • Using blendshape interpolate between angles • Could also use additional bones Morph helper With Joint Fix Without Joint Fix

Fluid and destruction • Alembic format • Vertex animation texture (EXR) Soft Body Export Rigid Body Export

Future Works • Fully customizable stylized shading for all materials • PBR material combined with brush modulation for scene rendering • Subdivision for highly detailed model • Further performance optimization For games

Thank you!