本系列学习资料来源，Ben Cloward大佬的频道，B站的搬运翻译

接下来的章节将会讨论一些提升树叶表现的技术

Lec30 叶子透光 Foliage Translucency

在这一节，我们会讨论叶子的半透明

首先来看看现实中太阳照射叶子的情况

太阳光穿过树叶，我们在树叶背面也能够看到其颜色变化，这就是我们希望得到的目标

首先我们在初学者包里拿到这个SM_Bush，作为我们的实验对象

使用其自带的材质，拷贝一份作为实验对象

我们在12课做过一个叶子的shader，我们把它放进来


这是我们的基础效果

当我们到背光面，可以看到现在是黑黑的，我们希望能够得到透光的效果

在根节点的着色模型选择双面植物

创建给次表面颜色的蒙版，应用UV偏移（该蒙版是把叶子选出来，去掉其他不应该透射的部分）

Lec31 叶子贴图打包 Foliage Texture Packing

上节我们用了三种纹理，但其实可以有更好的处理方法

首先我们忘记处理一个问题，我们启用了双面照明，但是法线贴图只是一面的

所以为了修正这点，使用TwoSideSign节点，它会输出±1来标识正面

见仁见智，开起来反面会死黑？感觉不连TwoSideSign也没事

1 合并粗糙度/透明度/次表面mask

这一节要教的是，如何打包 粗糙度 和 次表面散射的透明度 到一个通道中

另外资产我们也进行了替换，使用Luis Garcia制作的树的资产，可以从这里免费获得

我们来看看怎么打包这些图

• 第一个红绿蓝的图，是我们自己画出来的mask
  第二个图，是原本的树叶的不透明度的mask
  二到三，我们把树干擦掉
• 三到四，我们取得原本diffuse图的灰度版本
  
  与之前的遮罩进行叠加
  
  提亮一点
  
• 四到五，把第二张图灰阶调低
  然后五到六，叠加上第四张图
  得到这个结果，其直方图是这样的
  

2 一图多用

我们把它塞入A通道
——————
为了获取不透明度的模板，我们获取它的值，乘一个较大的数，所有非0的都会超过1
这样在UE中会自动clamp到1

——————
再者，我们来设置次表面颜色
我们如果想通过这个alpha图获取叶子的部分，用来做叶子次表面颜色的系数的话
那么我们只需要整个纹理减去一个灰度值，相当于做一个灰度的截断即可

之后需要补上个乘法提亮，然后saturate限制到0和1

这样不用做更多的纹理采样，对性能有所帮助
——————
接下来，用它设置粗糙度，使用1-x节点，让叶子变黑，其他变白，稍微加一点，就可以做粗糙度

切换到粗糙度视图

然而现在看这些树，似乎分叉非常的明显，呈现Y状，这样不好，我们之后要改进它

Lec32 隐藏叶子面片 Foliage Hiding Planes

在本节，我们要学习如何隐藏植物的那些面片
一棵树，不加shader原本是这样的

树由许多面片组成，叶子是在面片上添加着色器形成的
在一个面片上呈现几十片叶子，而不是用好多多边形去组成一个叶子
我们需要去隐藏面片的效果

1 修正

在此之前，做一些小修正

• 我们看到叶子会这样长出了树干
  
  这显然是不合理的，原因是因为 我们shader的UV 和 叶子在面片的UV 不一样
  做如下改正
  
  
• 上一节在透明模板部分乘了个4，有些太高，可以改成1.5

2 “计算”法线——DDX&DDY

如何让人看不出叶子在一个平面上呢？
我们需要在角度较偏的时候，隐藏叶子

做法采用，相机和法线的点乘，因为双面，所以再附上绝对值，反转自乘反转，限制一下角度
也就是以下节点，把它们乘上不透明模板

想一想这样的做法，确实可行

但是我们看看模型的法线，发现有些诡异

• 法线实际上并不在这个面片指向的方向
• 模型的法线实际上已经被调整过，不是沿着面片的朝向，而是指着离开树木中心的方向，为了让树木的照明正确（这些是下节要讨论的内容）
• 但是为了达到我们需要的目的，我们要做一些tricky的东西，去克服表面法线不对劲这个事情

于是我们要去计算多边形的表面法线，这在UE中有两个节点，一个叫做DDX一个叫做DDY，可以给我们提供帮助

• DDX和DDY，是片段着色器指令，可以用于计算任何值相对于屏幕空间坐标的变化率
• 我们知道在光栅化的时刻，GPUs会在同一时刻并行运行很多Fragment Shader，但是并不是一个pixel一个pixel去执行的，而是将其组织在2x2的一组pixels分块中，去并行执行。
• 而偏导数就正好是计算的这一块像素中的变化率。
  从下图可以看出来ddx 就是右边的像素块的值减去左边像素块的值，而ddy就是下面像素块的值减去上面像素块的值。其中的x，y代表的是屏幕坐标。
  

我们使用DDX获取X方向的斜率，DDY获取Y方向的斜率，相当于获取了两个向量
那么这两个向量的叉积，就是法线

（这里最后反正要点积再取绝对值，所以DDY和DDX谁叉乘谁都影响不大，不过下节就会有影响了）

连出来到不透明模板这里

Ben提到，我们目前做的事情，都是为了让效果看起来尽可能好，可能对于手游来说要更加简便为好

Lec33 叶子法线 Foliage Normals

1 引入

叶片的法线需要特殊处理，为什么呢？

我们知道，叶片是由面片构成的，但是面片实际上代表了好多好多叶子，我们并不想让一整个片上的叶子都是同样的光照情况

之前我们制作了叶子的抖动动画，平面的渐隐渐出，这节我们来调整面片的法线。

为了尽可能直观，我们把SkyLight关掉，把材质里的次表面颜色断开，方便直白的观察法线的影响

2 四种法线

有以下几种方法构建面片的叶子法线

2.1 Face Normals

FaceNormal就是叶子所在这个面片的VertexNormal，也就是面片的朝向
虽然面片方向确实是这样，但是照的不好看
我们之前用过法线计算遮挡，在红框处做的调整我们就能得到FaceNormal，连到节点上
（为什么这里要乘以-1呢？因为这里是DDY叉乘DDX，右手定则是朝-Z的法线，所以乘个-1翻回去
（如果改成DDX叉乘DDY也行，就不要乘以-1了


切换到法线视图，可以看到法线都是平面化的，这样不太适合“叶子”，显得很笨拙

这是我们要避免的FaceNormal

2.2 Bent Normals

对于特定的树，我们有第二种法线，BentNormal
这也是之前我们自带的normal做法，我们点开模型，点开法线

在树梢的末端，这些绿色的法线，以一种指向外部的方式背对中心，这就是BentNormal

我们在生成树的模型的3D软件中，可以从一个球来烘焙法线，烘焙到树的几何体上

有一些具体的实际制作教程，如以下链接

• 这个教程链接
  
  
  
  
• 以及这个教程链接
  
  
• 还有这个教程链接
  
  

对比一下植物的法线和球的法线，是很接近的

2.3 Object Pivot Normals

如果我们因为一些原因，无法去改变几何体的法线，或者想要某种类型的法线

那么，我们可以从几个不同的位置生成法线

我们知道，向量是一个位置减去另一个位置

我们可以用像素的物体的世界中心的位置与对象中心的位置，两者相减，得到从物体向外朝着像素的向量，把这个当法线，输出球状照明


效果是这样，和之前BentNormal很像，并且是真的平滑过渡，我们也没有使用顶点法线

但是我们现在还没用法线贴图呢，所以我们要把这个平滑过渡加到之前的法线贴图上（注意，下方应该是world space到Tangent space）

非常平滑又有法线

2.4 Camera Normals

第四种方法其实是用CameraVector作为表面的法线

这种方法制作的法线，通常用做那些一直要朝向我们的面片

3 方法混合 Bonus Hybrid Method

对于树，我们想这么混合
树枝，使用CameraVector，叶子，使用Object Pivot Normals，插值的参数用之前的mask（注意，下方应该是world space到Tangent space）

可以看到叶子和枝干是区分开的，这是我们的节点

对比一下，这是我们做法线调整之前的树

这是之后

动图对比
这是之前

这是之后，法线的过渡更加平滑

然而这样做会有死黑的问题，因为Object Pivot Normals可能和插片的方向一样，导致法线和插片的面法线垂直了，直接黑掉了

Ben后来的做法，该用面法线，vert normal

Lec34 叶片AO Foliage Ambient Occlusion

本节将会为叶片制作AO，做法有些和一般的AO不一样，因为我们的叶子是存在于面片上的

我们想一想，树上有大量的树叶，其由一堆不同方向的随机面片组成，我们需要一个均匀平滑的好AO——也就是，树的中心变暗，朝着树的方向变亮

为什么呢？思考一棵树在阳光下是什么样的情况，我们往树的中心走，透过叶子的阳光就越少，就越暗了

上一节我们用过Object Pivot Normals
如果我们用像素位置减去树模型这个对象的位置，得到这个向量并测量长度，那么我们就可能知道我们离中心有多远，以此来设置黑白的值

连到高光度，去看看高光度缓冲的效果（此处法线连的要是add那个地方，不过只是看缓冲区，没关系，后面改回来了）（注意，法线应该是world space到Tangent space）


再加一个power，加大对比度看看


我们将其运用到次表面颜色和镜面值（注意，法线应该是world space到Tangent space）


中间暗，周围亮很明显

我们如果把它也真的连到AO上，整个数黑了很多

我们整理一下节点，总览（注意，法线应该是world space到Tangent space）

分布

（感觉连了AO太黑的，可以不连）

Lec35 叶片渐隐 Foliage Camera Fade

我们会让相机进入叶子时，叶子渐隐

真实的世界不会这样，但是为了游戏性考虑，进入丛林时，会让丛林变得暗淡

我们建立一个CameraDistanceMask的材质函数

随着相机的前后移动，会呈现0-1的变化，Near和Far设置的是200到600厘米，将预览值作为默认值

我们把它乘上不透明模板

确实，裁减了，但是很生硬

我们接着用dither temporal aa


效果还不错

我们注意到，我们的shader很复杂，不过实际用的时候，可以按需选择想要的部分

Lec36 叶片的色彩变化 Foliage Color Variation

这节，我们为树制作颜色变化的shader
如果我们只有一棵树，那很不错，但是如果我们有一座森林呢？
每个树的shader都一样，颜色都一样

实际生活中并不会这样

所以我们想要制作一个材质函数，让每个树的颜色略有不同

我们需要将这个纹理，从上到下投影到世界空间，每棵树，对这个纹理做稍微不同的采样，将树的纹理和这个噪声纹理混合起来
（我做不到一样，就用其他噪声纹理替代了）

以下是这个材质函数，绝对位置作为梯度，物体位置作为基准决定颜色
1000是基于位置的比例，0.5是混合程度

同时我们发现以前的叶子有些黑边，在此做一些修改


创造了几棵树，使用同一个shader，他们随着位置的不同，采样了纹理的不同位置

Lec37 叶片随风飘舞 Foliage Wind Sway

这节，我们要加入风的做法
之前的动图，我们看得到树干在摇摇晃晃的，但是我们的叶子整体保持不动

确实之前我们做过叶片动画，但是那是像素的UV移动
这次我们让顶点动起来

我们的风，既能wiggle（小幅度、快速的扭动）也能sway（节奏比较缓慢的摇摆，摇曳）

1 Wiggle——小幅扭动

也就是我们要专注于世界位置偏移了
我们会用到这个节点

wiggle非常好做，这就是它所要用的

它最后连出来的是

2 Sway——缓慢摇摆

Sway略显复杂，我们需要用到一个节点，RotateAboutAxis

Position使用世界位置
PivotPoint，我们不会使用ObjectPosition而会是原点
NormalizedRotationAxis，需要风向和向上向量的叉积
RotationAngle，需要两组正弦波叠加
同时在Sway最后，让上面叶子动的多，下面动得少，最后的最后和之前的Wiggle进行叠加，连到偏移上

UE4 Material 101学习笔记——30-37 植物叶片（透光/mask/面片隐藏/法线调整/AO/渐隐/世界空间色彩/随风舞动）相关推荐

1. UE4 Material 101学习笔记——08-12 凹凸和视差贴图/纹理压缩/布料/体积冰/摇曳树叶

   UE4 Material 101学习笔记--08-12 凹凸和视差贴图/纹理压缩/布料/体积冰/摇曳树叶 Lec08 凹凸和视差贴图 Bump Offset and Parallax Occlusio ...

2. UE4 Material 101学习笔记——01-07 介绍/PBR基础/UV扭曲/数据类型/翻页动画/材质混合/性能优化

   UE4 Material 101学习笔记--01-07 介绍/PBR基础/UV扭曲/数据类型/翻页动画/材质混合/性能优化 Lec 01 什么是着色器 What Is A Shader? 1.1 介绍 ...

3. UE4 Material 101学习笔记——23-29 水涟漪/水深/折射反射/Gerstner海浪/波光焦散/泡沫/FlowMap

   UE4 Material 101学习笔记--23-29 水涟漪/水深/折射反射/Gerstner海浪/波光焦散/泡沫/FlowMap Lec23 水的表面涟漪 Water Ripples Shader ...

4. 【UE4 Material 101学习笔记】 ：Lec08/10/11/12 视差贴图的应用/布料着色/体积冰效果/树叶摇动

   Lec08 视差贴图 原理 LearnOpenGL视差贴图 1. 使用高度图偏移UV 未使用高度贴图偏移UV时 使用之后,表面不平坦产生的阴影会更为明显一些. 当角度较大时,失真比较明显. 2. 视差 ...

5. material design学习笔记

   material design学习笔记 转载自 http://colachan.com/post/3416 图多,耗费流量7.6MB,请在WIFI下打开 自从material design发布以来,可 ...

6. 深度学习笔记（37） 交并比

   深度学习笔记(37) 交并比 1. 交并比 2. 评价准则 1. 交并比 并交比(Intersection over Union)函数,可以用来评价对象检测算法,判断对象检测算法运作是否良好 在对象检 ...

7. UE5 Shader基础学习笔记——13-20 DetailNormal/Smoothstep/Length/CeilFloorRound/DDXDDY/SinCos/Power

   UE5 Shader基础学习笔记--13-20 DetailNormal/Smoothstep/Length/CeilFloorRound/DDXDDY/SinCos/Power Lec13 Deta ...

8. iView学习笔记(三)：表格搜索，过滤及隐藏列操作

   iView学习笔记(三):表格搜索,过滤及隐藏某列操作 1.后端准备工作 环境说明 python版本:3.6.6 Django版本:1.11.8 数据库:MariaDB 5.5.60 新建Django ...

9. 影像组学视频学习笔记(30)-SMOTE解决数据不平衡的问题、Li‘s have a solution and plan.

   本笔记来源于B站Up主: 有Li 的影像组学系列教学视频 本节(30)主要介绍: SMOTE解决数据不平衡的问题 SMOTE基本介绍 SMOTE (Synthetic Minority Over-sa ...

最新文章

1. C语言中整型在计算机中的存储
2. 剑指offer_第5题_用两个栈实现队列
3. 两个字符串之间的连接函数，不使用strcat()函数
4. Centos6.4安装ipython
5. 猎豹MFC--TH_双管道--对管道的操作就想对文件的操作一样
6. android ImageButton显示本地图片
7. 编译驱动时出现Cannot open file trace.h错误
8. thinkphp字符截取函数msubstr()
9. Shell脚本基本命令3
10. oracle查询一张表的主键,Oracle查询表主键、外键
11. python对一串列表计数然后画扇形图_python – 按行分组的DataFrame列的高效计数
12. 输入一正整数，将各数字反转后输出
13. 仿弹个课教育类APP项目，客户端+服务端
14. CAD中插入外部参照字体会变繁体_CAD缺字体时为什么有些字体无法替换？大字体什么意思？什么是形文件？...
15. python-pandas-简单的excel表格按行去重
16. HTML5入门 之下拉菜单
17. java定义一个描述三角形的类_用java语言定义一个三角形类 Triangle ,
18. [从头读历史] 第246节 夏商与西周
19. MTK处理器心路历程
20. BigDecimal 往左移动两位小数_妻子的浪漫旅行：对比之下，这两位妻子拍照超“甜蜜”，亲疏立见...

热门文章

1. 学习-输入正整数m，判断m是否是素数
2. 搭建IIS服务器发布ASP网站
3. mysql marked crashed_MySQL解决is marked as crashed and should be repaired故障
4. 计算机学院青年教师讲课,计算机学院第六届青年教师讲课比赛成功举行
5. react报错: Unable to preventDefault inside passive event li ……
6. 这几个游戏玩不通关你还算黑客？
7. 语法基础课第二节判断语句（知识点和题目）
8. 【C语言练习】1.1弹跳小球
9. python做兼职_“隐形贫困者”自学Python做副业，教你如何月入10000+
10. 修改jar 注入_瑜伽经典体位新花样：15个传统姿势+变化 注入新活力 精细