BlueRose/BlueRoseNote
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Init

Browse Source
This commit is contained in:
BlueRose
2023-06-29 11:55:02 +08:00
commit 36e95249b1
1236 changed files with 464197 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

324
03-UnrealEngine/卡通渲染相关资料/厚涂风格笔记/YusufUmar_kama分析.md Normal file
View File

@@ -0,0 +1,324 @@
---
title: YusufUmar_kama分析
date: 2022-08-15 13:31:52
excerpt:
tags: 卡通渲染
rating: ⭐⭐
---
- Skin
- Hair
- Cloth
- Glod
- Lotus
- LotusLeaf
- Water Surface
# 皮肤
根节点使用了Principed BSDF，GGX，RandomWalk（Fixed Radius）。Subsurface值为0.01（开启了SSS效果），其他为默认参数。
使用Ucupaint Skin连接Pin：
- Color
- Roughness
- Normal
## 要点：
1. 基底：皮肤颜色float3(0.846873,0.602632,0.512498)、Roughness 0.3、Metallic 0 。Subsurface：0.01
2. **皮肤哑光效果**使用Noise贴图并且使用ddx/ddy实现。
3. [[#yP Layer Fake Lighting（全身）]]效果，模拟出皮肤的SSS以及环境光照效果，增强厚涂皮肤的质感。
4. [[#yP Layer Red Skin （肩部区域与手指）]]效果，模拟皮肤的SSS效果，增强厚涂皮肤的质感。
5. [[#yP Layer Skin AO （皮肤上的AO效果）]]，模拟皮肤上的AO，
## 贴图
>项目使用了4K贴图，并且将4x4个贴图会在一起，并且通过平移UV与使用不同UV通道方式来切换。
- `~Ucupaint Skin Image Atlas` Face UV（0.25,0.75）贴图作为Alpha来赋予**脸部**Roughness（内部Overrider 0.5）。
- `~Ucupaint Skin Image Atlas` Face UV（0 00.5）腮红Mask
- `~Ucupaint Skin Image Atlas` Face UV（0.75,0.75）腮红斜杠Mask
- `~Ucupaint Skin Image Atlas` Face UV（0.25,0.75）嘴唇红Mask
- `~Ucupaint Skin Image Atlas2`UVMap UV（0.25,0）贴图作为Alpha来赋予**身体**Roughness（内部Overrider 0.6，Alpha * 0.75）。
- `~Ucupaint Skin Image Atlas2` UVMap UV（0.25,0.25）贴图作为Alpha来调整**身体水渍**Roughness（内部Overrider 0，Alpha）。
- `~Ucupaint Skin Image Atlas` UVMap UV (0,0.75) 是脸上的水渍贴图，用作**脸部水渍**高度、透明度、Roughness，最后计算出Color、Roughness、Normal。（内部BaseColor Overrider：0 Roughness Overrider：0.1，Alpha）。
## Group
### ~yPL Check Input Normal
- StartNormalFilter：因为最外部的Normal输入是float3(999,999,999)。所以输出的是float3(0.5,0.5,1.0)。
```hlsl
float3 StartNormalFilter(float3 InNormal)
{
float Ratio=InNormal.z > 250 ? 1 : 0;
return lerp(InNormal,float3(0.5,0.5,1.0),Ratio);
}
```
### ~yPL Tangent Process_Copy
通过UV来控制切线法线与次级法线。该节点需要对应的UV通道，Body模型里除了UVMap，有Face、Pupil、~TL Temp Paint UV。
- Face Tangent Process：2个参数输入都是1。
- Pupil Tangent Process：2个参数输入都是1。
- UVMap Tangent Process：2个参数输入都是1。
https://www.bilibili.com/video/BV1RD4y1d7c3?spm_id_from=333.337.search-card.all.click&vd_source=d47c0bb42f9c72fd7d74562185cee290
### ~yP Lyaer Noise
经过测试，好像没有区别
1. 使用Neighbor UV(将UVMap的Tangent、Bitangent转换到Face的切线空间)来获得东西南北4个偏移方向。传入Layer Noise Source，得到Source、东西南北5个Noise随机Height值。
2. 将Noise随机高度值从(0,1)->(-1,1)，之后与PrevHeight融合（这里不融合）
3. Height=Height/MaxHeight，之后将Height从(-1,1)->(0,1)
4. 使用ddx/ddy的方式计算出Face切线空间的Noise Bump Normal，再使用Tangent与Bitangent计算出世界法线。
#### ~yPL Neighbor UV (Other UV)
使用`~yPL World2Tangent`计算 2个新向量：
- FaceTangent->(UVMapTangent,UVMapBitangent)=x
- FaceBitangent->(UVMapTangent,UVMapBitangent)=y
之后乘以1/Width或1/Height之后偏移UV。
##### ~yPL World2Tangent
将一个世界空间向量转换到指定的切线空间中。~~将Face UV的次级法线与身体UV的切线法线与次级法线做点乘来取得新的向量。~~
```c++
float3 World2Tangent(float3 Bitangent,float3 UVMapTangent,float3 UVMapBitangent)
{
float x=dot(Bitangent,UVMapTangent);
float y=dot(Bitangent,UVMapBitangent);
float z=dot(Bitangent,float(0.5,0.5,1));
return float3(x,y,z);
}
```
https://zhuanlan.zhihu.com/p/447671623
#### ~yP Layer Noise Source
将坐标传入NoiseTexture取得噪点值，NoiseTexture的参数Scale5=>2000
- Source_group
- Source_n
- Source_s
- Source_e
- Source_w
#### ~yPL Height Process Smooth
使用`~yPL Height Process`计算Source、东西南北5个，之后使用`~yPL Pack ONSEW`将Source、N、S合成一个HeightONS，E、S合成ES；`~yPL Pack NSEW`将Source、N、S合成AlphaONS，E、S合成ES。
##### ~yPL Height Process
将Height (0~1)=>(-1,1)区间
- Height= (Value-0.5) * 2 * ValueMaxHeight;
- Alpha=Alpha * RemainingAlpha * Intensity;
- NormalAlpha=Alpha * Intensity;
#### ~yPL Height Mix Smooth
- 解包ONS、EW
- 计算lerp(Prev,Height,Alpha)
- 打包成ONS、EW
#### ~yPL Normal Process Smooth
- 解包ONS、ES
- Value=(Value /MaxHeight) * 0.5 +0.5;
- 调用`~yPL Fine Bump`
##### ~yPL Fine Bump
Tangent与Bitangent为Face UV通道的。
- Vector=float3( (w-e) * BumpHeight, (s-n) * BumpHeight, 1);
- Vector=Normalize(Vector);
- ~yPL Tangent2World(Vector,Tangent,Bitangent);
- return Vector;
###### ~yPL Tangent2World
将一个切线空间向量转换到指定的世界空间中。
https://zhuanlan.zhihu.com/p/447671623
## 贴图Roughness赋予Group
外部传入0.3，未调整区域会一直为0.3。
1. 使用`~yP Layer Face Roughness`使用Face UV（偏移0.25,0.75）通道采样`~Ucupaint Skin Image Atlas`贴图作为Alpha来调整脸部Roughness（内部Overrider 0.5）。
2. 使用`~yP Layer Face Roughness`使用UVMap UV（偏移0.25,0）通道采样`~Ucupaint Skin Image Atlas2`贴图作为Alpha来调整Roughness（内部Overrider 0.6，Alpha * 0.75）。
3. 使用`~yP Layer Face Roughness`使用UVMap UV（偏移0.25,0.25）通道采样`~Ucupaint Skin Image Atlas2`贴图作为Alpha来调整Roughness（内部Overrider 0，Alpha）。
### ~yP Layer Face Roughness（脸部Roughness）
- Overrider：0.5
最外层传入Roughness为0.3，Roughness使用`~Ucupaint Skin Image Atlas`贴图对0.3~0.5进行插值。
1. 使用偏移后Face 通道UV(Location 0.25 m 0.75 m 0,Scale 0.25 0.25 1)采样`~Ucupaint Skin Image Atlas`贴图，作为Alpha。
2. return Lerp( Roughness, 0.5, Alpha);
#### ~yPL Mod Override Color
使用Gamma调整OverriderColor颜色，Intensity是OverriderColor与原始颜色的插值。
### ~yP Layer Solid Color 8.001（身体Roughness）
- Overrider：0.6
1. 使用偏移后UVMap 通道UV(Location 0.25 m 0 0,Scale 0.25 0.25 1)采样`~Ucupaint Skin Image Atlas2`贴图，作为Alpha。
2. return Lerp( Roughness, 0.6f, Alpha * 0.75);
### ~yP Layer Solid Color 8（身体Roughness 水滴光滑效果）
- Overrider：0
1. 使用偏移后UVMap 通道UV(Location 0 0 0,Scale 0.25 0.25 1)采样`~Ucupaint Skin Image Atlas2`贴图，作为Alpha。
2. return Lerp( Roughness, 0, Alpha );
### ~yP Layer Solid Color 6.002（脸部Roughness 水滴处的Color、Roughness、Normal）
- BaseColor Overrider：0
- Roughness Overrider：0.1
该节点用于制作水渍效果，Color最终使用TransitionAO输出的结果;
1. 使用`~yPL Neighbor UV`计算东南西北方向的UV偏移值。
2. 使用Source与东南西北4个坐标偏移过坐标，在偏移(0,0.75)后，采样`~Ucupaint Skin Image Atlas`贴图。
#### ~yPL Transition AO_Copy
将InputRPG与AO Color(默认为0)进行混合。**增加水滴处的AO效果**
### ~yP Layer Solid Color.002（眼白白色）
将眼白区域从皮肤颜色设置成眼白的颜色。
### ~yP Layer Blush（腮红）
脸上的腮红效果。
1. 对float3(0.749082 0.025 1)执行Gamma0.455,作为绘制颜色。
2. 使用偏移后Face 通道UV(Location 0 0.5 0,Scale 0.25 0.25 1)采样`~Ucupaint Skin Image Atlas`贴图，作为Alpha。与外部传入颜色进行混合。
### ~yP Layer Solid Color 7（腮红上的红色斜杠）
1. 使用偏移后Face 通道UV(Location 0.75 0.75 0,Scale 0.25 0.25 1)采样`~Ucupaint Skin Image Atlas`贴图，作为Alpha。与外部传入颜色进行混合。
### ~yP Layer Lips（嘴唇 红色）
1. 使用偏移后Face 通道UV(Location 0.25 0.5 0,Scale 0.25 0.25 1)采样`~Ucupaint Skin Image Atlas`贴图，作为Alpha。与外部传入颜色进行混合。
### ~yP Layer Tongue（舌头 红色 以及法线调整）
这里使用了顶点色作为Mask。
1. 使用偏移后Face 通道UV(Location 0.25 0.5 0,Scale 0.25 0.25 1)采样`~Ucupaint Skin Image Atlas`贴图，作为Alpha。
### ~yP Layer Nose Blush（鼻尖处的红）
1. 使用偏移后Face 通道UV(Location 0.5 0.5 0,Scale 0.25 0.25 1)采样`~Ucupaint Skin Image Atlas`贴图，作为Alpha。
### ~yP Layer Solid Color 6（眼白上部的黑色阴影）
1. 使用偏移后Face 通道UV(Location 0.75 0.25 0,Scale 0.25 0.25 1)采样`~Ucupaint Skin Image Atlas`贴图，作为Alpha。
---
### ~yP Layer Pupil
虹膜底层（灰色），Roughness为0。
### ~yP Layer Solid Color 1.001
虹膜底色（红）
### ~yP Layer Solid Color 2
虹膜下部高光（粉色）
### ~yP Layer Solid Color 3
虹膜下部的自定义高光（白色）
### ~yP Layer Solid Color 4
虹膜底部高光（白色）
### ~yP Layer Solid Color.003
瞳孔（黑色）
---
### ~yP Layer Group
将之前计算身体、脸部细节与瞳孔合并到一起。
1. ~~将NormalHeight Group与NormalHeight Alpha Group（这2个Pin没有连接外部数据，默认都为0），解包Source与4方向 的用于计算法线的Height值以及Alpha。~~
2. 使用Mask Pupil顶点色作为Mask以及Alpha，将身体、脸部细节与瞳孔混的BaseColor、Metallic、Roughness、Normal合在一起。
3. 瞳孔区域的Metallic为0，Normal为0。Roughness为0。
### ~yP Layer Solid Color 1（眉毛）
1. 使用偏移后Face 通道UV(Location 0.25 0 0,Scale 0.25 0.25 1) Source以及东西南北4方向偏移过的UV，去采样`~Ucupaint Skin Image Atlas`与`~Ucupaint Skin Image Atlas 1`。实际上用的是`~Ucupaint Skin Image Atlas 1`mask。
2. 使用Extra Lines（耳朵里的一些线条Mask，为了让耳朵有立体感）作为Mask，以20%的占比与眉毛Mask合并到一起。
3. Color使用 float3(0.073) 与传入颜色混合；Roughness使用0.66与传入Roughess混合；Norma使用模型Normal与之前计算的Normal混合。
### ~yP Layer Fake Lighting（全身）
模拟出皮肤SSS以及环境光照效果。
1. 使用`~yPL Hemi_Copy.005`计算取得Ramp混合Alpha。
2. 传入ColorRamp节点，取得Color与Alpha，Color之后还会执行Gamma(0.454)。
3. 使用Head的顶点色做Mask，减淡50%。之后再对整个Alpha * 0.5。
4. 使用Alpha对传入颜色进行混合，最后输出。
#### ~yPL Hemi_Copy.005
1. 指定一个摄像机空间的法线向量 ViewNormal，转换到世界空间。与模型法线做点乘。
2. 将点乘结果(-1,1) -> (0,1)后输出，作为Ramp混合Alpha。
### ~yP Layer Red Skin （肩部区域与手指）
模拟出皮肤SSS的红润效果。
1. 使用偏移后UVMap 通道UV(Location 0.75 0.5 0,Scale 0.25 0.25 1)采样`~Ucupaint Skin Image Atlas`贴图，作为Alpha。
2. Alpha=Alpha * 0.25;
3. return lerp( Color,指定的红色,alpha);
### ~yP Layer Solid Color 6.004（耳朵）
耳朵加上些AO。
### ~yP Layer Skin AO （皮肤上的AO效果）
和[[#~yP Layer Fake Lighting（全身）]]一样：
1. 采用dot(ViewVector,Normal)传入ColorRamp，得到Color作为Alpa。
2. Alpha=Alpha * 0.75;
3. return lerp(Color,指定AO颜色,Alpha);
# 头发
与身体大致相同，但区别在于：
- Anisotropic：0=>1
- Tangent：连接Tangent节点（ForTangent UV通道）
- 连接Pin：
- Color
- Roughness
- ColorAlpha
## 要点：
- `~yP Layer Gradient.003`提亮批发部分亮度，提高层次感觉。
- `~yP Layer Solid Color.005`模拟出一个正面打光的AO阴影效果。
## Group
### ~yP Layer Solid Color 1.002
1. 使用顶点色（Mask VCol，除了眉毛处有点黑其他都是白色）作为Alpha2传入`~yPL Straight Over Mix`与外部传入的Color与ColorAlpha进行计算。()
2. 最终输出Color与ColorAlpha。
### ~yP Layer Gradient.003
对披下的长发区域进行梯度提亮。
1. 使用`~yP Modifiers Gradient`计算Color与Alpha之后与输入的Color进行混合。
### ~yP Layer Fake Lighting.001
模拟出一个头顶往下打光的灯光效果。
1. 使用dot(WorldNormal,指定世界坐标正面朝上的Vector)制作Alpha
2. 将Alpha传入ColorRamp取得Ramp值。
3. Color=Ramp * 0.1+Color;
#### ~yPL Hemi_Copy.002
1. 使用dot(WorldNormal,指定世界坐标正面向上的Vector)
2. 将点乘值 (-1,1)=>(0,1)
3. 进行**正反面**fix后输出。（反面不应该收到光照）
### ~yP Layer Solid Color.005
同`~yP Layer Fake Lighting.001`，模拟出一个正面打光的AO阴影效果。
# 衣服
- 次表面方法换成了Christensen-Burley（但依然没有开启次表面）
- 有意思的是开启了ClearCoat材质效果，让衣服有了一些变色的感觉
## 要点
1. `~yP Layer Solid Color 3.001` 叠加了一个从下往上的Ramp，让上部分的衣服显得更紫，更加不透一些。
2. `~yP Layer Solid Color 2.001` 实现出一种菲尼尔效果。
3. `~yP Layer Fake Lighting 1.001` AO贴图与Fake灯光混合。(应该只有AO效果)
4. `~yP Layer Fake Lighting 1`
## GroupNode
### yP Layer Solid Color 1.003_remove
用于设置2个袖口的颜色与Alpha 。
### ~yP Layer Solid Color.006
用于设置身前肚兜的颜色与Alpha。
1. Fake了一个从下往上打的灯光，并且设置了Ramp
2. 使用`~yPL Straight Over Mix`对外部传入的Color与Alpha进行混合。
### ~yP Layer Solid Color 3.001
叠加了一个从下往上的Ramp(根据UV)，让上部分的衣服显得更紫，更加不透一些。
### ~yP Layer Solid Color 4.001
对2个袖子的开头与结尾处叠加一些紫色。根据`~Ucupaint Cloth Image Atlas` (0.25,0.25)
### ~yP Layer Pattern Sleeve
袖子上的图案。
### ~yP Layer Solid Color 5.001
胸前衣服的图案。
### ~yP Layer Solid Color 2.001
实现出一种菲尼尔效果。
1. dot(指定摄像机空间向量 float3(0,0,1),WorldNormal),传入Ramp,作为Alpha。
2. 与传入Alpha、Color，以及内部指定颜色进行混合。
### ~yP Layer Fake Lighting 1.001
1. dot(指定摄像机空间向量 float3(0,0,-1),WorldNormal),传入Ramp,作为Alpha。
2. 使用贴图`Cloth AO`的值 与 Ramp混合。
### ~yP Layer Fake Lighting 1
对衣服上的褶皱添加高光效果。
### ~yP Layer Solid Color 6.003
增加菲尼尔AO效果。

162
03-UnrealEngine/卡通渲染相关资料/厚涂风格笔记/YusufUmar其他作品分析.md Normal file
View File

@@ -0,0 +1,162 @@
---
title: YusufUmar其他作品分析
date: 2022-08-23 16:52:42
excerpt:
tags: 卡通渲染
rating: ⭐
---
# Saber
## 要点
- Saber_~yP Layer Solid Color 7:使用dot(摄像机空间float3(0,0,1),WorldNormal)来FakeLight，效果表现为胸部附近的SSS效果。
- **Saber_~yP Layer Skin AO**：增加身体区域的SSS与AO效果。**使用AO Mask贴图作为Ramp的Alpha，取得Ramp颜色**；还是用UV Mapping Color生成颜色，传入Ramp，来取得一个黑白Alpha，与之前的Color以4:1的比例混合。**做到一种次表面散射衰减，以及AO的双层效果**。
## Eye
- Saber_~yP Layer Solid Color.004
- Saber_~yP Layer Solid Color 1.002
- Saber_~yP Layer Solid Color 11
## Face
- Saber_~yP Layer Solid Color 2.002
- Saber_~yP Layer Solid Color 3.002
- Saber_~yP Layer Solid Color 12：通过贴图Mask来增加自发光的方式来提亮某一些部位。
## Body
- Saber_~yP Layer Solid Color 9:调整身体Roughness以及眼睫毛BaseColor
- Saber_~yP Layer Solid Color 10：调整身体Roughness以及高光
- Saber_~yP Layer Solid Color 5.001
## FakeLight
- Saber_~yP Layer Solid Color 7：FakeSSS
- Saber_~yP Layer Fake Lighting.002：FakeLight
# Saber2
## 要点
- ~yP Layer Solid Color.006：绘制边缘处的粉色Layer，模拟了SSS效果。
- ~yP Layer Solid Color.005：绘制边缘处的较暗粉色Layer，模拟了AO与GI。
## Body
- ~yP Layer Solid Color.006
- ~yP Layer Solid Color.005
- ~yP Layer Solid Color 3.002：使用自发光对皮肤进行整体提亮。
## Eye
- ~yP Layer Solid Color 9
- ~yP Layer Solid Color 10
- ~yP Layer Solid Color 4.002：眼白
- ~yP Layer Solid Color 5.002
- ~yP Layer Solid Color 11：睫毛
## Face
- ~yP Layer Solid Color 2.003：腮红
- ~yP Layer Solid Color 8：唇色
# Shuten DoujiTexture
displacement主要是做出腿甲的凹凸效果。
AO节点用于调整AO效果，让暗处更加暗，亮度更加亮。
## 要点
- ~yP Layer Solid Color 8.001：FakeLighting以增加SSS质感。
- ~yP Layer BodySkin AO：增加身体的细节AO，已增加立体感。
- ~yP Layer BodySkin Cavity：使用CavityMap提亮指定区域。
- ~yP Layer Solid Color 9.001：dot(World,指定法线) + 2层Ramp实现的一个类似描边的效果来增加质感。
## Knee
- ~yP Layer Solid Color.002
- ~yP Layer Solid Color 3.001
- ~yP Layer Noise.001
- ~yP Layer Solid Color 13
- ~yP Layer Solid Color 11.001
- ~yP Layer Solid Color 11
- ~yP Layer Solid Color 14
- ~yP Layer pattern_knee_indentation.png
- ~yP Layer pattern_knee：膝盖上的腿甲
- ~yP Layer Tileable eroded scratch metal texture background .000
## Face
- ~yP Layer Solid Color 1.002：眼线
- ~yP Layer Solid Color 6.001：眼白
- ~yP Layer Solid Color 8.002：眼白阴影效果。
- ~yP Layer Solid Color 4.001：腮红
- ~yP Layer Solid Color 7.001：腮红上的漫画线
- ~yP Layer Solid Color 10.001：嘴唇颜色
## Horn
- ~yP Layer Solid Color 2.001
- ~yP Layer Solid Color 12
## Body
- ~yP Layer BodySkin AO：增加身体的细节AO，已增加立体感。
- ~yP Layer BodySkin Cavity：使用CavityMap提亮指定区域。
- ~yP Layer Solid Color 5.001
- ~yP Layer Solid Color 8.001：FakeLighting以增加SSS质感。
- ~yP Layer Solid Color 9.002：边缘光效果。
- ~yP Layer Solid Color 9.001：dot(World,指定法线) + 2层Ramp实现的一个类似描边的效果来增加质感。
# workou
## 要点
- ~yP Layer Skin AO：AO效果
- ~yP Layer Blush.003：膝盖与肩膀上的神色区域，模拟了一些SSS效果。
- ~yP Layer Fake Lighting：FakeLighting全身效果，模拟了SSS效果。
## Body
- ~yP Layer Skin AO：AO效果
- ~yP Layer Solid Color 9：贴图控制的局部照亮效果
- ~yP Layer Blush.003：膝盖与肩膀上的神色区域，模拟了一些SSS效果。
- ~yP Layer Fake Lighting：FakeLighting全身效果，模拟了SSS效果。
- ~yP Layer Fake Lighting 1.001：使用FakeLighting的方式，实现了类似边缘描线的效果。
- ~yP Layer Roughness Tweak.002：调整腿部的Roughness。
- ~yP Layer Roughness Tweak.003
- ~yP Layer Solid Color 2：FakeLighting，调整B的SSS效果。
- ~yP Layer Solid Color 7：身上的痣
- ~yP Layer Fake Lighting 2.001：胸部的高光点
## Mirror
- ~yP Layer Solid Color 4
- ~yP Layer Solid Color 3：腮红
## Face
- ~yP Layer Eye：眼白
- ~yP Layer Pupil：虹膜颜色
- ~yP Layer Brow：眼睫毛
- ~yP Layer Solid Color 8：Unknow
- ~yP Layer Pupil Dot：瞳孔
- ~yP Layer Solid Color.006：虹膜下方的焦散高光
- ~yP Layer Solid Color 1.002：眼睛两侧的眼白
- ~yP Layer Solid Color 1.006：眼睛上方的阴影
- ~yP Layer Blush：腮红
- ~yP Layer Blush.002：第二层腮红
- ~yP Layer Nail：Unknow
- ~yP Layer Tongue：估计是舌头
- ~yP Layer Teeth：调整牙齿区域的亮度
- ~yP Layer Roughness Tweak：调整脸部腮红的Roughness
- ~yP Layer Roughness Tweak.001
- ~yP Layer Fake Lighting 2：侧脸的阴影
# YangGuiFei
## 要点
- ~yP Layer Skin AO：身体AO
- ~yP Layer Fake Lighting：通过FakeLighting模拟SSS效果。
## Body
- ~yP Layer Skin AO：身体AO
- ~yP Layer Fake Lighting：通过FakeLighting模拟SSS效果。
- ~yP Layer Fake Lighting 2：大腿上的高光
- ~yP Layer Fake Lighting 3.001：大腿边缘光效果
## Face
- ~yP Layer Solid Color 4：唇色
- ~yP Layer Solid Color 3：腮红
- ~yP Layer Eye：眼白
- ~yP Layer Pupil：虹膜颜色
- ~yP Layer Brow：睫毛
- ~yP Layer Pupil Dot：瞳孔
- ~yP Layer Solid Color 6：大概率是眼睛的阴影
- ~yP Layer Solid Color.006：虹膜下部的焦散高光效果
- ~yP Layer Solid Color 1.002：眼睛上部的阴影
- ~yP Layer Solid Color 1.006：眼睛上部的阴影
- ~yP Layer Blush：腮红
- ~yP Layer Blush.001：第二层腮红
- ~yP Layer Nail：Unknow
- ~yP Layer Fake Lighting：通过FakeLighting模拟SSS效果。
- ~yP Layer Fake Lighting 1.001：Eye相关的FakeLighting，效果未知。
- ~yP Layer Fake Lighting 3：脸部边缘光效果。

97
03-UnrealEngine/卡通渲染相关资料/厚涂风格笔记/YusufUmar厚涂手法总结.md Normal file
View File

@@ -0,0 +1,97 @@
---
title: YusufUmar厚涂手法总结
date: 2022-08-24 14:29:06
excerpt:
tags: 卡通渲染
rating: ⭐⭐
---
## 前言
总结主要以YusufUmar的kama的皮肤材质为主。其他作品作为补充。
## 皮肤
材质模型使用Blender默认的Principed BSDF节点(可以理解为多个BSDF进行混合)：
- 标准的迪士尼模型，基底材质参数为：皮肤颜色float3(0.846873,0.602632,0.512498)、Roughness 0.3、Metallic 0 。Subsurface：0.01
- SSS材质的模型为RandomWalk（Fixed Radius），以0.01~0.005的比例进行混合。
下图为最终结果->使用默认参数的Principed BSDF Node
![](https://cdn.jsdelivr.net/gh/blueroseslol/ImageBag@latest/ImageBag/YusufUmar/kama/kama_FinalyToDefault.gif)
### 增加质感
1. ~yP Layer Noise为法线增加Noise效果，体现为**皮肤哑光效果**。
2. yP Layer Fake Lighting效果，模拟出皮肤的SSS以及环境光照效果，增强厚涂皮肤的质感。
3. yP Layer Red Skin （肩部区域与手指）效果，模拟皮肤的SSS效果，增强厚涂皮肤的质感。
4. yP Layer Skin AO （皮肤上的AO效果），模拟皮肤上的AO，
#### Noise
![](https://cdn.jsdelivr.net/gh/blueroseslol/ImageBag@latest/ImageBag/YusufUmar/kama/kama_noise.png)
#### FakeLighting
![](https://cdn.jsdelivr.net/gh/blueroseslol/ImageBag@latest/ImageBag/YusufUmar/kama/yP_Layer_Fake_Lighting.gif)
#### RedSkin
![](https://cdn.jsdelivr.net/gh/blueroseslol/ImageBag@latest/ImageBag/YusufUmar/kama/yP_Layer_Red_Skin.gif)
#### SkinAO
![](https://cdn.jsdelivr.net/gh/blueroseslol/ImageBag@latest/ImageBag/YusufUmar/kama/yP_Layer_Skin_AO.gif)
#### Outline
使用一个稍微扩大的模型渲染描边效果。
## 头发与衣服
头发与衣服也使用了多种Ramp效果叠加。
## 后处理效果
## 思路转化
YusufUmar的思路还是偏向于3D辅助绘制，也就是将一个Shader效果（以GroupNode为单位）作为一个图层，之后层层叠加出效果。效果主要分为：
- 原始光照，Blender中灯光、环境光效果。
- FakeLighting：通过制定dot(摄像机空间向量,WorldNormal)的方式获取到一个Alpha,之后通过映射成一个ColorRamp再叠加上去。(虽然效果看起来可以，但这么做其实是错误的，但移动端可以使用）。
- RedSkin：使用绘制贴图（顶点绘制）的方式制定若干区域与Alpha之后通过映射成一个ColorRamp再叠加上去。
- SkinAO：通过制定dot(摄像机空间向量,WorldNormal)的方式获取到一个Alpha,之后通过映射成一个ColorRamp再叠加上去。
主要的思路就是使用各种数据算出的Alpha来映射ColorRamp，并叠加到角色上。这需要原画美术的支持，来实现在物理正确的基础上**加料**。
### 光照
主光可以UE的ShaderModel中根据全局变量中的DirectionLightVector来判断，进而进行调整（设置主光Ramp）。
但有一个问题，**主光的效果如何和其他点光效果平衡？**
YusufUmar的作品中也会使用FakeLighting（Shader计算+Mask）来实现局部照亮这种额外打光效果。**是否可以通过LightingChannel，在ShaderModel中判断？**
![](https://cdn.jsdelivr.net/gh/blueroseslol/ImageBag@latest/ImageBag/YusufUmar/saber/Saber_~yP_Layer_Fake_Lighting.002.gif)
因为这种补光的点光只会在特定镜头出现，出了过场动画肯定要去掉。**脑洞：搞成Pose驱动的灯光效果？**
### FakeSSS效果
#### FakeLighting（环境光SSS效果）
YusufUmar的方法不精确！比如耳朵以及锁骨区域这些应该比较透的的确却不一点都不透。
个人认为最好的方法是：
- 使用UE的SSS渲染功能的点采样，求出透明度，作为映射参数之一。
- 使用一个可调整的曲线Asset作为皮肤的LUT来实现SSS效果。
- 或许SSS部分也需要类似**Lambert -> HalfLambert** 的调整？
#### RedSkin
在UE使用Layered Material方式，将不同颜色的SSS材质混合到一起。
- 让美术绘制混合用的贴图。
- 使用Layered Material进行混合。
这个绘制类型的Ramp效果多次出现，能很好的提供那种厚涂的效果。
### AO
使用贴图+SSAO。
**最好能做到使用AO来偏移SSS效果，而不是进行直接的阴影叠加。**
### 质感增加
**皮肤哑光效果**使用Noise贴图并且使用ddx/ddy实现。
## 其他改进
因为作者能力与Blender的限制，所以没有考虑天光、GI、HalfLambert等因素。所以
1. 将ShaderModel的Lambert -> HalfLambert。
2.
美术可能需要调整的相关Ramp：
- SSS效果
- 主光Ramp
- 天光与环境光
- AO （只能修改默认参数）

34
03-UnrealEngine/卡通渲染相关资料/厚涂风格笔记/厚涂画师作品分析.md Normal file
View File

@@ -0,0 +1,34 @@
---
title: 厚涂画师作品分析
date: 2022-10-13 20:40:47
excerpt:
tags: 卡通渲染
rating: ⭐⭐
---
## 分类标准
每个作者的作品区分：
- 场景的时间与环境
- 室内/室外
- 大致时间
渲染特征使用以下进行评级：
- 画面颜色分布
- 亮处与暗部的亮度分布
- 饱和度分布
- 色相
- 次表面
- 次表面强度
- 粉嫩程度
- 皮肤高光
- 天光
- AO
- Bloom/Glow
- 环境光
- 其他绘制
- 丝袜
- 湿润的皮肤
- 后处理
- Bloom
## 画师作品具体分析

19
03-UnrealEngine/卡通渲染相关资料/厚涂风格笔记/厚涂绘画过程笔记.md Normal file
View File

@@ -0,0 +1,19 @@
---
title: 厚涂笔记
date: 2022-08-10 15:25:48
excerpt:
tags: 卡通渲染
rating: ⭐
---
## 厚涂的绘画流程
[B站厚涂教程](https://www.bilibili.com/video/BV1PY411J7Af?p=1)的流程
1. 绘制基本色块![|800](https://cdn.jsdelivr.net/gh/blueroseslol/ImageBag@latest/ImageBag/Images/底色.png)
2. 绘制阴影区域（这步完成就有基本的赛璐璐效果了）![|800](https://cdn.jsdelivr.net/gh/blueroseslol/ImageBag@latest/ImageBag/Images/光影与高光.png)
3. 对阴影区域进行涂抹（方向为暗->亮）以及模糊处理，使之具有比较自然的过度效果。 ![|800](https://cdn.jsdelivr.net/gh/blueroseslol/ImageBag@latest/ImageBag/Images/平滑光影.png)
4. 绘制第二层光影细节![|800](https://cdn.jsdelivr.net/gh/blueroseslol/ImageBag@latest/ImageBag/Images/第二层光影细化.png)
5. 使用喷枪工具给皮肤添加腮红效果，部分阴影区域也可以使用之前绘制的Mask进行饱和度与颜色调节。![|800](https://cdn.jsdelivr.net/gh/blueroseslol/ImageBag@latest/ImageBag/Images/添加腮红等皮肤细节.png)
6. 添加头发以及眼睛细节![|800](https://cdn.jsdelivr.net/gh/blueroseslol/ImageBag@latest/ImageBag/Images/添加头发细节.png)
7. 添加天光、反射、其他灯光效果以及物体高光，来凸显质感与灯光气氛。![|800](https://cdn.jsdelivr.net/gh/blueroseslol/ImageBag@latest/ImageBag/Images/添加反射天光物体高光与整体提亮.png)![|800](https://cdn.jsdelivr.net/gh/blueroseslol/ImageBag@latest/ImageBag/Images/添加边缘光与其他细节.png)
8. 最后添加细节![|800](https://cdn.jsdelivr.net/gh/blueroseslol/ImageBag@latest/ImageBag/Images/最后添加细节.png)

155
03-UnrealEngine/卡通渲染相关资料/厚涂风格笔记/厚涂风格实时二次元渲染(0)-前言.md Normal file
View File

@@ -0,0 +1,155 @@
由简单的二值化到厚涂二渲染
**NPR**作为一个视觉效果导向的渲染方向，其实是有着很强的商业化前景。因为对于真实感的要求不高，只是“看上去好看就可以”，所以很多时候复杂的物理现象可以直接绕过，或是使用很快但效果并不好近似折衷。在NPR中由于绝大部分是非真实感的渲染，大多数时候对一个提供真实感补正的物理现象具体表现效果要求并不高。因此在性能开销方面以及移动端方面都有着很强的应用前景。
NPR的大部分效果其实对于TA的物理数学功底要求并不算很高 ，那么究竟是对什么要求高呢？答案是：**审美**。可以说既然你要做NPR，至少要对要做的NPR的艺术领域有足够高的热爱和理解。比如你要做二次元风格的渲染的话，就要看过各种各样画风的动漫，对于哪种画风更受喜爱也要有所了解，自己也要清楚自己喜欢什么画风，也要清楚这种画风的优势所在。另外，即使是各种非真实感的画风，通常各种效果也是基于物理现象的夸张化而已，都能够找到物理现象的本源，一般来说，将相应的物理现象在PBR的实现方法进行各种套路魔改，就可以实现相应的在NPR里面的效果。
二次元渲染模型和写实向渲染模型另外还有一个自然而然的区别，即写实向渲染通常是为实现一个效果而使用不同的物理方法，二次元渲染模型则通常实现不同的效果而使用不同的套路，因为真实感是亘古不变的，但“好看”的定义却大有不同。常为我们所接受的米哈游《崩坏3》、《原神》、《星穹铁道》中都是使用了“赛璐璐风格二次元渲染”，其表现为“二值化”，即：将亮部与暗部使用离散的方式分割，以得到扁平化的效果。
![](https://pic2.zhimg.com/80/v2-6cefd12cb2da8997dae133b769b15795_720w.jpg)
原神中的角色刻晴
但其实二值化也未必只有两个值，只要体现了**离散**特性的光照模型都可以称之为二值化，是将一个光照阶段进行了二值化。动漫中其实也会出现高光部，来表现一个表面凸出且反射度较高的特性(例如兄贵光滑的肌肉)
![](https://pic4.zhimg.com/80/v2-c84d2f3148ec6d0dad305ef41c286f0b_720w.jpg)
引用:https://zhuanlan.zhihu.com/p/437313927
二值化通常的做法其实就是一个条件判断，将N dot L 的值与阈值判断，高于阈值的呈现亮部特点，低于阈值的呈现暗部特点。但是，现在的做法通常是将条件判断做成了一个映射Map，称作**Ramp Map**，如果要用RampMap实现常规的二值化，只需将RampMap做成只有两个颜色的就可以。如果要做三值化，只需要做成三个颜色。甚至如果要用常规的兰伯特模型，只需要做成黑到白的渐变，就相当于没有进行这次映射。RampMap比起条件判断是更加灵活的。
![](https://pic2.zhimg.com/80/v2-80dc668969bbb178df69dbc7848a8459_720w.jpg)
游戏《嗜血代码》中野体现了一定的二值化特性，但是阴影处相对更加柔和，这只需要你在二值化的RampMap跳变处做一个小小的渐变就可以实现。
赛璐璐风格作为日式二次元动漫最常见的画风，其实是相对最为人接受的。《原神》的爆火也证明了它的可行性。它的优势是显而易见的。
1.渲染成本较低(简单的光照模型，自然会比真实向渲染的开销更低)
2.下限高，不会出现太穿帮的渲染(二值化，非你即我，十分可控)
3.普遍接受度高(简单的画风往往不至于令人厌恶)
但是，很少有人分析赛璐璐风格的缺点，他的缺点其实也是存在的
1.上限较低
在玩家口味普遍刁钻的现在，简单的二值化渲染有时不能满足他们对细腻画风的追求，《幻塔》和《崩坏3》的早期角色就是例子。
![](https://pic1.zhimg.com/80/v2-76849afe98a9b301b0c20edf631c19b8_720w.png)
《幻塔》的着色
![](https://pic2.zhimg.com/80/v2-544187ece8f7fc3ef149e04229b23c69_720w.jpg)
冰八
冰巴刚出那时候，大家对手机游戏角色的要求并不高。可以看到幻塔的角色大概和冰巴精细度差不多，但幻塔的美术就被吐槽了。我个人认为是时代发展的原因。再来看看崩坏3的后续角色
![](https://pic2.zhimg.com/80/v2-1a8115107320c103f5993df9a3ecb4c9_720w.jpg)
艾莉希亚
这其中有一个十分明显的变化，即模型的精细程度。
![](https://pic1.zhimg.com/80/v2-d0733cec88788bf13ac5bae5d97e2ffc_720w.png)
大面积的白色
![](https://pic3.zhimg.com/80/v2-78fc066ddd1cd3d0e36fb9c7c070696e_720w.png)
大面积的单调肉色
![](https://pic4.zhimg.com/80/v2-cea2018eb46c6e4ee80b12a7baa0ce3b_720w.png)
不太负责任的直接上一个渐变色的袜子
当模型细节堆砌的不够多，简单的二值化就会显得效果过于简单，会产生一定的粗糙感。因此，二值化对角色设计有要求：即细节必须足够多，也就是说角色必须佩戴足够多的饰品，衣服上必须有足够多的花纹，这其实是对角色设计的一种限制。
与艾莉希亚相同，《原神》也是通过这种取巧的手段来实现在二值化下留白而不给人带来太多粗糙感的。
![](https://pic1.zhimg.com/80/v2-ec3f507d0e1dc2ba6be043946100935c_720w.jpg)
提纳里身上各种各样的饰品，白色绸缎上华丽的花纹
![](https://pic1.zhimg.com/80/v2-e35307427747d8b83f09bc97423d0d1c_720w.jpg)
十分复杂的细节
![](https://pic4.zhimg.com/80/v2-f7287f1a5d6da4b841016f2de6889267_720w.jpg)
就算是做个黑丝也要往上面加星星避免单调感
在《原神》中，你无法找到任何一个角色是简单的，这无疑会对角色设计带来更高的验收要求和限制。
即使赛璐璐风格渲染有着一定的局限性，它依然是二次元渲染的必修课，
非常推荐知乎大佬flashyiyi的文章
[到目前为止的二次元渲染总结 - 知乎 (zhihu.com)](https://zhuanlan.zhihu.com/p/126668414)
[一些较少人提过的二次元渲染方法 - 知乎 (zhihu.com)](https://zhuanlan.zhihu.com/p/539950545)
在第一篇文章中，他提到：
![](https://pic4.zhimg.com/80/v2-34604f26c1c97b5472c95ab9e0f89e27_720w.jpg)
实际上，pixiv上有很多传统二值化的绘画作品，但是在热门榜上经常霸榜的画风却往往是绘画更加细腻的风格。
![](https://pic2.zhimg.com/80/v2-341a850405f7c431fd148fee0b7b84ed_720w.jpg)
一张曾经在热门栏的原神插画
米哈游也在积极探索在NPR下更细腻的渲染表现，比如
![](https://pic2.zhimg.com/80/v2-8a56d7d033bde005e7c1cadf33dd6e9d_720w.jpg)
米哈游的《桃源恋歌》中的八重樱
![](https://pic4.zhimg.com/80/v2-116e078a48f0e7ba92162e46ee0ad17b_720w.jpg)
可爱的鹿鸣
但也都并不能称得上是完美的“二次元渲染”
《桃源恋歌》中的三层Ramp手段，使得肉体不仅具有渐变的特性，也保留了跳变的特性，但由于时代较早，这个ramp我觉得不算特别好看。另外头部和身体的渲染区别有点太大，有点像是“接头霸王”
而《鹿鸣》更像是个邻家小妹，皮肤的次表面散射材质确实Q弹，以及各种高技术力的唯美表现，但是这个不够二次元……在某些时候给人一种既真实又虚假的“恐怖谷”的感觉。(这个只是我个人的感受，因人而异，希望大家不要喷我)
![](https://pic2.zhimg.com/80/v2-c3500683cd6e55cae7bdeb50601c9455_720w.jpg)
高能手办团
游戏《高能手办团》中，探索插画风格渲染的方式是直接使用了PBR，然后在头发等部位故意使用塑料的材质，做出手办的感觉，其实直接使用PBR在日厂的二次元作品是比较常见的。
![](https://pic4.zhimg.com/80/v2-3cfeb269c68aaa8c2a6750f740994867_720w.jpg)
PBR VS NPR 各有千秋
PBR给人的感觉是更加细腻，而NPR给人的感觉是更加二次元。
那么在PBR与NPR之间我们如何找到一种折衷？实际上pixiv已经给了我们一种答案：厚涂。
厚涂的角色由于具有一定的真实感物理特性，使得它在无论真实感的场景下还是在二次元感的渲染场景下，都不会显得过于违和。大面积的肉色堆叠，由于能够看到肌肤的明暗变化，也不会让人觉得粗糙和单调。同时，作为新兴的二次元画风：厚涂，也不至于会让人觉得不够“二次元”。
![](https://pic4.zhimg.com/80/v2-74a23b1c6a43d4bc8e7bd4fe238a6737_720w.jpg)
厚涂风格的玛修同学
本专题将会分享我在厚涂二次元渲染风格探索中的心得体会~从人物的各种部位到场景的各种材质，只要有时间并且有相关研究成果就会分享出来~
赛璐璐风格的二次元渲染套路（例如面部法线修正），以及一些简单常用的PBR套路（例如次表面散射模型），是本专题的前置知识，不过不用担心，用到前置知识的地方我会进行资料的引用。
求三连~

251
03-UnrealEngine/卡通渲染相关资料/厚涂风格笔记/厚涂风格实时二次元渲染(2)-厚涂风的皮肤渲染.md Normal file
View File

@@ -0,0 +1,251 @@
注意：本专题也许会大面积展示人体皮肤渲染结果，这可能会引起你的不适。
### 0.准备工作
在专题开始之前，你需要完成二值化的光照模型以及outline
[【01】从零开始的卡通渲染-描边篇 - 知乎 (zhihu.com)](https://zhuanlan.zhihu.com/p/109101851)
[【02】从零开始的卡通渲染-着色篇1 - 知乎 (zhihu.com)](https://zhuanlan.zhihu.com/p/110025903)
可以看这位大佬的二值化渲染模型。
另外，如果对赛璐璐风格的二次元渲染仍存疑惑，我的建议是
[RealToon (An Anime/Toon Shader) | VFX 着色器 | Unity Asset Store](https://link.zhihu.com/?target=https%3A//assetstore.unity.com/packages/vfx/shaders/realtoon-an-anime-toon-shader-65518)
![](https://pic3.zhimg.com/80/v2-5a057f55bc36863698d13556ecdedcb2_720w.jpg)
realtoon效果
这个18刀的着色器包含了完整源码，还内置了对实时光线追踪的支持，18刀的学费不算贵喔。
光追二次元的内容放到第九篇说吧，这里就不展开了。
### 1.皮肤的平滑光照
显而易见，插画风格与赛璐璐风格最大的区别就在于，皮肤对于不同的光照情况有着不同的表现。
![](https://pic3.zhimg.com/80/v2-8eea128f8d24397f1ed1b80f8c7e3aaa_720w.jpg)
原神的插画
![](https://pic4.zhimg.com/80/v2-540476418232914ff9a66a6474c5cfbf_720w.jpg)
原神正作渲染结果
我们对皮肤颜色进行抓取
![](https://pic2.zhimg.com/80/v2-275d25057df5b4d4f18063614435efdd_720w.png)
原神插画的皮肤颜色
![](https://pic1.zhimg.com/80/v2-dbb9e7284672b2114d79f6a057211c94_720w.png)
原神渲染的皮肤颜色
可以看到，原神的插画相比原神游戏中的渲染结果，其色彩能够展示出一定的PBR特点，例如Specular高光，还有次表面散射的效果。不过，画面整体依然很二次元，因此我们是可以从赛璐璐风格着色器的基础上进行魔改得到我们期待的厚涂风格皮肤的。
因此，我们在原本赛璐璐风格的渲染基础上直接引入Specular高光和次表面散射。与PBR不同的是：
1.我们不必对其物理真实性太过较真，只要他能对我们的画面进行补正就是好文明。
2.保证所有效果可以通过参数调整权重，因为NPR保证视觉好看是第一要务。
因此，Specular可以简单用 SpecularColor∗SpecularIndensity∗dot(normal,lightDir) 实现，也可以用 SpecularColor∗SpecularIndensity∗dot(normal,viewDir) ，我个人倾向于后者。
其中， SpecularColor 是Color， SpecularIndensity 是灰度图。
实现。当然，如果物体的SpecularColor会因部位而异，那么可以和 SpecularIndensity 一起合并成一个含颜色的贴图。
次表面散射方面，可以考虑使用pre-integrated模型。
![](https://pic1.zhimg.com/80/v2-566a80722b5574f44c144ce5c9d1e524_720w.jpg)
预积分的次表面散射
BSSRDF与BTDF，以及pre-integrated模型的学习： [三鳥：实时皮肤渲染综述](https://zhuanlan.zhihu.com/p/462124664)
简单的说一下BSSRDF。
![](https://pic1.zhimg.com/80/v2-b3e1e3977b24b430c70d4154f216b384_720w.jpg)
射入皮肤的光呈现漫反射的性质
当光照射到皮肤表面后，光会在皮肤下的油脂层进行多次散射，在它射出时，它体现漫反射的性质。不过，之所以他体现出漫反射的性质，是因为光射入皮肤后，多次散射会导致最终值差距较大，因此在皮肤下的油脂层中存在着各种方向混乱的散射，最终射出的光就会呈现漫反射的性质了。
![](https://pic2.zhimg.com/80/v2-be59512df5df1287987c167cf7661055_720w.jpg)
BSSRDF导致的结果
这就导致光束大概照到人体表面是这个样子的。那么如何得到这个预积分图呢？除了上面文章中提到的screen space blur的办法，也可以使用基于拟合函数的方法。
[【译 】Disney2015-将BRDF扩展至集成次表面散射的BSDF - 知乎 (zhihu.com)](https://zhuanlan.zhihu.com/p/345518461)
这两种方法，都可以得到一个类似下图的渲染结果。
![](https://pic3.zhimg.com/80/v2-84b704f9aca547ad096a092a07be0ea6_720w.png)
可爱的光圈
然后在渲染结果上以以1r采样，水平方向上以**受光强度**N⋅L采样，就可以得到预积分图。
如果你实在整不明白，你直接把别人的预积分结果拿去用也无所谓……反正大学时期大家应该也都抄过别人的**作业**吧。
![](https://pic4.zhimg.com/80/v2-6265fc4132e3a88eac42d8b647ed6dbb_720w.jpg)
在我们得到预积分图后，我们就可以考虑如何使用。
![](https://pic3.zhimg.com/80/v2-182f4b5498b892488109e7f1a5860046_720w.jpg)
预积分贴图
常见的pre-integrated模型刚好是以 N·L 为横坐标的，这与我们的RampMap一致。此时此刻我们的赛璐璐风格RampMap应该还是一个1N大小的LUT，将这个一维LUT与pre-integrated二维LUT直接逐行相乘，得到一个新的RampMap，但是1N的RampMap拓展为了N*N，纵坐标的1/r是在球面上的，如何应用到我们的复杂网格渲染中呢？
请参考[Pre-Integrated Skin Shading 的常见问题解答 - 知乎 (zhihu.com)](https://zhuanlan.zhihu.com/p/384541607) Q&A第五节
![](https://pic2.zhimg.com/80/v2-d038e84789085ca99b79a1c55475d1e9_720w.jpg)
Jeffrey Zhuang的Q&A
因此，将 ΔNormal/ΔPosition 作为纵坐标就可以了（笑）。
仅仅是换一张图，就解决了皮肤的次表面散射问题。
至此，皮肤的平滑光照问题就已经解决。
![](https://pic1.zhimg.com/80/v2-7c82b53ceddd3e6ee2f789145ccccde4_720w.jpg)
赛璐璐Only
![](https://pic2.zhimg.com/80/v2-966e029dc7ad41453825fe8351e4b415_720w.jpg)
加入了BSSRDF和Specular后的效果
（这里头发和五官的渲染已经是完结版本，所以有种降维打击的感觉）
可以看到，在加入SSS和Specular之后，我们的皮肤已经有一股插画的感觉了，并且开销并不算很高。
求求审核哥哥姐姐了，给个过吧，真的很需要展示皮肤各个角度的渲染效果……
### 2.皮肤的厚涂化表现
实际上到此为止的皮肤效果就已经不错了，但是不够二次元了，因为我们上述的操作都是PBR的，真实感太高有时候也不是一件好事。举个例子，在下一篇我会谈到一个叫做face normal fix的操作，这会导致脸很平面。如果你的肉体立体感太足的化，就会显得你是一个**接头霸王**。
**实际上，在绘画过程中，画师不仅仅要考虑到皮肤的真实感，还要考虑到画面整体的协调性。**
假如我们使用了基于物理的次表面散射，这会让我们的皮肤在**高强度的直射光**下的物理表现更为明显。但是与此同时，在反射光下的影响就会变得更弱。
**注意**！下述方法论非常**不**基于物理，这可能会引起你的不适！
为了让皮肤的质感更为可控，我们采用第二章N*N的LUT，但这张LUT我们不基于物理去生成，而是跟着**感觉**走
实际上，我们需要一个散射光强度与直射光相补正，而这个光就是天空光。
1.天空光是蓝色的，所以我们考虑让皮肤看上去有蓝色的散射感。
2.与此同时，在皮肤边缘，我希望有一个体现BTDF的效果，在二次元下，我希望这个颜色是粉粉的。
3.散射感在直射光射到的地方肯定会体现的不充足，在直射光射不到的地方才会比较多。
4.第二条说的BTDF肯定也得是和光照强度绑定的呀！
综上四条，我们下一步控制皮肤质感的LUT，必然有一维是 N·L ，用以表示直射强度。考虑到皮肤边缘需要BTDF，另一个维度应该是 N·V 。
这样的话我们依然需要LUT，只是这次的LUT不需要积分（毕竟也不基于物理），
直接凭感觉随便拿PS什么的画一下就好了。
这个补正方法的灵感来源于一个效果很好的Fake SSS的着色：
[Shader Forge - A visual, node-based shader editor | Page 54 - Unity Forum](https://link.zhihu.com/?target=https%3A//forum.unity.com/threads/shader-forge-a-visual-node-based-shader-editor.222049/page-54%23post-1903768)
![](https://pic4.zhimg.com/80/v2-40d06be17c63ffbfdf7278fa94cc586b_720w.jpg)
二次元可以使用的LUT
以天空为背景色，直射光使用肤色作为相应，然后边缘使用粉粉嫩嫩的颜色。
至于这块儿棕色，因为我们是半兰伯特模型，所以一般而言不会采样到太多。
最后一步就是厚涂化了，我们回首再对我们的厚涂做一点考察
![](https://pic3.zhimg.com/80/v2-9033475c1eeafb56e7efaa4b4ccc0d7e_720w.jpg)
厚涂玛修
厚涂是发源于**西方油画**的一种绘画技法。 画家在画布上使用很厚的颜料，利用笔刷或画刀进行涂抹，就像抹奶油一样，故名“厚涂”
在这样的绘画工艺下，导致厚涂色块十分分明。因为是用很厚的颜料，所以渐变实际上是离散的，这就和我们的赛璐璐有一点像了。
离散的同时，由于两个颜料的相互融合，边界却又十分的柔和
![](https://pic3.zhimg.com/80/v2-3e2584ae4d9f900e2671d69b652f01d6_720w.png)
柔和的边界
我们直接对上面的补正LUT做处理就好了。先downsampling，再用朴素的方式放大，然后用一下小半径的均值滤波，就可以得到一张有厚涂特色的补正LUT了
把这张LUT和上面pre-integrated以相同的方式(但纵坐标轴不同)也应用进去，就完成90%的效果啦
![](https://pic2.zhimg.com/80/v2-34eae06ce1c6db841df4743564281ded_720w.jpg)
可以看到这时候效果已经很不错了。
### 3.一点小方法
（1）另类高光
![](https://pic3.zhimg.com/80/v2-fcafe3f2e9e0cf12887b6bb95ef248a2_720w.png)
肩头上有高光
可以看到有些二次元厚涂作品有明显不基于物理的高光，这是因为二次元美少女每一个都滑溜溜的。
这个效果在我们使用了不基于物理的补正LUT后非常简单，在LUT的左上角点一个光点就可以了。
效果：
（2）屏幕空间补光
![](https://pic3.zhimg.com/80/v2-2a91d9ae7ff5a51329e8201c0a66ff46_720w.png)
肩头存在补光
二次元角色的光照实际上都是以好看为第一要务的。其实许多动漫都存在“两个人面对面，但是却都向光”的情况。对于二次元美少女而言，光补的越多，就越好看(雾)
[Unity URP Shader 与 HLSL 自学笔记六 等宽屏幕空间边缘光 - 知乎 (zhihu.com)](https://zhuanlan.zhihu.com/p/365339160)
可以在这篇文章学习这个套路。因为我也是学的别人的，就不在这里班门弄斧啦。
![](https://pic2.zhimg.com/80/v2-70afc5f583d1c9e3b73e4be836e880ad_720w.jpg)
补光后的效果，会让人感觉更有绘画感。
此外，将这个效果复制一份并以 normal·viewDir lerp一下，可以做出BDTF的效果
![](https://pic3.zhimg.com/80/v2-73195fb50795c9d53e2c85530ba9f1e2_720w.jpg)
### 4.最终效果预览
最终渲染结果
![](https://pic4.zhimg.com/80/v2-f43bb29ee45db8a8c5dd131e95c6b4e7_720w.jpg)
为了保证气氛一致，角色受环境光的影响很大
![](https://pic1.zhimg.com/80/v2-947d28c133bfd4864b5218635ed493bc_720w.jpg)
最终的渲染效果之看看你的
感谢大家的学习！下一期会更新对角色面部的处理！
渲染群群号：817341015

168
03-UnrealEngine/卡通渲染相关资料/厚涂风格笔记/厚涂风格渲染文档.md Normal file
View File

@@ -0,0 +1,168 @@
---
title: 厚涂风格渲染文档
date: 2022-09-13 15:25:32
excerpt: 摘要
tags:
rating: ⭐
---
# 厚涂元素分析
# 原理说明
## Material
>与ToonStandard、ToonHair不同，Roughness与Metallic的作用恢复成UE默认的逻辑。
这个材质可以理解为在一个Lambert材质上叠上了一层层的效果。
- BaseColor：基础颜色贴图
- Metallic：控制反射强度。
- Roughness：控制高光形状
- Specular：控制高光强度。
- Opacity：具体参考[[#Material#Opacity]]
- ShadowSideColor（ToonSkin为SubsurfaceColor）：次表面颜色贴图，用于控制身体各部位的次表面颜色。比如嘴唇、手指等部位因为毛细血管较多会显得比较红。美术需要根据需求进行绘制。
- ToonDataA：
- R：ShadowOffset，用于偏移赛璐璐的光影分界面位置。 ToonSkin未使用。
- G：用于指定ToonDataID，与ToonWorldSettings中ToonData的Index对应。
- B：为天光渲染结果与ShadowSideColor的混合因子。ToonSkin未使用。
- A：未使用
- ToonDataB：
- RGB：OutlineColor
- A：OutlineMask
- ToonDataC：
- RGB：描边用的IDTexture
- A：OutlineWidth
ToonCustomOutput：
这3个参数与间接照明有关（体积光照贴图）因为没有对应场景所以没办法进行测试。
- InSubsurfaceColorForIndirect：修改次表面颜色对于DiffuseColorForIndirect的影响,默认为0,也就是不影响。
- InDiffuseIndirectLightingMask：漫反射间接照明Mask
- InSubsurfaceIndirectLightingMask：次表面间接照明Mask
### Opacity
该贴图用于控制次表面的Transmission所使用的的预积分Ramp（值越大次表面颜色会越明显）。使用Marmoset Toolbag烘焙出曲率贴图Curvate、厚薄度贴图Thickness为基础进行辅助绘制最终得到Opacity贴图。
我们需要对贴图进行Clamp，去除较低的颜色（Thickness选择大腿处的颜色为最低颜色），之后将其重映射。
![|300](https://cdn.jsdelivr.net/gh/blueroseslol/ImageBag@latest/ImageBag/Images/Kama_Thickness.png)
Curvate贴图我们只需要0.5~1部分的数据，所以在Clamp(0.5,1)之后再将其重映射。
![|300](https://cdn.jsdelivr.net/gh/blueroseslol/ImageBag@latest/ImageBag/Images/Kama_Curvature.png)
![|1500](https://cdn.jsdelivr.net/gh/blueroseslol/ImageBag@latest/ImageBag/ToonRendering/Subsurface_OpacityNode.png)
## ToonWorldSettings说明
为了解决延迟渲染不能传递大量参数的问题，本人设计这种通过ID查询对应全局贴图来获取数据的方法。对应的参数在ToonRenderingWorldSettings中设置并且绘制即可。
ToonData目前只有2个参数是有效果：
- FalloffRampCurve：控制光影过渡曲线。
- BloomMultiplier：控制指定部位的“辉光”效果的强度。
ToonSkinData：
- FalloffRampCurve：控制灯光光照的光影过渡曲线。置空则使用默认的**Lambert**衰竭曲线进行计算。
- TransmissionRampCurve：控制灯光光照的次表面效果的渐变曲线。置空则使用**1-Lambert** 衰竭曲线进行计算。
- SkyLight
- SubsurfaceColorAlphaForSkyLight：控制天光产生的SSS效果。
- SubsurfaceColorOpacityMultiplier：控制Opacity对于天光SSS的影响强度。
- IBL参考[[#ReflectionEnvironmentAndSky#IBL]]
- IBLMultiplier：HDR贴图反射效果强度。
- IBLMultiplierRangeByLuminanceMax：
- IBLMultiplierRangeSmooth：HDR贴图反射过渡效果。
- IBLMultiplierRangeAOMask：AO对于HDR贴图反射的影响倍率。
- BloomMultiplier：控制指定部位的“辉光”效果的强度。
### 全局贴图说明
这些贴图都存放在`Engine\Content\EngineMaterials\ToonTexture`中。为了保证效果需要确保这些贴图的CompressionSettings为`VectorDisplacementmap(RGBA8)`。其中ToonDataTexture与ToonSkinData贴图的Filter设置成`Nearest`。
- ToonStandard与ToonHair相关：
- ToonRampTexture：ToonStandard与ToonHair的存储调整阴影分界面偏移与软硬度Ramp数据的贴图，通过ID来采样指定的行。
- ToonDataTexture ：ToonStandard与ToonHair的存储Toon数据贴图，通过ID来采样指定的行。
- ToonSkin相关：
- PreIntegratedToonSkinBRDFTexture ：ToonSkin专用的PreIntegrated贴图。
- ToonSkinFalloffMaskTexture ：ToonSkin专用的存储调整阴影分界面偏移与软硬度Ramp数据的贴图，通过ID来采样指定的行。
- ToonSkinTransmissionMaskTexture ：ToonSkin用于调整Transmission Alpha的贴图，通过ID来采样指定的行。
- ToonSkinDataTexture：ToonSkin的存储Toon数据贴图，通过ID来采样指定的行。
## 渲染功能
### BasePass
### DiffuseIndirectAndAO
- SSGI：建议单帧画面开启。
开启SSGI：
![|800](https://raw.githubusercontent.com/blueroseslol/ImageBag/master/ImageBag/ToonRendering/SkyLight_DisableDistanceFields(SSGI).png)
关闭SSGI：
![|800](https://raw.githubusercontent.com/blueroseslol/ImageBag/master/ImageBag/ToonRendering/SkyLight_EnableDistanceFields(SSGI).png)
### Lighting
- ShadeModel ToonSkin
- 预积分实现。
### ReflectionEnvironmentAndSky
- 天光需要为Dynamic并且开启Shadow选项。
- 是否开启距离场对会让天光产生AO效果.理论上开启距离场AO后的结果才是正确的，但效果并不理想，所以需要调整一下天光下半球的颜色，也可以作为添加细节的方法（最好还是通过HDR贴图）
半球0灰度：
![|800](https://raw.githubusercontent.com/blueroseslol/ImageBag/master/ImageBag/ToonRendering/SkyLight_EnableDistanceFields(SSGI).png)
半球20灰度：
![|800](https://raw.githubusercontent.com/blueroseslol/ImageBag/master/ImageBag/ToonRendering/SkyLight_EnableDistanceFields_20GrayLowSphere(SSGI).png)
天光对于SSS效果影响，提升其SSS效果也可以使用ToonRenderingWorldSettings 的SubsurfaceColorAlphaForSkyLight与SubsurfaceColorOpacityMultiplier。
关闭天光：
![|200](https://raw.githubusercontent.com/blueroseslol/ImageBag/master/ImageBag/ToonRendering/SSS_SkyLightDisable.png)
开启天光：
![|200](https://raw.githubusercontent.com/blueroseslol/ImageBag/master/ImageBag/ToonRendering/SSS_SkyLightEnable.png)
#### IBL
主要是为了实现类似sakimichan的部分画作有这种天光产生的效果：
![](https://cdn.jsdelivr.net/gh/blueroseslol/ImageBag@latest/ImageBag/Images/20220930171440.png)
![](https://cdn.jsdelivr.net/gh/blueroseslol/ImageBag@latest/ImageBag/Images/20220930171503.png)
![](https://cdn.jsdelivr.net/gh/blueroseslol/ImageBag@latest/ImageBag/Images/20220930171515.png)
这样的效果一般可以通过打光来实现，下图是拍摄于5~6月 早上7：20~7：40分。可以看到与上图类似的冷暖打光效果。
![](https://cdn.jsdelivr.net/gh/blueroseslol/ImageBag@latest/ImageBag/ToonRendering/SkyLight_WarmCoolEffect.png)
经过若干尝试，最后使用像素亮度来判断暗部与亮度Mask。最后使用ToonRenderingWorldSettings 中的IBL相关属性来控制效果。
![](https://cdn.jsdelivr.net/gh/blueroseslol/ImageBag@latest/ImageBag/ToonRendering/SceneColorLumenMaskWithMask.png)
这里用了一个0.01的Smooth以及5的Multiper：实际上不会那么明显。
![](https://cdn.jsdelivr.net/gh/blueroseslol/ImageBag@latest/ImageBag/ToonRendering/IBLMultiperEffect.png)
其他游戏比如破晓传说也使用IBL来进行辅助打光。
将包括辅助光在内的灯光烘烤成立方体地图（制作光照环境HDR贴图）
- 旋转以配合光源的光轴
- 将光面与光源的方向对齐
- 有方向性的正确遮蔽
- 亮度和对比度：艺术家调整的
- 皮肤和眼睛：对比度低
- 在UE4中，这可以很容易地在编辑器中改变。
![](https://cdn.jsdelivr.net/gh/blueroseslol/ImageBag@latest/ImageBag/Images/20221020151650.png)
![](https://cdn.jsdelivr.net/gh/blueroseslol/ImageBag@latest/ImageBag/Images/20221020151725.png)
### 后处理
相关的选项位于后处理盒子-RenderingFeatures-Toon中。
#### ToonBloom
只有一个UseToonBloom用于开启/关闭ToonBloom效果。其余的参数与自带的Bloom通用。与自带的Bloom的区别在于可以通过ToonData来控制Bloom强度，以此来实现一些降低某一些区域亮度很高的区域（自发光）的Bloom效果，不会出现过曝情况。反之也可以使得一些不太量的地方拥有较大的Bloom效果。
因为使用PBR的方式来处理Bloom，很容易导致泛光部分发白。而我们需要的其实是一个带颜色的光晕。
![](https://pic4.zhimg.com/80/v2-0d8475dd3d5ea6670face528f575c48f_720w.webp)
#### SNN
油画效果。实现是的是一个近弱远强的油画效果。
- SNNPower：用于开关SNN效果。
- SNNSampleRadius：SNN的采样半径（远处）。采样半径越大油画效果越强。
- SNNMinSampleRadius：SNN的近距离插值的最小采样半径。0即为近距离不采样。
- SNNStartInterpolateDistance：SNN强度开始插值的距离
- SNNEndInterpolateDistance：SNN强度结束插值的距离
## 用户使用说明
### 前置步骤
1. 在插件管理器确认UTToonRendering插件已经启用，并在ProjectSettings->Engine->GeneralSettings->DefaultClasses中，将WorldSettingsClass设置成`ToonRenderingWorldSettings`。
2. 检查天光是否为Dynamic，以及是否开启Shadow，同时调节Lower Hemisphere Is Solid Color，让其稍微亮一些。如果使用距离场阴影，那角色需要有胶囊体，场景也需要构建较为准确的距离场
### 角色制作顺序
1. 绘制贴图 （建议使用Kama的材质）
1. 除了基础的BaseColor、Metallic、Roughness、Specular、AO贴图外，SubsurfaceColor与Opacity尤为重要。
2. 根据需求来绘制ToonDataB的OutlineColor、IDMapForOutline与OutlineMask贴图。
2. 在ToonRenderingWorldSettings中设置新的ToonSkinData，并且在材质中修改ToonDataID使其对应。
1. FalloffRampCurve与TransmissionRampCurve比较重要。
2. 调节SubsurfaceColorAlphaForSkyLight 与SubsurfaceColorOpacityMultiplier 。
3. 适当调节后处理。
### 虚拟拍摄问题
在Project - Engine - Rendering - PostProcessing 中将Enable Alpha Channel Support in PostProcessing 设置成`Allow Throught Tonemapper`。默认是`Disable`。

1072
03-UnrealEngine/卡通渲染相关资料/厚涂风格笔记/厚涂风格研究与开发笔记.md Normal file
View File

File diff suppressed because it is too large Load Diff

512
03-UnrealEngine/卡通渲染相关资料/厚涂风格笔记/知乎FlashYiYi的卡通渲染分享.md Normal file
View File

@@ -0,0 +1,512 @@
---
title: 知乎FlashYiYi的卡通渲染分享
date: 2022-10-12 14:43:12
excerpt:
tags: 卡通渲染
rating: ⭐⭐
---
## 目录
- [[#一些较少人提过的二次元渲染方法]]：https://zhuanlan.zhihu.com/p/539950545
- [[#低成本皮肤渲染 Pre-integrated Skin]]：https://zhuanlan.zhihu.com/p/35628106
- [[#卡通风格场景的定制化技术部分]]：https://zhuanlan.zhihu.com/p/338334377
- [[#PBR光照体系下的卡通渲染光照模型]]：https://zhuanlan.zhihu.com/p/166147653
## 低成本皮肤渲染 Pre-integrated Skin
GPU Gem3的预积分文章：https://developer.nvidia.com/gpugems/gpugems3/part-iii-rendering/chapter-14-advanced-techniques-realistic-real-time-skin
曲率烘焙代码（Unity）：
```c++
v2f vert(appdata_full v)
{
v2f o;
o.uv = fmod(v.texcoord.xy, 1);
o.pos = float4(o.uv * 2 - 1, 0, 1);
o.pos.y = -o.pos.y;
o.vertex = v.vertex.xyz;
o.normal = v.normal;
return o;
}
fixed4 frag(v2f i) : SV_Target
{
float3 worldPos = i.vertex;
float3 worldBump = normalize(i.normal);
float cuv = length(fwidth(worldBump)) / length(fwidth(worldPos)) / 10000 * _CurveFactor;
return fixed4(cuv, cuv, cuv,1);
}
```
## PBR光照体系下的卡通渲染光照模型
### 处理偏色
所有HDR的卡通渲染游戏都会遇到这个问题：ToneMaping以后饱和度变低了。更糟糕的是纹理的对比度也降低了，导致图片丢失了大量细节，甚至连嘴都看不到了。
通常只能在贴图上反向增加饱和度和对比度，但非常不直观，而且精度损失严重。饱和度可以后处理加回去，对比度可没辙。
我用了个自己的骚方法：拟合ACES公式的逆运算。
> color * (2.51 * color + 0.03)) / (color * (2.43 * color + 0.59) + 0.14
这是ACES的一个简化公式，只保证了基本亮度。我用Excel拟合了它的逆运算，结果如下：
> 3.4475 * color * color * color - 2.7866 * color * color + 1.2281 * color - 0.0056
不准确但是差不多了。然后用它来处理传入的固有色贴图，通过和原本的贴图颜色lerp选择一个合适的混合比例，就可以在最终显示上还原出和原贴图几乎一样的结果。
它的缺点是同样参数在暗处会显得对比度有些过高，想做的完美还需要根据光照强度来调整lerp的比例（注意是光照强度而不是最终辐射度，因为我们要保证是的纹理内容的对比度，乘过纹理后就没法得知这个原始的对比度了）
如果可以回避偏色问题，那么绘制贴图的时候就可以直接采用原画的结果。和PBR不同，卡通渲染是个极度依赖原画能力的课题，你没有固定的材质库可用，也没有什么预定参数，决定结果美观的就是贴图的质量，出现偏色是致命的。
而且暗部对比过高的现象也证明了，仅仅靠改贴图颜色无法解决这个问题。
而且在ACES下好看的材质纹理，对比度需要非常高，也非常难看，一般美术很难直接画或者选出符合要求的颜色，大家都是在用色板的经验数值取色，实际操作根本不可能做到符合ACES的偏色要求。
所以这可能是本文最有价值的东西。
当然，更聪明的做法是根本不用ACES，甚至不用ToneMaping。一个固定亮度，而且没有室内外切换的卡通渲染游戏其实根本不需要ToneMaping，一切都可以原样画出来，毕竟物理光照规则对它来讲并没有意义。
严格来讲，甚至不需要线性空间。在卡通渲染下，实际上伽马空间的光照结果更加美观。否则PS也不会用伽马作为图层的混合方式了。
但是如果你还打算用PBR来节约画师的工作量，还希望借用PBR的那些“好东西”，就需要保留ToneMaping和正确的物理光照模型。现在的修正偏色方案，就是个折中的方法。
### 自定义Bloom
这基本是个卡通渲染游戏都会做的东西，但这次我分别处理了物体的面光和背光Bloom，可以让亮部单独产生Bloom的效果。
从“物理正确”角度，其实也是需要这样做的。因为Bloom的强弱其实代表了受光的强弱，但是卡通渲染的光照强度并不会完全通过颜色表达出来。为了保持画面的饱和度，亮部的实际亮度并不会太高，而暗部的亮度常常也不能过暗。
因此，将Bloom和颜色剥离开来，反而更加“物理正确”。
卡通渲染还特别喜欢让头发和皮肤具有更高的Bloom强度，使得它们看上去更加具有光泽。
而为了保持发光物体的饱和度，实际颜色值不能过高，从而也需要用高Bloom值来补齐原本想要的泛光。
我也想过是否可以把实际亮度和颜色在光照体系下就直接拆分开，把亮度当作RGB之外的第4个颜色分量，然后用“亮度”值直接算Bloom，这样处理Additive物体时也更加方便（现在我直接屏蔽了Additive物体的Bloom值写入）。
但这样改的东西满多的，所有涉及光照的部分都要改，而且这需要让Bloom值是个HDR的值……所以暂时没动。
真要认真做，可能那才是最完美的方案。
## 卡通风格场景的定制化技术部分
### ToneMapping
![](https://pic2.zhimg.com/80/v2-cabc10a6f3ad9ac5b739f71dcb8fc635_720w.webp)
在使用标准ACES的时候，如果亮度调的较低，暗部细节就会严重丢失（图2），而如果调高亮度至能看清暗部细节，亮部细节就会丢失（图3）。
其中一个方案是：可以考虑在无偏色的原始颜色和偏色后的颜色根据亮度做一个插值，保证小于1的区域是无偏色的，然后渐渐过渡到需要偏色的区域。然而我试了下，好像我之前的反转校色方案依然可用（图3）
![](https://pic4.zhimg.com/80/v2-52c0fc8d665043ffba10ed969df9e06b_720w.webp)
做法是在图2的基础上对人物纹理的颜色输出做以下处理（处理强度可以通过和原颜色lerp来控制）
>color = 3.4475 * color ^ 3 - 2.7866 * color ^ 2 + 1.2281 * color - 0.0056
其实这个公式相当于预处理了一次纹理，将纹理的高光和暗部区域拉长了，这样就不怕明暗细节被ACES破坏了。
本来想换个正常点的解决方案，结果……至少这也是个可行的解决方案。
### 半影色调（Penumbra Tint）
![](https://pic3.zhimg.com/80/v2-7d4641bde1784daf9b9837d46ac2af22_720w.webp)
就是上图这样的东西。Unity在HDRP里竟然提供了这个功能，生造了个词叫Penumbra Tint，也是满符合Unity自己的人设的。
我是当初研究新海诚动画的画面特征的时候发现的这个东西。这个元素，也是大部分模仿新海诚风格渲染作品所缺失的最后一步。
![](https://pic2.zhimg.com/80/v2-2b4ac4a170f46bab84226cec11af6385_720w.webp)
![](https://pic2.zhimg.com/80/v2-99f4d3b9a8da3584db411401525350d5_720w.webp)
![](https://pic2.zhimg.com/80/v2-f733a54747208c5f575df9e3c8b16381_720w.webp)
![](https://pic4.zhimg.com/80/v2-e6dfe13ac6ad99bf3c60128958043087_720w.webp)
我起初也觉得这个元素是个见缝插针加饱和度的“艺术设计”，直到我在实景中看到了这个现象（拍的不好，肉眼看更明显）
![](https://pic4.zhimg.com/80/v2-8c6bdeae988eec851780dac1ed07509b_720w.webp)
我也不知道这玩意儿是怎么出来的，泊油马路也不是次表面材质啊？
总之，从结果上来看，人眼似乎是可以接受这种“在明暗交界处饱和度提升甚至换个颜色”的表现的。所以作为风格化作品，强化这个表现也就一点问题都没有。
这个元素比较类似次表面材质的效果，所以也可以用类似（差不多是完全一样）的方式来实现。分为两部分：
- 投影部分在软阴影部分叠个额外颜色就好了，次表面就是这么做的，区别就是UE的实现里，亮部也同样需要叠加颜色。
- 而非投影部分的次表面特性有两个实现。一个是预积分LUT，相比普通Ramp还需要用曲率修正LUT UV的V坐标，否则半影部分在缓慢曲率上会过宽。另一个就是基于屏幕空间卷积的SSS，可以很完美的实现这个效果。
所以这个玩意儿大概真的就是个次表面材质特性的艺术延申？万物皆次表面？
![](https://pic4.zhimg.com/80/v2-67949f18cd7e666aa46f85948439eaaf_720w.webp)
或者也可以是上图这样的情景：虽然整体光照都是橙色，但是亮面一侧由于亮度过高导致了泛白，半影部分恰好卡在了不会泛白的亮度区域，保留了原色，最终形成了这个视觉效果。
总之，这两个视觉效果如果用物理打光实现，出现条件较为苛刻。所以在技术实现上，要提供“脱离亮度限制，硬把这个效果挖出来”的功能。其颜色和强度应该由光源和材质双方决定。
如果不希望增加延迟光照下GBuffer的数量，也可以完全由光照决定半影颜色和强度，仅通过材质蒙版来过滤不希望出现这个效果的物体。这个效果也可以仅通过增加半影处饱和度来实现，这样不依赖GBuffer也可以让不同物体的半影颜色互不相同。
![](https://pic1.zhimg.com/80/v2-77d40b908ae38391e0ee49df35d16694_720w.webp)
原神人物上的Ramp其实也是基于这个现象的产物。对于缺乏细节的二值化光照，这是一个很好的补充细节。
### GI
GI的比重，是区分风格化渲染和真实感渲染的一个很重要的标志。（这里的GI主要指漫反射GI）
GI是表达真实感很重要的一个要素，只要把GI做对，画面就会显得真实。换言之，只要GI是对的，不管怎么做看着都会像照片——而这是风格化渲染需要重点避免的地方。
一个方案是干脆去掉GI，手动补光，退化回PBR之前的模式，典型的例子就是原神。缺点自然是光照平，且单调。但是正因为单调，控制起来也容易，每个地方的颜色都可以单独处理。
另一个方案是反过来加强GI，这同样也能达到“不真实”的目的，色彩区域的融合也可以让多个物件浑然一体。缺点就是控制起来比较困难，只能做成啥样就啥样。
日式卡通风格是从纸上作画转移过来的，自然平涂色块会比较多（毕竟人手绘制GI难度较高），所以风格比较接近无GI的效果。如果想符合日系风格，GI就是一个需要压低的元素。
比如下图的情况，如果放任GI的染色效果，这么大片的绿色草地必然会影响到房子墙壁的颜色，无法保持这么高的色彩对比差异。
![](https://pic3.zhimg.com/80/v2-7f84f80a7c68f5486d111a4f1f760606_720w.webp)
### Bloom
Bloom从物理角度应该是一种高亮度产生的视觉现象。
但因为NPR体系下的颜色经过了各种特殊指定，并不和实际现实亮度直接对应，很容易出现纯白区域不希望Bloom，而高饱和低亮度区域反而希望Bloom的情况。
其次，Bloom同时也是一种画面上的低频信息，为了营造一种柔和的画面“氛围”，我们也希望增加这种低频信息的比例。而强行拉高整体Bloom强度又会导致高亮度区域过曝。
所以我们需要一个自定义的Bloom缩放系数。因为从崩三开始的游戏都实装了这个特性，是否要实现它一般并不会有疑问。
具体实现的时候，最佳方案其实是准备一个单独的Half通道以储存一个HDR范围的亮度值，并在frag中将原始颜色的亮度值计算出并存入。只有这样，才能保证Alpha Blend, Additive，以及各种特殊混合模式下的Bloom值的正确性。
通常，我们并不愿意花费一个16bit的通道来实现这个效果，只愿意使用一个8bit的通道，所以只会储存一个Bloom的缩放值。这样在透明混合的时候就会出现各种麻烦。
**目前我比较倾向的方案是：**
放弃透明物体的Bloom值自定义功能，透明物体阶段并不写入Bloom值，这样也节约了带宽。而为了最终计算Bloom结果正确，必须将透明物体和不透明物体分别渲染，然后在Bloom阶段重新组合。（为什么必须这样解释起来很麻烦，信我就行了）
这个分离透明物体渲染的功能UE本来就提供了，只需要修改Bloom部分的RT组合，实现还是很简单的。而且通过配置r.SeparateTranslucencyScreenPercentage还可以获得半透物体降分辨率功能，还可以根据帧率自动进行，基本上不会不开，分离渲染导致的性能代价也就无所谓了。
事实上，这就是原神的方案，所以估计也没啥人会反对。
（原神的透明物体分辨率过低的问题确实严重。我觉得可以将部分需要精度的透明材质转为Mask材质来解决问题，Mask通过TAA抖动模拟单层半透的效果还是不错的）
虽然Flare，Bloom，Volume Light从物理角度是不同的光学现象，但它们都是画面的低频信息提供方，也可以近似处理。
风格化渲染实际上非常需要这类低频信息增强画面的柔和感，以及缓解纯色块的单调感。除了Bloom，Flare和体积光同样也是实现这一点的很好用的工具。
严格来讲，最理想的方案其实是执行两次Bloom，一次无视物理亮度给画面整体做一次模糊叠加，第二次根据亮度做正常Bloom模拟实际的辉光物理现象。但因为Bloom的性能成本较高，当然希望一次做完。
配置Bloom参数的时候要考虑倒这一点。两个Bloom的功能其实是不同的。
## 投影
投影的风格化依然遵守分频规则。
- 投影或者保持边缘清晰，或者保持一个大范围的模糊过渡，而不要在两种模式之间暧昧不清。
- 同时，需要表达一个简单清晰的形状。清晰边缘不要有尖锐的锯齿，模糊边缘的透明过渡不要有坑坑洼洼的锯齿转角。
- 同时，投影的强度依然不要暧昧不清。或者是清晰可见的，或者就直接没有，这样才能避免脏污感。
这些条件加在一起给投影制造了很多写实渲染没有的麻烦。
人物通常都需要清晰的投影边线，避免和二值化的画面元素冲突。而人物的装饰尖角又是常见元素，投影面多为弧面，这导致投影在不同方向下非常容易出现下面的凌乱边缘。
<iframe src="https://vdn.vzuu.com/SD/863f8180-510e-11eb-9c56-e6e44722d8a0.mp4?disable_local_cache=1&bu=078babd7&c=avc.0.0&f=mp4&expiration=1665570973&auth_key=1665570973-0-0-fb8c37c9b91f50fb4d73f7a55b85b02e&v=ali&pu=078babd7" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
注意看小腿和后脑勺上的投影（确实许多人会看不到问题在哪吧……）
利用距离场简化投影形状是比较直接的解决方案，但性能较差。目前比较靠谱的是手动隐藏部分难看的投影，或者使用代理投影物体。
### AO
上面说过了，现在我们要的不光是AO，它同时也包含了Local光投影的部分。
具体的要求则是：
- 需要明显的AO，但是只能出现在墙角，柜子后面这种地方，范围要比较大，且边缘要尽量柔软。
- 而小的结构周围则不能出现AO，人物身上尤其不能有。
### 笔触化
总有人想靠“水彩”“油画”“蜡笔”创造特殊的风格化效果。玩家想要“和画一样”的体验，那就将画面做得和画一样。
虽然是有实时解决方案，但实际效果却不尽人意。
![](https://pic1.zhimg.com/80/v2-295fd2c85bfc63a254f4d718e47e8b44_720w.webp)
### 日式动漫的摄影技术
https://zhuanlan.zhihu.com/p/20202161
![](https://pic3.zhimg.com/80/v2-8f44b62b6faba115b7c32c80902eafc6_720w.webp)
![](https://pic3.zhimg.com/80/v2-a75d23c16631689eed5ea01ff9d7be6a_720w.webp)
![](https://pic2.zhimg.com/80/v2-7a38041340a1a6fad6f3273c4b9f8889_720w.webp)
### 还可以参考
有人在Unity尝试实现了对应的方法
https://zhuanlan.zhihu.com/p/363790714
![](https://pic3.zhimg.com/80/v2-7b2e4291cc98020a787b3d3c754c28e6_720w.webp)
较为微弱的光感
![](https://pic2.zhimg.com/80/v2-ea2139cc43bdc7a318c9494d186eb25d_720w.webp)
添加了ハイライト
个人认为添加了这个Highlight之后才跟《动画基础知识大百科》那案例差不多……
![](https://pic1.zhimg.com/80/v2-2f6672d52b9849c51a9d6d0576d2cbe8_720w.webp)
影パラ将角色稍微压暗一些
具体的实现方法由于相对复杂一些，将在下文详细阐述
总之，将光感+ハイライト叠加上去，将影パラ乘上去，就获得我们的最终结果了
![](https://pic3.zhimg.com/80/v2-0657804df33b91af3fb2e51cb3955b2a_720w.webp)
## 一些较少人提过的二次元渲染方法
### 逆向Tonemaping
常态的做法是利用调色图层和切换不同画笔颜色来尝试一个比较好的结果，但这其实是在用人工做机器应该做的事情，费时费工而且控制精度还不高。
既然目标就是让呈现效果和原画中一致，那就用算法算出一致的效果就好了。
[【UE4】FilmicTonemapperを打ち消してみた - てんちょーの技術日誌](https://link.zhihu.com/?target=https%3A//shop-0761.hatenablog.com/entry/2019/10/14/221751)
UE4本来就提供了一个现成的逆向ACES函数可供调用，效率并不低，也可以牺牲一些精确度将其更换成单矩阵版本的。
```text
return FilmToneMapInverse(col);
```
(需要在Custom Node节点中include "Engine/Private/TonemapCommon.ush")
上面的文章则自己实现了一个可以对应更改过Tonemaping曲线情况的更复杂的逆向ACES算法，性能比原版低了很多。但可以沿着它的思路再进行优化。
### 加权生成描边法线
[flashyiyi：修复发尖的描边法线](https://zhuanlan.zhihu.com/p/405518306)
之前讲过一次，用法线所处的三角形夹角作为权重进行加权混合。
其实这个算法也是许多DCC软件自动法线平滑的算法，我们一开始不用纯粹是自己菜，直接平均的结果怎么可能是对的。
### SDF内描边
[flashyiyi：用SDF处理卡通内描线的锯齿问题](https://zhuanlan.zhihu.com/p/113190695)
这个方案最初就是我提的，实际应用效果还不错，也就是侧面观察的时候会有些瑕疵。
除了可以确保描线不出现马赛克外，还可以随视角距离变更宽度，和Backface描边的缩放效果保持统一（几乎无法相互分辨）。
这个方法生成的描线在靠近观察的时候很容易产生扭曲，但这种扭曲的质感反而会形成一股笔触的感觉，也不全是坏事（接受不了老老实实画本村线去）
![](https://pic4.zhimg.com/80/v2-888a931a98b849e41d604a98808c3ae3_720w.webp)
原图的描线并没有擦除，凑合看看 现在我使用的SDF生成工具是下面这个：
[https://github.com/Chlumsky/msdfgen](https://link.zhihu.com/?target=https%3A//github.com/Chlumsky/msdfgen)
还可以选择生成多通道SDF来保留尖角。但实际情况下需要锐利尖角的情况很少，我用的依然是单色SDF的版本。
![](https://pic2.zhimg.com/80/v2-04de66ad9ac642b68db5d053e4f2fa4d_720w.webp)
### 烘焙顶点曲率
![](https://pic2.zhimg.com/80/v2-d6b59ffcf779cfce327114a723fb1e91_720w.webp)
Ramp的窄过渡区域在部分情景下实际上是希望保持等宽的，否则在平直平面上会散开。
烘焙曲率基本可以解决这个问题。
不要烘焙到纹理，顶点曲率基本够用，还省去了模糊的步骤。在计算平滑法线的同时顺便计算一下就好了。
除了Ramp外，也可以用来控制边缘光照的宽度。
### 半视角方向自阴影
现在一般都会用一个逐物体的Shadowmap来绘制角色的自阴影，以便获得较高的精度。
但锐利的自阴影依然容易在光照方向和切线接近平行的时候，出现杂边。
改变逐物体阴影的光照方向，将原始的光照方向和视角方向相加归一化作为阴影方向，基本可以避免混乱边缘的出现，一般人也看不出区别（代价是即使光照不变，视角变化的时候阴影位置也会有轻微变动，但意外的并不会有违和感）
### 反转阴影投射屏蔽背面Shadowmap
把ShadowCast时的背面剔除改为正面剔除。
这样一般凸多边形物体的投影就不会固定生成在自己的背光处了，但依然会生成到其他物体上。如此一来，我们就可以通过改变NoL的光照范围，让人物背后也可以获得更大范围的光照，这也是强制调整光照仰角所必须的。
![](https://pic1.zhimg.com/80/v2-22d9c50d3bd9f24f7c9c75ce43d47db8_720w.webp)
但人物并不是完全的凸多边形，所以自阴影其实还是会出现在物体背面，只不过不是“全都会出现”而已。实际情况只要调参不要太过分就不会露馅。
（当然，如果没自阴影，一开始也没这个问题。但自阴影还是要有的。）
### RAMP下的多光照体系
二次元渲染用的二分法光照有一些固有的问题：
- 多个二分法光照同时出现，很容易导致光照边线的交错，变得难看。一般只会有一个二分法的光照。
- Ramp本身就是一个单光照体系下的产物，Ramp颜色本身就包含了环境光的结果。那么环境光应该如何和直接光混合呢？如果环境光是额外叠加上去的，最终呈现的效果就不是Ramp图所期望的。
>我选择的办法是，Ramp结果独立计算，计算完直接乘到其他混合完毕的光照结果上。这样能完整保留Ramp本身的特征。
>Ramp外的光照如果直接根据NoL计算，始终会有塑胶感。现在常见的方法是忽略法线，或者取视角方向作为法线。我选择的是后者。环境光也同样处理。
如此一来，整个人物会使用一个统一的，平直的光照结果。这样就能保持二次元渲染的平面特征，同时和周围物体的亮度保持一致。
>更关键的是，它解决了“面光处看到的阴影不能暗（通透）”和“背光和阴影下的人物依然要变暗，保持和周围物体亮度一致”之间的矛盾。因为面光处的整个人是整体变亮的，而背光处是整体变暗的，通过视角变化以不易察觉的方式在两个亮度之间过渡。
### 法线无关的光照渐变区域
我将用于代替光照方向的视角方向，改为了一个基于视角的筒状模型：
这样就可以让角色获得一些和法线无关的光照渐变区域，不至于任何时候都只有统一的光照颜色。
![](https://pic1.zhimg.com/80/v2-2d7e7ff1a37eb3909144449600356c0c_720w.webp)
看视频才能懂是怎么做的，根据灯光在屏幕空间的位置为圆心，根据半径绘制一个Alpha来控制光照强度。
- **表现不出光照的方向性**
用和周围光照相关的高亮度边缘光来体现光照方向，身体上出现的高光也使用同样的规则。
![](https://pic3.zhimg.com/80/v2-fe0f38bbbca473c045a72d29e17aa59e_720w.webp)
此外，这个方案本质修改的是法线，所以可以很大程度兼容基于SH的烘焙光照。烘焙和实时在默认配置下只有少量的区别。
而这个方案改完后会很大程度忽略物体法线，但细节法线又是表现材质的重要环节。因此，我后来又将细节法线重新应用于修改后的法线上，尽可能保留了原本的材质感（对于PBR的部分，这点是很重要的）
这个平面光也可以和原本的正常光照混合使用（以多一点塑料感为代价增加一些光照变化，通常也可以接受）
比较类似
![](https://pic1.zhimg.com/80/v2-02b7b308f614aa436db3329c865f23e4_720w.webp)
<iframe src="https://vdn3.vzuu.com/SD/856046aa-99ed-11eb-b557-e2a3e4b29ac2.mp4?disable_local_cache=1&bu=078babd7&c=avc.0.0&f=mp4&expiration=1665648277&auth_key=1665648277-0-0-c02d32bd3343ac9f90b23c6aef54ac37&v=tx&pu=078babd7" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
最终方案 将渐变的起点轨迹调整为圆弧
既然方块不行，那干脆用圆得了，让渐变的起始点都在圆上，那它的渐变旋转想必是非常平滑的，
那么这次的代码就非常简洁了：
```cpp
float2 newUV_SS = (scrPos - centerPosSS) / float2(lightRampWidth, lightRampHeight);
float2 intersectPoint = normalize(lightDirVS.xy) * _RampCircleSize.x;
float lightRamp = max(0, 1 + dot(normalize(lightDirVS.xy), newUV_SS - IntersectPoint));
```
![动图封面](https://pic4.zhimg.com/v2-6667dc4086f2b1a69a1528e78c2afd8b_b.jpg)
经过简单的调整，这个方案果然让渐变的旋转“自然”了许多。
而影パラ就是用光感的值进行一些调整后获得，就不再多说了。
那么接下来讲讲关于Highlight的部分，
其实Highlight很明显就是边缘光，那先按边缘光的做法做着，
关于边缘光，其实大家也非常熟悉了，个人采用的算法是
**pow(saturate(1 - dot(viewDirectionWS, normal)), _RimLightSmoothness)**
非常易懂的算法，笔者也尝试过使用次表面散射来模拟，但发现跟普通边缘光的效果相差无几，还是采用了上述简单易懂的边缘光算法。
![](https://pic1.zhimg.com/80/v2-e076bf1764ac9069fec2572cfc76d7c8_720w.webp)
接下来结合之前算的渐变值来进行边缘光的范围限制就行了
![](https://pic3.zhimg.com/80/v2-237a9f48c3aed1fb10f45f9bb3992f1a_720w.webp)
效果正如各位之前所看到的那样
### 影颜色叠加
二次元渲染的阴影颜色是不能直接乘在原始颜色上的，因为会越来越暗，饱和度也会变低。
一个常见的做法是，亮部一张图，暗部一张图，不采用乘法而使用Lerp作为两者的插值，这样就能确保暗处的颜色可以自由配置。即使在使用Ramp的情况下，也可以将Ramp的A通道指定明暗贴图的插值依据。
但这种做法多多少少有些笨重，两张图画起来也麻烦。
而原神为了省掉ShadowColor这张图，采用了多个Ramp选择+Index标记这种方法，最终也会遇到同样的问题。
其实这个问题用GGXX的方案会比较好。它混合阴影的方式是先加一个白色然后再乘阴影颜色，这样阴影就能突破原颜色的限制，最终结果很大概率是符合要求的。加的这个白色的亮度会决定阴影的亮度，这样二级阴影的颜色也可以被同时确定。
Ramp方案下，依然可以用A通道来表示这个附加的白色的强弱，最终更好地通过Ramp来规定暗部颜色。
### 从烘焙光照中获取光照方向
在没有直线光存在的情况下，Ramp光照将会消失，效果会很不好。
通常方案是寻找场景里最近的一个点光源来作为Ramp光照的依据，可以用Volume来实现。原神也是有这个效果的。
然而实际上，烘焙的SH光照数据里，SH1就是此处光源的大致方向。将它拿出来归一化一下就可以用了。
### 用UV2来偏移高光
目前卡通高光一般都是画死的，视角只会影响亮度。
画死当然不好。所以一个折中方案是让高光区域可以随视角进行一定的偏移（也有缩放的做法，总之要让它有一定变化）
我没有选择把高光画在主纹理上，而是画在另一个地方，并使用UV2。这张图在UV2上的角度和缩放将会决定它在视角变化时的偏移方向和幅度，于是也可以用来模拟肩膀处的光点以及大腿上的竖条高光。
而且这样一来，高光图将会使用独立的贴图精度和范围。不会出现整个人高光就这么几处，却要占据覆盖人体的整张通道图的情况。而且它还可以和细节图案纹理共用UV2。
并不是什么特别的做法，但我看基本没人提，网络上的全是FLowmap一类的玩意儿。图案整体偏移，用第二套UV控制才是最简单的做法。
### 透射
![](https://pic1.zhimg.com/80/v2-bdebe2d54a02b05f7450125c0cacc50c_720w.webp)
一个比较简单的效果，让薄衣服可以违反NoL的规则始终被照亮。手动标记区域。
可以很容易做出所谓“通透感”。
基于这个原理，我还在人物边缘根据法线加了一些次表面散射的效果，但说实在话效果并不明显。
![](https://pic1.zhimg.com/80/v2-52e53a3eac52781da5152250c95763c0_720w.webp)
估计很难看出两者的区别，而且还需要画区域屏蔽鼻子处的漏光
## 头部FOV修正
![](https://pic1.zhimg.com/80/v2-12e54f56ceee302d4a365a2112579e4c_720w.webp)
将脑袋压扁来修复FOV造成的畸变是离线常用的方法，但我还没见谁真的在常态的游戏流程中使用。主要原因在俩：
- 如果你一直使用50左右的低FOV，畸变问题并不显著。动作游戏多使用低FOV，只有射击游戏才会用90的高FOV。所以这不是一个急需解决的问题。剧情过场中也可以（本来也应该）降低FOV。
- 压扁物体会导致各种各样的问题（如排序问题和穿模），深度值可不是随便能改的东西。
对于前者，我必须得说，本来人家离线动画里用的FOV也不高。人家选择压扁脑袋，是为了获得“极致”的表现。畸变不明显又不代表没有畸变。
对于后者，这就是个技术问题。而它是可以解决的。
我选择的方案不是压扁模型（A移动到B），而是使用结果等价的“平移”(B')来取代压扁，保持深度的正确。
（实际使用的时候是既压扁也平移，选择其中顶点偏移距离最短的结果，即B''）
![](https://pic4.zhimg.com/80/v2-909193d5d4fba671ae290f59fd11d833_720w.webp)
篇幅有限我就不解释了，就是个线性代数问题。
![](https://pic4.zhimg.com/80/v2-6ffd372408eaccf1407981a91fb0c33b_720w.webp)
### 柔光光照
卡通光照大幅忽略了物体法线，在使用颜色光照的时候，很容易导致整个物体的颜色都变得非常单一。
参考离线2D动画的打光技巧，我选择让光照结果通过柔光的方法应用到BaseColor上。
但最后，我分析柔光的混合公式，总结了一个近似的，能够更直接地实现我的目的的公式。
A * lerp(B,Lum(B),A)
即，原图中的色彩通道亮度越高，光照的饱和度就越低。这样图象中较亮的部分就不会受到光照颜色的影响，但暗处则会正常受到影响，效果如下：
![](https://pic4.zhimg.com/80/v2-0607e852eff4118d27edf3b9703800eb_720w.webp)
![](https://pic3.zhimg.com/80/v2-4cc757acad06e8c4321195179bb5a75e_720w.webp)
如果光源是白光，则和之前没有任何区别。
不过，实际使用的时候，这个效果也会导致人物很难被颜色光改变颜色，需要和正常的光照结果再Lerp一下。
### Diffusion
GGXX和蓝色协议都在分享里提到了Diffusion，解释说是另一个Bloom，但却没有后续的细节。
我参考动画流程，采用了小卷积高斯模糊后和原图像素取Max的做法（变亮混合模式）
因为是取Max，并不会提高亮处的亮度，只会拉高暗部的亮度，符合我们的需要。而且这样的效果是普通Bloom无法实现的（普通Bloom亮部怎么调都肯定会更亮）
不过为了做出蓝色协议原图的效果，我还额外再用了一次叠加混合（相乘）。亮度会下降一些，且颜色变深。具体怎么用看实际情况吧。
![](https://pic2.zhimg.com/80/v2-a39a8168cc4666c696198b61b21d72e5_720w.webp)
![](https://pic2.zhimg.com/80/v2-a829e3a3fe0ef1bc97bdaf14eb70d181_720w.webp)
由于只是一个小卷积模糊和简单计算，额外性能成本其实不高。
### SNN预处理纹理
![](https://pic3.zhimg.com/80/v2-7f561429b53aeb91e5ba97c2c702cc0e_720w.webp)
就是蓝色协议介绍的场景纹理处理方法，效果是让远处的纹理呈现色块化质感，看上去更像画。
我采用的是在图片预处理阶段对各级Mip分别应用SNN滤镜的方法，低Mip和高Mip的卷积核一样。但由于图片大小不同，低Mip变化小，高Mip变化大。
最后就能自然地形成上图的效果，且渲染成本为零。
### 染色雾
重点在于，NPR场景会使用一个写实绝对不可能用的手段：
对渲染结果直接用叠加混合（乘法混合）。
因为这是物理世界中不存在的现象，但是却是动画后期非常常见的做法。
所谓染色雾指的是：计算雾效的时候不用Additive混合，也不用Alpha Blend混合，而是用Multiply混合（当然全用Multiply也不行，这只是一个额外的效果）
这使得你可以很轻易地控制场景各部分的颜色，而不导致原有信息大幅丢失。
实现方面用一个Multiply混合的读深度的透明物体就可以，也可以在原本的雾效计算中加入此元素。
（之前也有人搞过Multiply光照，本质上和Multiply雾是一回事）
![](https://pic1.zhimg.com/80/v2-9a60dfbf7cd3ebb23abd1818992e8ee0_720w.webp)
当然美术能不能用好这个工具就是另一个问题了。
（我并不是在嘲讽，而是这类体系外的工具，对于已经形成体系的美术来讲确实很难融入他的体系内。而缺失这部分工具正是场景始终不“卡通”的其中一个重要原因）
蓝色协议的间接光按距离染色也是这个机制的一个应用。

103
03-UnrealEngine/卡通渲染相关资料/厚涂风格笔记/知乎骨鱼子的厚涂实现.md Normal file
View File

@@ -0,0 +1,103 @@
---
title: 知乎骨鱼子的厚涂实现
date: 2022-10-12 14:25:32
excerpt:
tags: 卡通渲染
rating: ⭐
---
## 前言
主要使用多个LUT混合的方式来实现厚涂的效果。
![300](https://pic4.zhimg.com/80/v2-40d06be17c63ffbfdf7278fa94cc586b_720w.jpg) ![500](https://pic2.zhimg.com/80/v2-34eae06ce1c6db841df4743564281ded_720w.jpg) ![500](https://pic1.zhimg.com/80/v2-7c82b53ceddd3e6ee2f789145ccccde4_720w.jpg)
## 文章摘要
[[厚涂风格实时二次元渲染(0)-前言]]
[[厚涂风格实时二次元渲染(2)-厚涂风的皮肤渲染]]
## 什么是厚涂与半厚涂
https://zhuanlan.zhihu.com/p/467348694
厚涂是发源于**西方油画**的一种绘画技法。 画家在画布上使用很厚的颜料，利用笔刷或画刀进行涂抹，就像抹奶油一样，故名“厚涂”
在这样的绘画工艺下，导致厚涂色块十分分明。因为是用很厚的颜料，所以渐变实际上是离散的，这就和我们的赛璐璐有一点像了。
离散的同时，由于两个颜料的相互融合，边界却又十分的柔和
![](https://pic3.zhimg.com/80/v2-3e2584ae4d9f900e2671d69b652f01d6_720w.png)
柔和的边界
为了让皮肤的质感更为可控，我们采用第二章N*N的LUT，但这张LUT我们不基于物理去生成，而是跟着**感觉**走
实际上，我们需要一个散射光强度与直射光相补正，而这个光就是天空光。
1.天空光是蓝色的，所以我们考虑让皮肤看上去有蓝色的散射感。
2.与此同时，在皮肤边缘，我希望有一个体现BTDF的效果，在二次元下，我希望这个颜色是粉粉的。
3.散射感在直射光射到的地方肯定会体现的不充足，在直射光射不到的地方才会比较多。
4.第二条说的BTDF肯定也得是和光照强度绑定的呀！
综上四条，我们下一步控制皮肤质感的LUT，必然有一维是 N·L ，用以表示直射强度。考虑到皮肤边缘需要BTDF，另一个维度应该是 N·V 。
这样的话我们依然需要LUT，只是这次的LUT不需要积分（毕竟也不基于物理），
直接凭感觉随便拿PS什么的画一下就好了。
这个补正方法的灵感来源于一个效果很好的Fake SSS的着色：
[Shader Forge - A visual, node-based shader editor | Page 54 - Unity Forum](https://link.zhihu.com/?target=https%3A//forum.unity.com/threads/shader-forge-a-visual-node-based-shader-editor.222049/page-54%23post-1903768)
![300](https://pic4.zhimg.com/80/v2-40d06be17c63ffbfdf7278fa94cc586b_720w.jpg)
二次元可以使用的LUT
以天空为背景色，直射光使用肤色作为相应，然后边缘使用粉粉嫩嫩的颜色。
至于这块儿棕色，因为我们是半兰伯特模型，所以一般而言不会采样到太多。
二次元可以使用的LUT
把这张LUT和上面pre-integrated以相同的方式(但纵坐标轴不同)也应用进去，就完成90%的效果啦
![500](https://pic2.zhimg.com/80/v2-34eae06ce1c6db841df4743564281ded_720w.jpg)
赛璐璐Only
![500](https://pic1.zhimg.com/80/v2-7c82b53ceddd3e6ee2f789145ccccde4_720w.jpg)
### 3.一点小方法
（1）另类高光
![](https://pic3.zhimg.com/80/v2-fcafe3f2e9e0cf12887b6bb95ef248a2_720w.png)
肩头上有高光
可以看到有些二次元厚涂作品有明显不基于物理的高光，这是因为二次元美少女每一个都滑溜溜的。
这个效果在我们使用了不基于物理的补正LUT后非常简单，在LUT的左上角点一个光点就可以了。
（2）屏幕空间补光
![](https://pic3.zhimg.com/80/v2-2a91d9ae7ff5a51329e8201c0a66ff46_720w.png)
肩头存在补光
二次元角色的光照实际上都是以好看为第一要务的。其实许多动漫都存在“两个人面对面，但是却都向光”的情况。对于二次元美少女而言，光补的越多，就越好看(雾)
[Unity URP Shader 与 HLSL 自学笔记六 等宽屏幕空间边缘光 - 知乎 (zhihu.com)](https://zhuanlan.zhihu.com/p/365339160)
可以在这篇文章学习这个套路。因为我也是学的别人的，就不在这里班门弄斧啦。
![](https://pic2.zhimg.com/80/v2-70afc5f583d1c9e3b73e4be836e880ad_720w.jpg)
补光后的效果，会让人感觉更有绘画感。
此外，将这个效果复制一份并以 normal·viewDir lerp一下，可以做出BDTF的效果
![](https://pic3.zhimg.com/80/v2-73195fb50795c9d53e2c85530ba9f1e2_720w.jpg)
厚涂作品：
https://www.zhihu.com/question/411686903/answer/1666001786
## 要素组成分析
### 1.皮肤的平滑光照
显而易见，插画风格与赛璐璐风格最大的区别就在于，皮肤对于不同的光照情况有着不同的表现。
>常见的pre-integrated模型刚好是以 N·L 为横坐标的，这与我们的RampMap一致。此时此刻我们的赛璐璐风格RampMap应该还是一个1N大小的LUT，将这个一维LUT与pre-integrated二维LUT直接逐行相乘，得到一个新的RampMap，但是1N的RampMap拓展为了N*N，纵坐标的1/r是在球面上的，如何应用到我们的复杂网格渲染中呢？
>为了让皮肤的质感更为可控，我们采用第二章N*N的LUT，但这张LUT我们不基于物理去生成，而是跟着**感觉**走
实际上，我们需要一个散射光强度与直射光相补正，而这个光就是天空光。
1. 天空光是蓝色的，所以我们考虑让皮肤看上去有蓝色的散射感。
2. 与此同时，在皮肤边缘，我希望有一个体现BTDF的效果，在二次元下，我希望这个颜色是粉粉的。
3. 散射感在直射光射到的地方肯定会体现的不充足，在直射光射不到的地方才会比较多。
4. 第二条说的BTDF肯定也得是和光照强度绑定的呀！
综上四条，我们下一步控制皮肤质感的LUT，必然有一维是 N·L ，用以表示直射强度。考虑到皮肤边缘需要BTDF，另一个维度应该是 N·V 。
这样的话我们依然需要LUT，只是这次的LUT不需要积分（毕竟也不基于物理），
直接凭感觉随便拿PS什么的画一下就好了。
这个补正方法的灵感来源于一个效果很好的Fake SSS的着色：
[[Shader Forge - A visual, node-based shader editor | Page 54 - Unity Forum](https://link.zhihu.com/?target=https%3A//forum.unity.com/threads/shader-forge-a-visual-node-based-shader-editor.222049/page-54%23post-1903768)](https://forum.unity.com/threads/shader-forge-a-visual-node-based-shader-editor.222049/page-54#post-1903768)
![](https://pic4.zhimg.com/80/v2-40d06be17c63ffbfdf7278fa94cc586b_720w.jpg)