---
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)