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

32.3K Views

June 05, 18

スライド概要

※本資料は一部スライドを調整しています。
講演者:Jack He(miHoYo Technology Co., LTD)

こんな人におすすめ
・プログラマー
・テクニカルアーティスト
・アニメ風レンダリングに興味をお持ちの方

受講者が得られる知見
・様々なアニメ風レンダリングの手法

profile-image

リアルタイム3Dコンテンツを制作・運用するための世界的にリードするプラットフォームである「Unity」の日本国内における販売、サポート、コミュニティ活動、研究開発、教育支援を行っています。ゲーム開発者からアーティスト、建築家、自動車デザイナー、映画製作者など、さまざまなクリエイターがUnityを使い想像力を発揮しています。

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

Jack He Technical Director miHoYo Technology Co., LTD

2.

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

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.

Advanced Rendering for mobile Bloom Dynamic Particles Distortion Planer Reflection

6.

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

7.

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

8.

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

9.

Synthesis Reflection Bloom + Scene Combined Scene + Distortion Final Scene

10.

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

11.

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

12.

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

16.

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

17.

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

18.

Depth of Field

19.

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

20.

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

21.

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

22.

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

23.

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

24.

1 Layer 2 Layers 3 Layers Final

25.

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

26.

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

27.

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

28.

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

29.

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

30.

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

31.

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

32.

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

33.

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

34.

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

35.

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

36.

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

37.

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

38.

Anisotropic material: silk

39.

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

40.

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

41.

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

42.

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

43.

Toon Shading FX

45.

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

46.

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

47.

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

48.

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

49.

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

51.

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

52.

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

55.

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

56.

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

57.

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

58.

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

59.

Thank you!