2023-06-29 11:55:02 +08:00

104 lines
6.4 KiB
Markdown
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

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