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

UE4植物材质技巧
原创 已于 2023-03-14 20:35:04 修改 · 8.2k 阅读 · 92 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#ue4 #学习

于 2021-03-20 00:50:17 首次发布
本教程探讨UE4中植物材质的高级技巧，包括叶片透光、贴图打包、面片隐藏、法线调整等，旨在改善树叶的真实感表现。

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

本系列学习资料来源，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可能和插片的方向一样，导致法线和插片的面法线垂直了，直接黑掉了
在这里插入图片描述
过黑是否可以这样规避？将bentnormal和面片法线叉乘，如果要黑掉了就换成面片法线，其他情况用bent normal？（当然最好还是插片的时候就让面片别和球形法线朝向偏差太大）
在这里插入图片描述

Ben后来的做法，改用面法线，vert normal
在这里插入图片描述

2023.3.14备注
对于叶子纹理，一面凹下去必然另一面凸起来，所以不需要乘以 two side sign来让两面保持一致，下图称了twosidesign是2号结果，而树叶来说1号结果就是正确的
在这里插入图片描述
关于球形法线，感觉可以球形法线和面片法线点乘作为插值，如果是球形法线和面片法线快垂直了，则优先面片法线，如果两者法线接近则使用球形法线

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 渲染半透明物体进深度剔除（复制物体）
Auroraの技美小栈
08-14 5323
在渲染半透明材质时会出现半透明物体重叠的现象，用深度剔除的方式可以解决。 在材质里 原理：利用CustomDepth 首先复制一个模型，将复制出来的模型 节点如下 bug解决: 当出现黑色时： 是因为原本的第二个物体（渲染深度的不透明物体）勾选了render in Depth Pass 解决方法：取消勾选render in Depth Pass，只需要将custom Depth pass勾选 参...
虚幻UE 材质-材质编辑器节点2
UE成长之路，欢迎大家的关注！
01-09 1949
本篇主要对ReflectionVector HDR全景效果展示Material Parameter Collection材质参数集的实时修改材质TwoSideSign和VertexNormalWS顶点对物体描边的实现要多用材质实例、材质参数和材质函数，这些可以让你的内容更加灵活。材质好难啊！！！
Advanced Materials_Ben Cloward
寻找嘟嘟大魔王
10-24 506
Ben的高级材质教程Advanced Materials
Unity3D通透材质Shader实战：次表面散射技术详解
最新发布
weixin_30600615的博客
09-28 484
Shader是GPU执行的程序，负责顶点变换、光照计算与像素着色，在Unity渲染流程中处于关键位置。它通过ShaderLab语法定义结构，并嵌入CG/HLSL代码实现具体算法：PropertiesSubShaderPassCGPROGRAMreturn o;ENDCG该示例展示了一个最基础的无光照纹理渲染Shader，体现了从属性声明到顶点-片元函数的完整结构。
UE4入门实例13（制作外发光材质及TwoSidedSign、VertexNormalWS节点）
Unity3d 攻城师一枚
02-28 4874
#1 外发光效果展示 #2 TwoSidedSign节点展示 #3 VertexNormalWS节点展示 #1 外发光效果 材质球设置 Blending Mode设置为Mask，因为我们不需要全部外发光 Shading Model设置为Unit，因为我们需要的是自发光材质，且不受到光照的影响 设置为双面渲染，防止看穿模 蓝图编程 #2 TwoSidedSign节点 #3 VertexNormalWS节点 呼吸效果蓝图编程 ...
UE4 Material 101学习笔记——01-07 介绍/PBR基础/UV扭曲/数据类型/翻页动画/材质混合/性能优化
清清！的博客
01-20 6034
UE4 Material 101学习笔记——Lec 01-Lec 01 什么是着色器 What Is A Shader?1.1 介绍1.2 打开UE4材质编辑器Lec 02 PBR基础 Basics of PBR2.1 引入2.2 光照属性2.3 表面属性Lec 03 数据类型 What Are Data Types?Lec 04 扭曲着色器 Distortion ShaderLec 05 特效翻页动画 Flipbook AnimationLec 06 环境材质混合 Environment Blending
UE4 Material 101学习笔记——13-18 完整的雨水着色器
清清！的博客
01-25 6142
UE4 Material 101学习笔记——13-Lec 13 雨水潮湿着色器 Rain Wetness Shader 本系列学习资料来源，Ben Cloward的油管空间，B站的搬运翻译 接下来的这六节，会去讨论如何在表面上产生雨水的影响 像下面这些图的下雨的感觉要如何实现呢？ 我们看得到，雨让东西变得潮湿，雨滴下的水滴会落在物体表面，雨造成了水坑，水坑中会有雨滴的涟漪，雨水会从表面滑落…… 雨做了很多很多事情，我们需要一点点分析 于是在13节我们要讨论如何让表面变得潮湿，14节我们讨论如何创造雨滴
UE4 材质学习笔记11（水波纹着色器/水深度着色器）
Mr_Dongzheng的博客
10-21 1665
首先采样法线贴图，然后使用Panner节点滚动UV制造出水在流动的效果。这里使用绝对世界坐标采样的原因是因为这样可以将水映射到世界空间中的水的平面上，而且我可以使用多个平面，水的效果就会平铺在平面上。接下俩要往波纹中制造一些混乱。所以又做了一层UV扰动并且将两次采样的结果相加，这里的DeriveNormalZ它会取用由这两个法线贴图生成的X和Y，而且它会计算Z，但是可以注意到前面两个缩放几乎相同，分别是0.0035和0.003. 我们呢可以创造一个非常大的图像，就像是些非常大的波纹在缓慢横穿表面。
UE4 材质学习笔记08（雨滴流淌着色器/雨水涟漪着色器）
Mr_Dongzheng的博客
10-11 1187
法线贴图在红色通道和绿色通道上，那是法线的X轴和Y轴，在蓝色通道中 我有个用于雨滴流淌的蒙版，在Alpha通道中，有个时间偏移蒙版。这些贴图都是可以在PS上制作做来的，雨滴流淌图可以直接用笔刷画出来然后模糊下线，然后可以将这个图作为高度图并使用NVIDIA Photoshop插件将其转换为法线贴图直接输出以后是这样的效果，但是我不想用UV坐标把它投射到立方体上，实际上我想把它们投射到世界空间中，这样不管物体有多大，也不管物体去哪里或者如何旋转，这些小水流将始终保持向上和向下的方向。
【UE4 Material 101学习笔记】 ：Lec08/10/11/12 视差贴图的应用/布料着色/体积冰效果/树叶摇动
明天，做什么好呢
04-09 1165
视差贴图、布料着色、体积冰效果、树叶摇动效果
UE4 材质学习笔记09（雨水水坑着色器/完整雨水着色器）
Mr_Dongzheng的博客
10-13 1334
要用到这样一个噪声贴图，我们要做的就是，做出水坑并让水坑在这种浑浊的噪点中产生，因此水坑将从最暗的斑点生长，然后随着它继续占据越来越亮的像素而生长现在水坑将从上到下投射到世界空间中，所以我需要引入WorldPosition(世界位置)节点，使用RG通道，也就是XY分量，因为z分量是向上的，乘上一个较小的数得到一个正确的大小单位。接着调整UV让我们呢只会在最暗的地方得到水坑，首先创建一个常量表示水坑的大小，接着创建两个二维向量表示水坑最大和最小的时候的大小，黑色的就是水坑。
UE4卡通材质
09-04
https://blog.csdn.net/qq_36409711/article/details/82380528 ue4卡通效果
UE4 shader编程 基础学习笔记 --- 熟悉各个节点
qqQQqsadfj的博客
12-27 3345
Texture Sample：用所需要的纹理覆盖到Mesh上，展示效果，Mesh上存在漫反射 + 高光 + 环境变量的和制造出了左上角的纹理光照效果。该节点可以调节RGBA四个参数， 由于Parameter是参数类型，所以可以在外部进行修改。同样的Param，连在Base Color和次表面的效果，明显次表面的效果的饱和度会高很多。金属度越小，越偏向于塑料，越高越有金属质感，最高为1，比1大的效果和1效果是一样的。用于草地被风吹动的效果，将草的顶点进行一个偏移。第三个参数为高光度，高光反射强度的大小。
植被顶点法线朝向修改
游戏场景
05-13 721
植被球形法线
UE风格化Day19-树叶材质
Seedol的博客
11-15 945
UE材质蓝图：树叶材质的制作
UE4--地形篇——风吹草动的草
ljd159的博客
01-22 3602
Aplha通道与草的贴图 如图为打开Aplha通道打开与关闭的贴图效果，可以看到关闭后贴图无背景颜色效果；我们可以打开该通道给材质赋予个体的效果。 将对应的贴图链接起来 材质域选择表面；混合模式选择一已遮罩；着色模型选择双生植物，选择双面（这样可以让植物的双面的效果一致） 得到的效果： 如何制作草的风吹效果？ 可以用材质函数SimpleGrassWind来制作简单的风吹效果： 如图所示： 1.风的强度 2.风的权重 3.风的速度（可以自行调节） 最后总的节点图： ...
UE4_材质_使用彩色半透明阴影
Growthofnotes的博客
07-02 2040
学习笔记，不喜勿喷！侵权立删，祝愿大美临沂生活越来越好！本教程将介绍如何配置虚幻引擎来投射彩色半透明阴影。此功能在许多应用中都很有用，常见例子就是透过彩色玻璃窗的彩色光。
UE4之透视材质教程
热门推荐
董国政的博客
08-04 1万+
首先先看效果图 首先第一步创建一个材质 在细节处修改三个选项： 添加三个节点，按照如图链接 链接好之后编译保存，右击该材质，创建一个实例 打开创建出来的节点，修改其参数 保存即可，然后把制作好的材质贴到场景中就OK了
UE4 WorldPositionOffset
痞子龙3D编程
08-24 5517
WorldPositionOffset Material Function Reference On this page: WorldPositionOffset Functions SimpleGrassWindSplineThickenCameraOffsetObjectPivotPointObjectScalePivotAxisRo
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值