前言：最近学习庄懂大佬的技术美术入门课，因为一直不太习惯Unity连连看，所以转到UE4来操作了。菜鸡实操，希望有大佬批评指正。

传送门：庄懂-BoyanTata的个人空间_哔哩哔哩_Bilibili

Github：GitHub - levinqu98/ZhuangDongCourse: ZhuangDongCourse

概述：第0课主要是大佬介绍了一下自己从美术转TA的一些学习心得，个人觉得讲的太好了。这里就不粘贴复制了，感兴趣可以去听。

第1课介绍了一下渲染管线以及Larmbert光照模型，RampTexture的原理和用法，这块可能是因为涉及到图形学比较容易劝退，所以大佬介绍的比较简略。管线这块可以另外找一些专门的课听，以及多多练习才能有实际的感受。

第2节课我就被震撼到了，这节课主要是对交上的作业进行拆解分析。没有想到已经这么卷了。实际上我去年的时候就已经看到第2节课了，当时大概看懂了20% ...... 时隔一年2刷我现在觉得自己大概理解了80%，所以自己实现了一遍。就像大佬说的那样，看不懂的东西别较劲，该上班上班该上学上学，过几天再回来看，总有一天会大彻大悟的。

先来看一下第一节课的作业：

因为在第1节课已经介绍过RampTexture的用法，所以这个作业就很简单了。画一张这样的贴图就可以了。

具体操作如下：

1. 在UE4把材质改成无光照

2. 根据参考图制作一张RampTexture

 3. 写一个半兰伯特光照模型，用它对RampTexture采样

 4. 做一个简易的描边

大佬原本使用的是ShaderForge，它已经提供了描边的接口，所以直接给参数就可以了。但是UE4是没有的。一般做描边我会去网上抄一段Sobel算法，这里为了赶进度就不搞那么麻烦了。用菲涅尔简单模拟一下：

只做fresnel描边硬度不够

所以再用step去掉渐变

 5. 用Lerp将光照模型和描边混合起来

我以为的作业是这样的，但实际上大佬收回来的作业可就厉害了，这里就不展示了，继续记笔记

首先大佬回应了一些作业里面出现的常见问题和解决办法：

1. 平铺方式不要选择warp，否则高光点会溢出，如图

解决方式：在UE4里将平铺方式改为限制

2. 去掉Mipmap

3. 控制RampTexture的大小，一般128就可以

4. 现阶段自发光并没有考虑到投影，只能区分不同的光方向

接下来挑了一些同学的作业重点分析

作业案例分析1-玉石

第一步：半Larmbert光照对一张RampTexture做采样

注意玉石效果亮部和暗部相反

可以更具体的分析玉石的光照模型，这里使用的RampTex是这样的

阶段效果：

第二步：制作卡死的高光点

这一步也可以使用SmoothStep或Step节点

阶段效果：

同学的案例中制作了一大一小两个高光点，并且使用max节点相加。这里就不赘述了。

第三步：用Lerp将前两步混合

把第二步作为遮罩，并且为高光点配置颜色

阶段效果：

第四步：添加菲涅尔

最后使用Blend-Screen进行混合

最终效果：

最后我又调整了一下RampTexturehe光照方向看看效果

完整计算：

作业案例分析2-素描

第一步：SD制作一张四方连续的素描笔触图

也可以用直接用PS画一张

用SD的好处是在SD里面的更改可以实时更新到引擎，而且SD也比较方便观察每个步骤的效果和四方连续性

在UE4里我没有关掉这张贴图的Mipmap

可以拉远观察一下使用和不使用Mip的区别

使用Mipmap

不使用Mipmap

可以看到镜头拉远之后不使用Mipmap会出现很明显的锯齿

第二步：在屏幕空间上平铺贴图

把这张贴图直接铺到屏幕空间上

可以看到贴图在屏幕上的显示，但是推远相机之后就会消失

这是因为这张贴图是贴到屏幕空间上的，相当于贴到了我们现在整个视口上。相机拉远之后，现在我们的物体正好缩到了黑色区域。比如现在平移一下相机，把物体移到屏幕上有白色区域的部分：

为了解决这个问题，我们希望贴图的尺寸和相机相对物体的远近产生关系，很容易想到使用深度。

因此我们把屏幕空间UV和深度相乘之后再来平铺贴图：

拉近一点看看：

已经成功贴上了，原来只是密度太大了，因此我们对深度进行调整：

就能够得到跟庄老师那边一样的效果了

拉远看问题也不大

第三步：Larmbert和平铺贴图合并

这位同学很神奇的使用了Step节点

我也尝试过其他混合方法，竟然都没有Step的效果好。

而且这里用的是兰伯特而不是半兰伯特，原因是我们需要一个纯色的暗部，是完全没有贴图映射上去的，所以不需要clamp掉-1到0的部分

阶段效果：

第四步：Lerp上色

从这里开始我做了一点点自己的发挥，我希望把明度分为3阶，制造出高光，中间调，阴影三个比较明显的卡渲效果。并且把前面的到的这个效果作为中间调。其实上面做完似乎已经基本有一些这样的效果了。按道理说我们前面的操作应该只能明显区分亮部（兰伯特0-1）和暗部（兰伯特-1到0）两个部分，中间调是渐变过去过去的。为什么会感觉好像已经出现了非常明显的亮部界限了呢？镜头拉近看一下：

实际上贴图在整个亮部都是存在的，之所以离远能看出明显的亮部分界，我个人理解是Mip的作用。

比如把镜头拉远观察一下：

（纹理消失术）

可以关掉Mip再观察一下：

果然纯高光区域现在也被贴图给盖住了

锯齿很明显了，赶紧打开Mip

第五步：所以接下来将原本的光照模型继续截断成3阶

前面输入的是Larmbert光照，这里参数并没有完全按照半兰伯特给0.5，因为我做完之后觉得中间调有点少，体现不出我们前面辛辛苦苦做的纹理效果。并且add了一个比较大的参数来缩减阴影的范围。最后再用Floor节点。这个节点的用法是在虚幻手册抄来的。

如果使用默认半Larmbert光照截断效果是这样的：

可以说是非常卡渲了

第六步：映射颜色和纹理

我好满意，这身形轮廓已经被我勾勒的非常性感了有没有

第七步：加描边

跟之前一样，继续用Fresnel截断凑合一下描边

作为蒙版输入Lerp，和之前得到的性感素描效果混合到一起

最终效果：

铛铛铛！

这样即使离远看虽然纹理被Mip模糊掉了，但是依然能看到比较明显的三阶颜色

完整过程：

作业案例分析3-Halftone

这个地方就是我没看懂的那20%了

先观察一下ScreenUV

在ShaderForge里面这个节点是这样的

可以看到屏幕空间的坐标原点是左下角

调整UV

在UE4里面：

也就是说屏幕空间的坐标原点是左上角，后面庄懂用Component Mask单独拉出U和V观察了一下，我们也可以看看：

也就是说，在UE4里，U是从左往右完成0-1，V是从上往下完成0-1

小Tip：关于这个红绿黄的问题在弹幕里面看到有人问

我们为了把U和V放到同一张贴图里，就用R通道代表U，用G通道代表V，单通道的值越接近1就那个颜色的明度就越高。根据三原色混合的原理，红和绿混合就会变成黄色，而坐标原点因为RG的明度为0，所以就变成了黑色。于是UV的贴图就呈现出我们看到的这个样子。

接下来在ShaderForge里面直接给ScreenUV乘上一个标量就得到了

但我在UE4里面给它乘上系数之后没有任何变化…

于是我自己处理一下：

这个操作方法是我在虚幻官方课做射击准心的时候学到的

它的目的是把刚刚提到的屏幕空间坐标原点从左上角挪到屏幕中心来，因为整个坐标范围是0-1，所以我们给U和V都减掉0.5，就把圆心平移到中心了。

Frac

把前面得到的结果经过一个Frac节点之后就可以得到

这张图不太好理解，可以但单独看一下R和G通道

Frac这个节点的意思庄老师也说了，是去掉一个数的整数部分，留下它的小数部分。比如1.5取余之后就是0.5，2.5取余之后也是0.5。因此给原图乘上一个倍数通过Frac节点我们能够制作一个循环的效果。

比如

这样我们就在G通道上制作了20个渐变

所以，如果对ScreenUV进行上面的操作，我们就能够得到

Remap

后面这位同学把之前得到的UV做了一个Remap

从0-1映射到了-0.5-0.5

这是我找到的UE4里的Remap节点，看注释猜测应该是这么用的

到这里开始我就开始装懂了…… 并不是很明白Remap的思路是什么

得到的结果是

然后用VectorLength节点去计算长度，这个节点的作用是计算矢量长度。也就是说离原点越远的像素，长度越长，得到的结果越大，所以亮度就会越大，所以得到了

到这里我们就基本得到了打孔的效果了，接下来要做的就是对这个打孔效果进行一些处理，让它更接近Halftone的效果

再往后直接照着大佬做效果好像就不太对了，于是我就自由发挥了一下硬凑效果

非常生硬，所以直接放下节点和效果，如果有人看出问题麻烦给我指正一下

最终效果：

这个效果看上去差不多，实际上可以观察到比较明显的摩尔纹

根据我的另一位启蒙恩师闫令琪说，摩尔纹的产生是采样率不足

在频域上产生了混叠，所以就会走样（锯齿）

要解决走样，就需要一些抗锯齿操作

另外，由于这个纹理使我们用程序生成的，所以也就没有Mipmap的说法，把镜头拉远就会看到

最后，把镜头拉近

可以看到我们制作的孔洞发生了形变，由于这张贴图时贴在屏幕空间的，所以我觉得应该不是被模型法线影响产生的形变，那应该就是在计算过程中，我把光照模型和程序纹理放到一起计算出来的