104 lines
6.4 KiB
Markdown
104 lines
6.4 KiB
Markdown
|
---
|
|||
|
|
title: 知乎骨鱼子的厚涂实现
|
|||
|
|
date: 2022-10-12 14:25:32
|
|||
|
|
excerpt:
|
|||
|
|
tags: 卡通渲染
|
|||
|
|
rating: ⭐
|
|||
|
|
---
|
|||
|
|
## 前言
|
|||
|
|
主要使用多个LUT混合的方式来实现厚涂的效果。
|
|||
|
|
|
|||
|
|
  
|
|||
|
|
|
|||
|
|
## 文章摘要
|
|||
|
|
[[厚涂风格实时二次元渲染(0)-前言]]
|
|||
|
|
[[厚涂风格实时二次元渲染(2)-厚涂风的皮肤渲染]]
|
|||
|
|
|
|||
|
|
## 什么是厚涂与半厚涂
|
|||
|
|
https://zhuanlan.zhihu.com/p/467348694
|
|||
|
|
|
|||
|
|
厚涂是发源于**西方油画**的一种绘画技法。 画家在画布上使用很厚的颜料，利用笔刷或画刀进行涂抹，就像抹奶油一样，故名“厚涂”
|
|||
|
|
在这样的绘画工艺下，导致厚涂色块十分分明。因为是用很厚的颜料，所以渐变实际上是离散的，这就和我们的赛璐璐有一点像了。
|
|||
|
|
离散的同时，由于两个颜料的相互融合，边界却又十分的柔和
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
柔和的边界
|
|||
|
|
|
|||
|
|
为了让皮肤的质感更为可控，我们采用第二章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)
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
二次元可以使用的LUT
|
|||
|
|
|
|||
|
|
以天空为背景色，直射光使用肤色作为相应，然后边缘使用粉粉嫩嫩的颜色。
|
|||
|
|
|
|||
|
|
至于这块儿棕色，因为我们是半兰伯特模型，所以一般而言不会采样到太多。
|
|||
|
|
二次元可以使用的LUT
|
|||
|
|
|
|||
|
|
把这张LUT和上面pre-integrated以相同的方式(但纵坐标轴不同)也应用进去，就完成90%的效果啦
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
赛璐璐Only
|
|||
|
|
|
|||
|
|
|
|||
|
|
### 3.一点小方法
|
|||
|
|
（1）另类高光
|
|||
|
|
|
|||
|
|
|
|||
|
|
肩头上有高光
|
|||
|
|
可以看到有些二次元厚涂作品有明显不基于物理的高光，这是因为二次元美少女每一个都滑溜溜的。
|
|||
|
|
这个效果在我们使用了不基于物理的补正LUT后非常简单，在LUT的左上角点一个光点就可以了。
|
|||
|
|
|
|||
|
|
（2）屏幕空间补光
|
|||
|
|
|
|||
|
|
肩头存在补光
|
|||
|
|
二次元角色的光照实际上都是以好看为第一要务的。其实许多动漫都存在“两个人面对面，但是却都向光”的情况。对于二次元美少女而言，光补的越多，就越好看(雾)
|
|||
|
|
|
|||
|
|
[Unity URP Shader 与 HLSL 自学笔记六 等宽屏幕空间边缘光 - 知乎 (zhihu.com)](https://zhuanlan.zhihu.com/p/365339160)
|
|||
|
|
可以在这篇文章学习这个套路。因为我也是学的别人的，就不在这里班门弄斧啦。
|
|||
|
|
|
|||
|
|
补光后的效果，会让人感觉更有绘画感。
|
|||
|
|
此外，将这个效果复制一份并以 normal·viewDir lerp一下，可以做出BDTF的效果
|
|||
|
|
|
|||
|
|
|
|||
|
|
厚涂作品：
|
|||
|
|
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)
|
|||
|
|
|