# 蓝色协议
- https://zhuanlan.zhihu.com/p/405540279
- https://zhuanlan.zhihu.com/p/229621134

## 顶点色存储数据
用于存储一些低精度数据，插值即可
- R:阴影区域标记
- G:描边宽度(描边Mask)
- B:Ao

第二套顶点色：
- R：深度偏移，用处下文会提到
- G：用来区分内轮廓不同部位的ID
导入时被存到了UV Channel 1中。

## BaseColor、ShadowColor
- 假设固定一个全局HSV值通过偏移来获取ShadowColor。通过方向光的阴影来对ShadowColor与BaseColor插值。
- 使用HalfNol，之后使用step(Threshold,HalfNol)
![](https://pic3.zhimg.com/80/v2-c87e62b1110364d42d3ce337a9d8ce02_720w.jpg)
- 使用一个GBuffer存储NoL信息来减少相关二值化参数。
  
局部阴影（贴图绘制）与自投影阴影的叠加，推荐使用虚幻的阴影与AO叠加算法。
![](https://pic3.zhimg.com/80/v2-b623cbfbc8d647a8500d51ad7dbb1726_720w.jpg)

## 多光源策略
只有主光在计算中会计算暗部颜色，这样就能防止多光源时，暗部被反复提亮的问题。除此之外，剩下的点光源只用于提亮，并且忽略法线，只计算距离衰减，防止照出难看的结构。这样的效果还是挺二次元的。

## 高光
![](https://pic1.zhimg.com/80/v2-dda842980b2843496bae37f1577a5efc_720w.jpg)
![](https://pic3.zhimg.com/80/v2-4592dd54dc4b3b9d54c37dbe276f75f6_720w.jpg)

![[08-Assets/Images/ImageBag/UrealEngineNPR/BlueProtocol/蓝色协议_自定义形状高光.png]]

SpcularMask高光，理论上这部分应该在Lighting阶段计算的，但是第二步的绘制SpecularMask、ID？、XY轴心偏移。感觉这部分是材质编辑里计算出来得高光。

## 天光与间接光处理
为了防止环境光把角色照出立体感，所以计算环境光时，会把法线全部看作世界空间上方向来处理。同时增加了一些参数可以进行一些定制化调整。

## RimLight
贴图：
- RimLightMask
- RimLightWidth

![](https://pic2.zhimg.com/80/v2-1cd4bbf9e245b44641b43dbd4cd68e19_720w.jpg)
![](https://pic3.zhimg.com/80/v2-39dc4100774d64e8dafd3f56771a5c56_720w.jpg)
使用描边计算的方式最后计算出Rim的范围。

## 轮廓
蓝色协议的轮廓由3部分组成：
- **预先绘制**
- **Mesh挤出**
- **后处理描边**

![[08-Assets/Images/ImageBag/UrealEngineNPR/BlueProtocol/BlueProtocol_Outline.jpg]]

### 预先绘制
![[08-Assets/Images/ImageBag/UrealEngineNPR/BlueProtocol/BlueProtocol_DrawOutlineTexture.png]]

### Mesh挤出
蓝色协议用用模型扩边法绘制**头部、下颚、嘴、耳朵**区域。不使用后处理的原因是：解决使用后处理描边后，鼻子处会被勾到的问题。
![[08-Assets/Images/ImageBag/UrealEngineNPR/BlueProtocol/BlueProtocol_面挤出2.png]]
![[08-Assets/Images/ImageBag/UrealEngineNPR/BlueProtocol/BlueProtocol_面挤出3.jpg]]
![[08-Assets/Images/ImageBag/UrealEngineNPR/BlueProtocol/BlueProtocol_面挤出4.jpg]]


![[08-Assets/Images/ImageBag/UrealEngineNPR/BlueProtocol/BlueProtocol_面挤出1.png]]
>模型扩边用了单独储存共点平均法线的方式来修复分叉，是常见做法。它并没有继续解释，我在这补充一下，这个描边法线想在蒙皮网格上正常使用需要转到切线空间，或者直接储存在切线上。可以参考：【Job/Toon Shading Workflow】自动生成硬表面模型Outline Normal https://zhuanlan.zhihu.com/p/107664564

如果想做得更好一点，还可以根据法线的角度方差来增强这部分的描线宽度，这样就能把发尖做出来。**也就是制作一个Mesh后处理工具，遍历当前顶点法线与其他附近法线，根据差异度（方差）大小对法线进行伸缩**

### 后处理描边
绘制**非头部**区域，PostOutlinePass位于Lighting与透明物体绘制之间，采用4张贴图进行计算。
1. 使用Sobel过滤器进行深度检测描边。只勾数值差别较大的区域。
   - ![[08-Assets/Images/ImageBag/UrealEngineNPR/BlueProtocol/BlueProtocol_DepthTestOutline.png]]
   - 最左边的是顶点色存的深度偏移值，用它偏移中间的深度图之后就可以勾出嘴、口腔内的、脸的轮廓。
2. 使用Sobel过滤器进行Id图检测描边。只勾数值差别较大的区域。
   - ![[08-Assets/Images/ImageBag/UrealEngineNPR/BlueProtocol/BlueProtocol_IDOutline.jpg]]
3. 使用Sobel过滤器进行Normal检测描边(使用点积dot的方式)。对同一个ID区域内深度差异小进行检测，通过获取周围点法线求点乘的方式判断出轮廓。
   - ![[08-Assets/Images/ImageBag/UrealEngineNPR/BlueProtocol/蓝色协议_Normal检测描边.png]]
   - ![[08-Assets/Images/ImageBag/UrealEngineNPR/BlueProtocol/BlueProtocol_NormalDotTestOutline1.jpg]]
   - ![[08-Assets/Images/ImageBag/UrealEngineNPR/BlueProtocol/BlueProtocol_NormalDotTestOutline.png]]
4. 叠加预先画好的轮廓（GBuffer）。
   - ![[08-Assets/Images/ImageBag/UrealEngineNPR/BlueProtocol/BlueProtocol_DrawOutlineInGBuffer.png]]

最终合成结果：![[08-Assets/Images/ImageBag/UrealEngineNPR/BlueProtocol/BlueProtocol_FinalyOutline.png]]

### 眉毛勾线
头发将在BasePass之后通过实现一个ToonHairPass进行绘制。（眉毛依然在BasePass中进行绘制）以此来实现透明头发的效果。

![[08-Assets/Images/ImageBag/UrealEngineNPR/BlueProtocol/CEDEC2021_BLUEPROTOCOLにおけるアニメ表現手法(実装編)-60.png]]
![[08-Assets/Images/ImageBag/UrealEngineNPR/BlueProtocol/CEDEC2021_BLUEPROTOCOLにおけるアニメ表現手法(実装編)-61.png]]

眉毛的轮廓会绘制在Hair上。

![[08-Assets/Images/ImageBag/UrealEngineNPR/BlueProtocol/CEDEC2021_BLUEPROTOCOLにおけるアニメ表現手法(実装編)-62.png]]

### 使用Responsive AA解决Outline融化问题
Responsive AA处理：
TAA会导致勾线变糊，所以用了UE的Responsive AA，用stencil标记了勾线部分，这部分在做帧间混合时就少混合一些。虽然会导致锯齿更强，但是动态画面里是可以接受的程度。

![[08-Assets/Images/ImageBag/UrealEngineNPR/BlueProtocol/CEDEC2021_BLUEPROTOCOLにおけるアニメ表現手法(実装編)-64.png]]
![[08-Assets/Images/ImageBag/UrealEngineNPR/BlueProtocol/CEDEC2021_BLUEPROTOCOLにおけるアニメ表現手法(実装編)-63.png]]
![[08-Assets/Images/ImageBag/UrealEngineNPR/BlueProtocol/CEDEC2021_BLUEPROTOCOLにおけるアニメ表現手法(実装編)-65.png]]

## 额头发与衣服阴影
使用接触阴影这种深度偏移后处理阴影来实现。

## GBuffer
```c#
GBufferB:Metallic/Specular/Roughness => ToonHairMask OffsetShadowMask/SpcularMask/SpecularValue
OutGBufferD = CustomData.xyzw => ShaderColor.rgb/NoL
OutGBufferE = GBuffer.PrecomputedShadowFactors.xyzw => /RimLightMask/DiffuseOffset/RimLightWidth
OutGBufferF = velocity => OutlineWidth/OutlineID/OutlinePaint/OutlineZShift
```
PS.需要关闭角色的预计算阴影。

## 管线
![](https://pic2.zhimg.com/80/v2-e0df1cfdf229e2c50f6a70ca0ee99101_720w.jpg)