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

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

1. 1. Jack He Technical Director miHoYo Technology Co., LTD
2. 2. From mobile to high-end PC Achieving high quality Anime style rendering on Unity
3. 3. 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
4. 4. Distortion Advanced Rendering for mobile Bloom Dynamic Particles Planer Reflection
5. 5. 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
6. 6. Full screen distortion • Applied with post processing • Depth clipping Mask • Distance based intensity Depth Intensity MaskDistortion Offset
7. 7. Bloom Bloom. + Extracted Layer Original image Composed 1/4 size 1/8 size 1/16 size 1/32 size
8. 8. Synthesis + + Reflection Scene Scene Combined Distortion Bloom Final Scene
9. 9. Weather & Cloud • Various Weather • 24 hour dynamic lighting • Custom Clouds Config
10. 10. Cloud shading • Multi-channel Layered shading • 8 Cloud template Cloud Texture (RGBA) noon afternoon dusk night R:Shadow Layer1 G:Shadow Layer2 B:Rim Layer Cloud Color Scheme
11. 11. Cloud Landscape editor • Billboard particles • Custom Cloud type • KeyFrame Definition • Time of day editor Weather editor panelScene Window
12. 12. Weather System • Refined atomsphere Fog control • Skybox color configuration • Character Lighting Volume Fog Configuration Panel
13. 13. Layered Depth of Field • Hexagon gather pattern • Dynamic Res based on blur size • Bokeh Intensity & Rotation Bokeh Intensity 0.5 1.5 2.5 DOF Panel Enhance Bokeh by luminance
14. 14. Depth of Field
15. 15. 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
16. 16. Anime style CG rendering www.bilibili.com/video/av14260225/
17. 17. Anime style CG rendering www.bilibili.com/video/av7244731 REPLACE VIDEO HERE
18. 18. Character shading • Multi ramp shading with Brush style • Anisotropic material, refraction & blur • Main Light, IBL, Rim light • PCSS soft shadows • High quality outline
19. 19. Multi-Channel 2D Ramp • Multi-channel shading for precise color control • For both diffuse & highlight • Fast Intuitive feedback Diffuse ramp Specular ramp Diffuse Panel Specular Panel
20. 20. 1 Layer 2 Layers 3 Layers Final
21. 21. Multi-Channel Ramp Soft Hard Ramp mask applied 2D Diffuse ramp
22. 22. Enhanced with Brush • N dot L modulated by brush texture for diffuse • RGBA Channel for multiple brush pattern Brush pattern A No Brush Brush applied Brush pattern B
23. 23. Illustration style shading
24. 24. High quality rim light • From Directional light or IBL (Cube-map) • Using Fresnel masked with brush • AO and shadow occlusion Rim-light offRim-light on
25. 25. Facial shading tweak • Reduce diffuse shading Shadow • Vertex color Mask control diffuse intensity With vertex color Without vertex color
26. 26. • View dependent Shadow map • Use PCSS for soft-shadow • Support Transparent object High quality character shadow
27. 27. Eye Refraction • Texture UV offset based on View dir • Refraction ON Refraction OFF
28. 28. Light caustic • Use inverse diffuse calculation to fake lighting • Use Fresnel simulates intensity change Caustic ON Caustic OFF Caustic mask texture
29. 29. 次世代卡通角色渲染 全局光照，体积光，面积光源 特殊材质的实现及高级反射材质 卡通渲染后处理技术 主要内容
30. 30. Hair Shading • WYSIWYG color adjustment • Anisotropic lighting using Tangent • Multi-layer Specular shading • Roughness, Flow and AO map
31. 31. Anisotropic highlight • light calculation in tangent direction • Low + high frequency specular component Material Preview
32. 32. Generate strip pattern • Use Jitter map to get random pattern + =
33. 33. 主要内容 • 次世代卡通角色渲染 • 全局光照，体积光，面积光源 • 特殊材质的实现及高级反射材质 • 卡通渲染后处理技术 Diffuse only +LowFreq Specular +HighFreq Specular Combined
34. 34. Anisotropic Cel-shading Hair • Move along strand direction • Intact strip pattern on edges • Shape variation towards hair tip • Material outline color
35. 35. 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
36. 36. Anisotropic material: silk • light calculation in Bitangent direction Material Parameter Only diffuse +1 layer highlight +2 layer highlight +3 layer highlight
37. 37. Anisotropic material: silk
38. 38. Refraction & blur • Command Buffer • Double side material • Blur optimization
39. 39. geometry based Outline • Continuous vertex normal required • Vertex color controls outline width • perspective corrected line width
40. 40. Enhanced geometry based outline • Preprocessing detecting crease edge • Used together with backface method
41. 41. Image space outline • normal & depth detection • Constant performance • Suitable for scene rendering • Camera based width tweak • HVS tweak
42. 42. Toon Shading FX
43. 43. Volume light • Procedural light volume control • 3D Noise texture fog • Cookie map defined projection pattern • Blue Noise Dither + TAA
44. 44. Dynamic real-time GI • Enlighten real-time GI • video as emission source • Avpro Video for decoding • Update GICache • Dynamic volume spot light
45. 45. Anime style AO • Based on HBAO • HVS color shift off on
46. 46. • Lens glare • Star streak • Multiple pass convolution • Color modulation Image Space Glare
47. 47. 次世代卡通角色渲染 全局光照，体积光，面积光源 特殊材质的实现及高级反射材质 卡通渲染后处理技术 主要内容 Scene Rendering
48. 48. Tessellation Image Space outline Screen Space Reflection Anime style AO Rendering Features Stylized PBR material
49. 49. Stylized Material • PBR based • Harmonized Color • Exaggerate or remove details • Outline on edges albedo normal Roughness Heightmap
50. 50. 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
51. 51. Character Joint Fix • Using blendshape interpolate between angles • Could also use additional bones Morph helper With Joint Fix Without Joint Fix
52. 52. Fluid and destruction Rigid Body ExportSoft Body Export • Alembic format • Vertex animation texture (EXR)
53. 53. 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
54. 54. Thank you!