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

6.4 KiB
Raw Blame History

title, date, excerpt, tags, rating
title date excerpt tags rating
知乎骨鱼子的厚涂实现 2022-10-12 14:25:32 卡通渲染

前言

主要使用多个LUT混合的方式来实现厚涂的效果。

300 500 500

文章摘要

厚涂风格实时二次元渲染(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

300

二次元可以使用的LUT

以天空为背景色,直射光使用肤色作为相应,然后边缘使用粉粉嫩嫩的颜色。

至于这块儿棕色,因为我们是半兰伯特模型,所以一般而言不会采样到太多。 二次元可以使用的LUT

把这张LUT和上面pre-integrated以相同的方式(但纵坐标轴不同)也应用进去就完成90%的效果啦

500

赛璐璐Only 500

3.一点小方法

1另类高光

肩头上有高光 可以看到有些二次元厚涂作品有明显不基于物理的高光,这是因为二次元美少女每一个都滑溜溜的。 这个效果在我们使用了不基于物理的补正LUT后非常简单在LUT的左上角点一个光点就可以了。

2屏幕空间补光 肩头存在补光 二次元角色的光照实际上都是以好看为第一要务的。其实许多动漫都存在“两个人面对面,但是却都向光”的情况。对于二次元美少女而言,光补的越多,就越好看(雾)

Unity URP Shader 与 HLSL 自学笔记六 等宽屏幕空间边缘光 - 知乎 (zhihu.com) 可以在这篇文章学习这个套路。因为我也是学的别人的,就不在这里班门弄斧啦。 补光后的效果,会让人感觉更有绘画感。 此外将这个效果复制一份并以 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://forum.unity.com/threads/shader-forge-a-visual-node-based-shader-editor.222049/page-54#post-1903768)