UE4 Material 101学习笔记——01-07 介绍/PBR基础/UV扭曲/数据类型/翻页动画/材质混合/性能优化
本系列学习资料来源，Ben Cloward的油管空间，B站的搬运翻译
Lec 01 什么是着色器 What Is A Shader?
1.1 介绍
- 如图所示，shader控制屏幕上每一个像素的颜色，并且通常跑在图形处理器上
- 如今很有游戏引擎使用先进的基于物理的渲染和照明
并且光照模型的实现更多锁定在了图形工程师的领域，加上引擎会帮我们做很多事情
所以作为Artist只要提供对象的属性（颜色，法线，粗糙度，金属度等等），游戏引擎自己会照明
大部分引擎都提供了节点式的材质编辑器，shader正是可以控制这些材质的属性
- 以前shader做的事情，可以分成灯光特性和表面特性
- 曾经的shader编写时，可能会将这些混在一起，所以在基础材质中可能会有AO或者diffuse，可能存在硬编码的反射贴图
但是现在使用PBR，shader只提供表面特性，引擎提供灯光特性 - 所以非常重要的事是，当用shader制作作品时，我们的shader是不把两种特性混合的，注意shader只做表面特性
1.2 打开UE4材质编辑器
使用UE4的材质编辑器来写shader
打开初学者内容包里的Material文件夹，可以看到很多材质
我们在文件夹空白处右键，新建一个材质，打开它
- 在红框处，我们预览我们shader的在场景内的效果，预览框的右下角，我们可以指定不同的形状来预览，预览框的左上角可以修改不同的显示方式
- 绿框是参数栏
- 黄框是统计数据，可以看到现在就有117条指令，是用来基本的光照计算
- 紫色框是节点栏，包含了所有的节点，在界面右键单击也能获得节点
我们做一个最基础的功能，创建一个纹理采样节点，选择一张贴图，连接基础颜色
此时可以看到统计数据增加了
我们也可以选择数字常量连进基础颜色
如何断开连线，可以右键选择节点选择断开，或者按住alt点击左键断开
如何了解节点信息，按下ctrl和alt，可获得节点的说明
Lec 02 PBR基础 Basics of PBR
原视频下方有一些贴图链接
下载方式说明
2.1 引入
刚进入节点编辑器时，我们看见根节点上有很多属性，这就是这节的主题
(PBR的介绍资源很多，这里附上之前的PBR笔记，该专栏的最后的三四篇就是)
- 进入正题，PBR是一种基于物理的渲染方式，我们尝试在计算机中准确计算光的行为
在以前，计算机图形学只是尝试模仿光造成的结果
但是在PBR中，我们会对光进行真实性的建模，优点就是能够创建更加真实的图形 - PBR有两大属性，光照属性和表面属性，为了表现真实感，两者都需要正确
UE4中，光照属性由引擎控制，表面属性由我们给出 - 虽然我们大部分时间只是会动用表面属性，但是为了理解引擎为我们做了什么，先来了解一下光照属性
2.2 光照属性
- 光怎么来的？
光通常来自两种类型
直接光照，从光源往单一方向发出的光，；间接光照，间接光在环境中的反射 - 光怎么出去的？
光有很多种出去的行为，但我们通常关注两种类型
镜面光，沿着一个主要聚焦方向离开表面；漫反射，光被散射沿着各个方向离开表面
在计算机图形学中，对光进行分解时，结合传入和传出，排列一下就会与四种光的类型
- Direct Diffuse是引擎中最简单的类型，可以看到它的效果范围很大
- Direct Specular比Direct Diffuse消耗高一点，它的效果更集中
- Indirect Diffuse是很复杂的，因为来自的间接光很多很多，计算也很复杂，人们通常会把它们进行离线渲染，然后存储在光照贴图中
- Indirect Specular也很复杂，引擎提供了很多方式去计算它，像是反射探针，平面反射，屏幕空间反射，光线追踪（看到这的时候，对这些概念又去搜相关文章，看到这一篇介绍博文感觉很好）
- 把这些结合起来
2.3 表面属性
之前介绍光的属性很重要，因为表面属性控制着上述提到的每一个光线交互作用
- Base Color定义了物体表面的diffuse的颜色
并且以sRGB为例子，注意不要在这上面放比20暗或者比240高的颜色
当颜色在这些范围时，光照无法被正确反应
如果真的很粗糙，那么禁止范围会变成50左右，较光滑则是20
下图是一个基本颜色纹理的示意图，注意，它不包含光照和阴影信息
- PBR里的法线贴图和以前渲染的法线贴图没什么区别
（附上以前的法线贴图笔记）
图上花花绿绿的颜色，其实不是颜色，是切线空间法线的坐标
注意不要用PS去手画法线图，会不精确，有一些其他方法比如烘焙，从高模到低模，区创建一个法线贴图（关于高低模和烘焙的理解，可以看这篇博客）
样例给出了鹅卵石的法线贴图，有了它就能把表面显现的凹凸不平
- Specular也是代表有多少光被反射的一个类型，代表反射率
这一栏图代表高光范围从0-1
如果从很斜的角度看过去，会看到几乎所有都有高光，这是菲涅尔现象
- 粗糙度来自PBR里的微表面理论
大致理解的话，粗糙度=1or白色，代表粗糙；粗糙度=0or黑色，代表光滑
粗糙度的图没什么限制，可以画，可以从高度图参考
- 金属度
Base Color和Specular在用于金属与非金属的区别
鹅卵石的例子里，金属度都被忽略
如果是金属，则在BaseColor里颜色最好大于180，BaseColor很重要
有一张AO图其实是环境光遮挡，可以进行建模后烘焙得到，代表对于环境的遮挡，作为一个系数乘在Indirect Diffuse上
导入连起来得到这个效果
像之前说的，引擎帮我们做了照明的部分，作为TextureArtis/ShaderArtist需要把正确的值插到正确的孔里
可以做很多事情，比如表面变得潮湿，东西向上滚
Lec 03 数据类型 What Are Data Types?
本节讨论数据类型
为了防止数据使用错误/冗余，增加效率，我们需要了解一下Shader里的数据类型
首先是float，浮点数类型，适用于金属度，镜面反射，粗糙度等
float2，多了一个数据通道，用于uv等等
float3，float4同理，点击小箭头可以展开成颜色选取
这些数据类型可以进行加减乘除
通过mask节点可以单独取出一个通道
使用SplitComponents可以拆分通道
使用Append节点可以合起来组成向量
也可以使用AppendMany进行多个通道的合在一起
使用Swizzle节点可以重新排列
这节很基础，就没写很多
Lec 04 扭曲着色器 Distortion Shader
这一节做扭曲和调节的shader
首先最基本的用一张uv的checkimg图贴到立方体上
使用add节点和常量改变UV试试
使用time节点改变UV，让它动起来试试，因为time是单值，所以是对角线移动
同样也可以用time和常量的乘法来控制
如果想要偏移每个像素的UV怎么办呢？这就需要引入一些noise或者一张纹理
噪声纹理里每个通道都是不同的灰度值，用它们来偏移UV坐标
稍微控制一下偏移的强度，就可以看到扭曲的效果
对噪声纹理的UV也做一个移动的偏移，结合到纹理图上，可以看到它动了起来
但是这只是一味重复，很容易被看出来，做一些改变，可以得到不容易看出来重复的效果
Lec 05 特效翻页动画 Flipbook Animation
Flipbook的动画效果在视觉上很常用，因为游戏通常为了保证帧数，很多时候不能做复杂的事情
所以美术设计者，一般会把动画效果渲染成单独的帧，然后将它们渲染到纹理上再去应用
如图，这是一张UE4初学者内容中自带的爆炸图片，框架按照6*6来排列
为了展示这个效果，我们要一次显示一帧
上一节我们扭曲了UV，这一节，我们要让UV从一帧跳到下一帧，开始播放它
直接使用UV显然不能达到效果
UE4自带了一个叫做FlipBook的节点，利用它可以完成播放动画
当把time连到第一栏时，UE4默认是30帧每秒，所以可以手动乘法调整帧数
这样已经完成了这一节的内容
但是我们想自己做一个不需要这个节点的shader，我们需要理解这个节点内部发生了什么，这样以后才能做调整
首先，我们需要缩放我们的UV，让它只能显示一帧的内容
用到frac节点，获取小数部分
而后要让它跳到下一帧，可以这么做
这里用到floor函数
Lec 06 环境材质混合 Environment Blending
在做这节效果之前，我们假想一个场景
有一位场景同学来诉苦，做岩石太累了
有那么多场景，沙漠/雪/潮湿/丛林，这里面都用到石头，它们上面有雪，有沙子，有苔藓
要做这么多石头太累了，能不能用一个shader，轻松的只用一组岩石，然后用雪/苔藓/沙子等等任何东西去涂它呢？
这是可以做到的
我们只用一组岩石资产，然后更改它是哪种材料
首先我们有最基础的东西
如果要把它变成一个长满苔藓的岩石，要该如何把苔藓颜色和正常的石头颜色混合在一起呢？
总之先把苔藓的diffuse和normal拿到
我们要做的是把两者融合到一起，融合的方式是lerp节点（linear interpolation）
这个节点代表，有些纹理放到A，有些纹理放到B，然后通过alpha，把两者进行混合
只是用alpha=0.5，把diffuse简单lerp得到一个效果
然而这种效果实际上是不存在的，苔藓不是透明贴上去的，所以这不是我们希望的效果。
所以我们接着要做其他事，不过学会lerp是第一步，我们可以把normal也lerp在一起。
我们想做的事情，是创建一个蒙版，只是把苔藓固定在顶部
为了这么做，我们需要找到顶部，为此需要法线，选择vertexNormal节点，用mask取出B通道（因为虚幻是Z方向作为向上的）
得到一些奇怪的效果
上部分有苔藓了，但是下部分变蓝了，为什么呢？
因为我们的取出的这个通道是-1到1，在lerp中，如果-1就变成了岩石减去苔藓了
为了避免这种错误，使用clamp节点
我们想做的事情是增加mask的对比度，而不是看着似乎是透明过渡的苔藓
想在苔藓交接的地方多一点硬线
为了增加一些对比，可以在mask之后使用power
单独看看这个mask，我们power拉的越多，越靠上，边缘越锐利
我们可以加一个数上去，交界是有了，但是这样的交界不太行，他是基于物体的法线的
所以我们最好用贴图自己的法线，而不是顶点法线
但是法线贴图的图，不可以直接拿来用，这个涉及到切线空间和世界空间的差异
（附上以前的法线贴图笔记，内有切线空间推导说明）
所以我们为了自己使用法线图要加一个节点，把它从切线空间变换到世界空间
，也就是TransformVector节点
达到了我们的效果
这不是一项新奇的技术，早在2011年是上古卷轴5：天际中就被使用了，但是当我们也会经常使用
稍微整理加个注释
Lec 07 着色器性能优化 Shader Performance Optimization
虽然现在已经有比较好看的shader，但是帧速率变慢了，怎么办？
这就是这节的内容
7.1 三种性能衡量方法
首先讲到性能，先来看看衡量性能的三个方法
- 第一个方法，进入视图模式，查看shader复杂度
可以看到场景中shader的复杂程度，我们可以对相应复杂的shader进行优化
但是这种方法并不完美，并且只是一个大致的颜色表示
- 下一个方法是执行shader检查，比如上一节的shader的数据
在base pass shader 执行了146条instruction，这是什么意思？
我们了解一下整个过程
我们的shader节点图，会编译成HLSL代码，再编译成汇编语言，然后传递给驱动程序
所以当我们看到要执行多少的指令，可以大致判断shader的消耗
我们可以假设，指令越少，性能会越好
但是用这个来度量也不是个完美的方法
因为并不是所有的指令在GPU上都花费相同的时间去运行
- 最准确的方法是，把要用的shader，放到要用的模型上，放到要运行的场景中
然后运行该场景在预期目标平台上去评估
用这种方法最难，因为有很多步骤，但是这确实是最准确的
7.2 如何优化
- 优化的第一个方法，很简单，就是删除所有用不到的东西，很多计算了但是排不上用处的逻辑依然会损耗性能
- 优化的第二个方法，重构数学逻辑，去使用不同的方法获得相同的结果，结合7.2.1和7.2.2的例子理解
- 优化的第三个方法，“Pipelining”，数据流水化，可以在7.2.3结合例子理解
- 优化的第四个方法，纹理通道打包，可以在7.2.4结合例子理解
7.2.1 优化Lec06的材质混合效果
我们重构数学逻辑，来优化上一节的shader
我们用到power是为了增加mask的对比度，但其实在增加对比度的同时，power的改变也会影响苔藓出现的上下位置
根据一些资料我们会知道，power节点的性能会比其他功能更耗费性能一点
所以我们可以用其他的组合来试试
把对比度和遮罩这两种属性单独调整
经过这样的调整，现在的指令是141条，比之前power的146条少了一点，虽然我们的节点用多了
7.2.2 优化Lec05的翻页动画
我们继续用重构数学逻辑的思路，去调整翻页动画的shader
这是我们之前的结构，手动实现了flipbook节点
用了135条指令
但是我们看看用了flipbook节点，却是128条指令
所以我们的结构还有优化的空间，我们可以优化看看，优化完127条，还比flipbook少了一条
具体采样方式大概如下图理解，一个循环内，让UV采样的是红框处
7.2.3 优化Lec04的UV扭曲
这是我们当时的结果，可以看到最开始的两部分几乎是重复的，只有参数和选择的通道不同
这是一个线索，我们或许可以结合一点东西，来节省性能
可以看到之前的操作只是处理UV，那么UV只是U和V两个值
我们的pipeline足够宽，是可以放下两组UV的四个值的
我们在之前的版本，做了两次乘法两次加法，四次数学运算
所以我们结合起来，只做两次数学运算
所以我们可以合并数据，把它们pipeline到一起打包，可以节省一点性能
7.2.4 优化Lec02的PBR基础
这是我们之前第二课的基础shader，我们采样了5次纹理来执行这个shader，非常昂贵
采样贴图比起读取通道来说是很费性能的
除了normal和basecolor需要占据三个通道，其他的图都是单通道的灰度图，所以其他的图可以合并到一起
ao+specular+metallic(虽然是纯黑)+roughness=asmr合并到一起，我们挨个读取通道就行了
可以看到优化后的数值小了
