---
title: 【Unite Tokyo 2018】『崩壊3rd』開発者が語るアニメ風レンダリングの極意
tags:  #unite #unitetokyo #unitetokyo2018 #unite3d  
author: [Unity Technologies Japan](https://www.docswell.com/user/UnityJapan)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/V87DN4DWJG.jpg?width=480
description: ※本資料は一部スライドを調整しています。 講演者：Jack He(miHoYo Technology Co., LTD)   こんな人におすすめ  ・プログラマー  ・テクニカルアーティスト  ・アニメ風レンダリングに興味をお持ちの方   受講者が得られる知見  ・様々なアニメ風レンダリングの手法
published: June 05, 18
canonical: https://www.docswell.com/s/UnityJapan/KWLQP5-unite-tokyo-20183rd
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/V87DN4DWJG.jpg)

Jack He
Technical Director
miHoYo Technology Co., LTD


# Page. 2

![Page Image](https://bcdn.docswell.com/page/4VJP5MXXJ8.jpg)

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


# Page. 3

![Page Image](https://bcdn.docswell.com/page/L2EVP9L3EQ.jpg)

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


# Page. 4

![Page Image](https://bcdn.docswell.com/page/Z57GPZXY7L.jpg)

Advanced Rendering for mobile
Bloom
Dynamic Particles
Distortion
Planer Reflection


# Page. 5

![Page Image](https://bcdn.docswell.com/page/V4EQ2L86JP.jpg)



# Page. 6

![Page Image](https://bcdn.docswell.com/page/DKJ4LD2MJ1.jpg)

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


# Page. 7

![Page Image](https://bcdn.docswell.com/page/PLE1LZMYEG.jpg)

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


# Page. 8

![Page Image](https://bcdn.docswell.com/page/8GEWV931J2.jpg)

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


# Page. 9

![Page Image](https://bcdn.docswell.com/page/W47Z49VXJ3.jpg)

Synthesis
Reflection
Bloom
+
Scene Combined
Scene
+
Distortion
Final Scene


# Page. 10

![Page Image](https://bcdn.docswell.com/page/KYJ63K5PJV.jpg)

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


# Page. 11

![Page Image](https://bcdn.docswell.com/page/5GJ5LPYP74.jpg)

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


# Page. 12

![Page Image](https://bcdn.docswell.com/page/4LE3L35675.jpg)

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


# Page. 13

![Page Image](https://bcdn.docswell.com/page/V8EDN4DM7G.jpg)



# Page. 14

![Page Image](https://bcdn.docswell.com/page/4V7P5MXQ78.jpg)



# Page. 15

![Page Image](https://bcdn.docswell.com/page/L2JVP9LPJQ.jpg)



# Page. 16

![Page Image](https://bcdn.docswell.com/page/Z5EGPZXQEL.jpg)

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


# Page. 17

![Page Image](https://bcdn.docswell.com/page/V4JQ2L8W7P.jpg)

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


# Page. 18

![Page Image](https://bcdn.docswell.com/page/DK74LD2171.jpg)

Depth of Field


# Page. 19

![Page Image](https://bcdn.docswell.com/page/PLJ1LZM5JG.jpg)

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


# Page. 20

![Page Image](https://bcdn.docswell.com/page/8GJWV93W72.jpg)

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


# Page. 21

![Page Image](https://bcdn.docswell.com/page/W4EZ49V273.jpg)

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


# Page. 22

![Page Image](https://bcdn.docswell.com/page/KY763KY67V.jpg)

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


# Page. 23

![Page Image](https://bcdn.docswell.com/page/5G75LPG5E4.jpg)

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


# Page. 24

![Page Image](https://bcdn.docswell.com/page/V9J2L6YG7R.jpg)

1 Layer
2 Layers
3 Layers
Final


# Page. 25

![Page Image](https://bcdn.docswell.com/page/5DEYQ9GG7M.jpg)

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


# Page. 26

![Page Image](https://bcdn.docswell.com/page/2VJNKLG8J8.jpg)

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


# Page. 27

![Page Image](https://bcdn.docswell.com/page/GYE9V4WXJ3.jpg)

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


# Page. 28

![Page Image](https://bcdn.docswell.com/page/5GE8PQN9ED.jpg)

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


# Page. 29

![Page Image](https://bcdn.docswell.com/page/MLEL1XPMER.jpg)

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


# Page. 30

![Page Image](https://bcdn.docswell.com/page/54JMWL46EW.jpg)

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


# Page. 31

![Page Image](https://bcdn.docswell.com/page/ZPJRYKWNE9.jpg)

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


# Page. 32

![Page Image](https://bcdn.docswell.com/page/NPEXGLP87X.jpg)

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


# Page. 33

![Page Image](https://bcdn.docswell.com/page/63EK4LDL7D.jpg)

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


# Page. 34

![Page Image](https://bcdn.docswell.com/page/4L73L3R6J5.jpg)

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


# Page. 35

![Page Image](https://bcdn.docswell.com/page/V87DN4YMJG.jpg)

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


# Page. 36

![Page Image](https://bcdn.docswell.com/page/4VJP5M6QJ8.jpg)

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


# Page. 37

![Page Image](https://bcdn.docswell.com/page/L2EVP93PEQ.jpg)

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


# Page. 38

![Page Image](https://bcdn.docswell.com/page/Z57GPZ3Q7L.jpg)

Anisotropic material: silk


# Page. 39

![Page Image](https://bcdn.docswell.com/page/V4EQ2L5WJP.jpg)

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


# Page. 40

![Page Image](https://bcdn.docswell.com/page/DKJ4LD91J1.jpg)

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


# Page. 41

![Page Image](https://bcdn.docswell.com/page/PLE1LZK5EG.jpg)

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


# Page. 42

![Page Image](https://bcdn.docswell.com/page/8GEWV9DWJ2.jpg)

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


# Page. 43

![Page Image](https://bcdn.docswell.com/page/W47Z49G2J3.jpg)

Toon Shading FX


# Page. 44

![Page Image](https://bcdn.docswell.com/page/KYJ63KQ6JV.jpg)



# Page. 45

![Page Image](https://bcdn.docswell.com/page/5GJ5LPR574.jpg)

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


# Page. 46

![Page Image](https://bcdn.docswell.com/page/V9E2L6DGJR.jpg)

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


# Page. 47

![Page Image](https://bcdn.docswell.com/page/5D7YQ92GJM.jpg)

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


# Page. 48

![Page Image](https://bcdn.docswell.com/page/2VENKL88E8.jpg)

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


# Page. 49

![Page Image](https://bcdn.docswell.com/page/GY79V4KXE3.jpg)

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


# Page. 50

![Page Image](https://bcdn.docswell.com/page/5G78PQR97D.jpg)



# Page. 51

![Page Image](https://bcdn.docswell.com/page/ML7L1XKM7R.jpg)

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


# Page. 52

![Page Image](https://bcdn.docswell.com/page/54EMWL267W.jpg)

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


# Page. 53

![Page Image](https://bcdn.docswell.com/page/ZPERYKMN79.jpg)



# Page. 54

![Page Image](https://bcdn.docswell.com/page/NP7XGLV8JX.jpg)



# Page. 55

![Page Image](https://bcdn.docswell.com/page/637K4LQLJD.jpg)

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


# Page. 56

![Page Image](https://bcdn.docswell.com/page/4LJ3L3P6E5.jpg)

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


# Page. 57

![Page Image](https://bcdn.docswell.com/page/V8JDN4LMEG.jpg)

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


# Page. 58

![Page Image](https://bcdn.docswell.com/page/4VEP5M2QE8.jpg)

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


# Page. 59

![Page Image](https://bcdn.docswell.com/page/L27VP9DP7Q.jpg)

Thank you!