Shader Graph Basics_Ben Cloward

嘟嘟小魔王_

已于 2023-10-21 19:33:31 修改

阅读量419

点赞数 2

分类专栏： Unity Shader学习文章标签： unity

于 2023-10-04 10:35:37 首次发布

本文链接：https://blog.csdn.net/xu1747902112/article/details/133544867

版权

Unity Shader学习专栏收录该内容

11 篇文章 2 订阅

订阅专栏

//这篇文章是学习Ben Cloward材质教程的笔记，每日更新一集，笔记要是看不懂就回去看原视频，Shader Graph文件我会放在github。这篇已经更新完了o(〃’▽’〃)oDafenyuyu/Shader_BenCloward: 学习BenCloward材质教程的ShaderGraph文件 (github.com)

Episode 2——The Graphics Pipeline - Shader Graph Basics

在Unreal中实现简单的顶点动画和UV动画

在Unity中实现

效果

Episode 3——Your First Shader - Shader Graph Basics

这一节只教了一下如何创建你的第一个Shader，很简单就不记录了，但是有一点需要了解，在unity创建Blank Shader Graph的时候，创建出来的东西是紫色的，需要添加一个Active Targets

Episode 4——Basic Shader Math - Shader Graph Basics

这一节教了一下加减乘除的用法。One Minus节点可以翻转黑白，最后实现了UV流动的效果。

Unreal中实现节点

unity中实现斜着流动

unity中垂直流动

Episode 5——Understanding Texture Maps - Shader Graph Basics

查看贴图在引擎中的资源占用量

Unreal中，双击贴图的右上角

unity中，单击贴图后Inspector面板底部的位置

不同格式、分辨率，以及使用不同通道下情况下贴图的大小对照表

DXT1、DXT5、BC7是经过压缩后的图像，虽然很小，但是可能会出现伪阴影，分别支持三通道、四通道和三四通道。R、RGB、RGBA是没有经过压缩的图像。通常使用带Alpha通道的图像会比不带Alpha通道的图像大一倍。

Unreal中不同类型的贴图设置，不需要Alpha通道的图开启无透明度压缩，默认压缩格式是DXT1/5，没有出现伪影的情况下可以使用。如果将压缩格式设置为用户图形界面2D，那图片的格式就会变为B8GBR8A8。根据贴图需要可以开启或者关闭sRGB这一选项。如果是灰度图可以设置为单通道。

Episode 6——Linear Interpolation Node (Lerp) - Shader Graph Basics

拆解一下Lerp节点

假如有一个红色和一个蓝色，然后我想用一个值来控制它，这个值为1时就是蓝色，为0时就是红色，所以就需要有，当1乘蓝色时，要有零乘红色，这个0可以通过One Minus节点得到，然后将这两个乘后的值加起来就能满足开始的需求，用unity做示例

如果觉得用三个节点太麻烦，那直接用lerp这个封装好的节点就可以

一些Lerp的用法

Episode 7——Dot Product Node - Shader Graph Basics

了解一下点积是如何运算的

点积的一些运用

法线方向和视角方向进行点积并去反可以得到菲涅尔效果

Episode 8——Texture Coordinates - Shader Graph Basics

这一集讨论的是uv的一些应用，乘缩小，除放大，加减位移

这里学习一个节点，Append，可以将两个一维数据转化为二维数据

扰动效果

Unreal中实现扰动效果（这样连可以避免重复的扰动效果，三个RGB三个通道的内容都不一样）

unity中的效果实现

Episode 9——Input Vectors - Shader Graph Basic

这一集讨论一下输入矢量

一些向量的应用

Saturate节点去饱和度，Negate节点变负

根据范围取遮罩，先获取相机与物体之前的距离，减掉一个值再去除一个值，例如下图，物体距离相机位置大于9.5的地方就会变白，反之为黑色

布料材质模拟

棉布材质的特征通常表现为边缘有发白的效果

丝绸则为中间发白

在Unreal中模拟这种效果，为了具有更多的可控性，这里不使用fresnel节点。简单理解就是，视角方向和世界空间法线方向做点积会产生边缘发黑的效果，使用Oneminus节点反一下可以实现菲涅尔效果，再使用power进行发白区域控制，乘一个常量控制发白的亮度。反之如果不使用OneMinus节点则可以模拟丝绸的高光效果。这里使用的切线空间法线转世界空间法线的节点是TransformVector。

在unity中模拟

Episode 10——View, World, Object, & Tangent Space - Shader Graph Basics

unity中实现Matcap

材质混合

unity中使用法线G通道来划分遮罩，并配合Lerp在模型顶部混合不同的材质，法线由切线空间转换到对象空间时，这个混合的材质是能跟着模型动的，如果是转化到世界空间，那这个混合的材质就永远保持在最上面。Contrast（对比度）和Saturate（饱和度）也是用来配合划分遮罩

Unreal中实现也大差不差

Episode 11——Min, Max, Clamp, & Saturate

限制性节点的作用

使用Split节点分出法线向量的G通道的范围是-1~1，用这个得到的遮罩作Lerp会有一些不正确的结果，所以可以使用Saturate将其范围限制在0~1

Unreal中使用也类似

Episode 12——Blending Normal Maps - Shader Graph Basics

如何分辨法线贴图的格式

Unreal使用的是DirectX，Unity使用的是OpenGL，区别就是绿通道的朝向不同。这里有一个辨别小技巧，红橙黄绿青蓝紫的顺序，顺时针为DX，逆时针为OpenGL，红色在右边为凸，左边为凹。

混合法线贴图的几种不同方法

第一种（Sample）：可以理解为将法线贴图的RG通道相加，优点是和混合之前的消耗差不多，缺点是会将法线贴图强度降低。

这个节点在高版本的SG中会有，作用和Channel Mask差不多，但是更强大的地方是，输入的XY表示输入的R放入输出的R通道，输入的G放入输出的G通道,如果输入YX则表示，输入的G放入输出的R,输入的R放入输出的G

第二种（UDN）：在Combine那一步，B通道使用了基础法线的B通道，并在最后做归一化处理，好处是基础法线的细节得到了保留，缺点是性能消耗更大一点点。

第三种（Whiteout）：和UDN相似，不同的是Combine那一步使用的是两个法线贴图B通道相乘的结果。质量会更好，性能消耗也会更大一点点。

第四种（RNM）:和第三种消耗一样，但是结果更准确，计算过程很复杂

第五种：使用法线混合节点

有两种混合模式，默认是使用WhiteOut，Reoriented模式下使用RNM混合

Episode 13——Detail Normal Mapping - Shader Graph Basics

这一集讨论细节法线贴图

教程中的做法是基础纹理颜色和粗糙度合成一张贴图，Detail贴图的RG存细节法线的RG，B通道存粗糙度，A通道存一个去色的颜色信息。法线贴图首先要解码，Detail的RG通道乘2减1，再用计算Z通道的节点，算出法线贴图信息，再用BlendNormal节点进行混合。粗糙度贴图直接相乘即可。颜色贴图使用Blend节点的Overlay模式进行混合。

解码法线的节点

Episode 14——Advanced Detail Mapping

这一集讨论高级细节贴图的制作

在unity中，传统艺能下，我们想要通过遮罩来划分某些区域的贴图，我们通常会在RGBA是个通道划分不同的区域以实现效果，这样做有一个好处能使贴图有过渡的混合，但也会让贴图数量非常多，这里不过多赘述。

这里讨论另一种方法，使用TextureArray纹理数组，并使用不同数值的灰度来区分遮罩

先来看看unity中的TextureArray怎么制作，首先需要将纹理进行手动排列，就行下面这样，然后TextureShape设置为,怎样排列的就怎样设置行列，我这里设置为2x2。如果是横着排的那应该可以设置为4x1（这里没有尝试过，不知道是否能成功）。然后调节贴图的Array值就可以显示不同的贴图。SG中对应调整Index值。

接下来是遮罩图的做法，可以拉一个渐变取，四个区域的值，这张图存的是灰度信息所以不需要勾选SRGB。数值取对后，统一乘3，配合四舍五入节点Round，就能得到对应区域的0123值

接下来看节点，这里法线需要使用Normal Unpack节点转为切线空间

虚幻中如何制作

右键创建一个2D纹理数组

、

添加四个源纹理依次放入就行

看节点

Episode 15——Smoothstep - Shader Graph Basics

SmoothStep这一节点可以理解为，限定范围内的值将保持0到1的平滑过渡（不是线性的），范围外则保持0或者1

做一个消融效果

Sin Time的范围是-1到1，将其映射到0.5~1.5再减去一个和0.5相近的值，就能够实现0到1再到0的过程，用SmoothStep限定遮罩再相减就能实现描边消融效果

还有一个限定高度的遮罩教程，请看原视频（因为暂时没搞懂）Smoothstep - Shader Graph Basics - Episode 15 - YouTube

Episode 16——Length & Distance

这集讨论距离和长度节点

第一个案例，相机五米之内物体变黑

第二个案例，树叶摇曳

第三个案例，一个非常酷的亮点

Episode 17——Ceiling, Floor, & Round Nodes

取整的一些节点

Ceiling向上取整，Floor向下取整，Round四舍五入

示例1：请看第14集的遮罩划分

示例2：法线方向点乘光方向，再Remap到0到1得到半兰伯特，乘5用floor，再乘0.15得到颜色分级

Episode 18——Derivatives DDX DDY

导数节点

案例1：通过测量DDX和DDY的斜率来计算各个面的法线，然后使用专业叉积来找到每个面的法线

案例2：贴hdri的方法。mip值模式需要改为导数

案例3：bump转法线（下面零散节点是原理，上面那一个是封装好的），unity中对应的是Normal form height

Episode 19——Sine and Cosine

水波纹效果

案例1:黑白变化

案例2：水波纹效果，Fraction节点的作用是取余，取余减1获取一个-1到0的被减数，乘第一个8是为了让这个圆变得更实一点，第二个乘乘的数越大，波纹的圈数就饿越多。

案例3：弹跳效果

案例4：UV旋转。SG中有封装好的节点就是UV下的Rotate

Unreal中实现

Episode 20——Power

Power就是数学里面的次幂

越大越暗，越小越亮

Power的一些用法

关于图像的那个SRGB开关也就是伽马矫正，Power值为2.2可以将未勾选的图得到一个近似于勾选后的值，如果勾选了的图，Power值为0.45则可以得到一个近似于未勾选的图

Episode 21——Shader Performance Measurement

Shader编译流程

友情链接视频中计算Shader性能的链接 Shader Playground (timjones.io)

Ben计算好的对应指令消耗的列表Instruction Cycles - Google 表格

Episode 22——Shader Performance Measurement Part 2

PIX测量Shader的性能

Shader Performance Measurement Part 2 - Shader Graph Basics - Episode 22 - YouTubeh

Episode 23——Advanced Channel Packing

高级通道打包

正常情况的贴图打包

精简后的

因为AO和法线贴图的B通道相似，所以将AO贴图放在法线贴图的B通道，这种贴图打包方式在压缩后相对于Normal的专用压缩格式来说细节上会有一些损失。使用于植物、石头这一类物件。

根据GR通道解码法线贴图

UE中封装好的节点为DeriveNormalZ，unity为Normal Reconstruct Z

Episode 24——Reflection and Refraction Vectors

反射和折射

eta是空气的折射率除以玻璃的折射率，折射后图像会倒过来，就像透过玻璃珠看物体，如果不做这些操作，默认反射和折射的内容就是场景中的内容

由于SG中没有折射节点所以需要自定义一个

Episode 25——Swizzle & Channel Manipulation

一些通道拆分与合并节点

这些节点都是免费的不会有额外的性能消耗。Unreal中的合并是Append，unity中的是Combine。Swizzle在较高版本的SG中才会有。

把UV变成VU来旋转图片

Episode 26——Using Position Data

一些位置数据的用法（位置不同遮罩不同）

Absoult Position是相对于世界坐标原点的位置数据

下面·这个案例用于树木的颜色变化非常好用，不同位置有不同的颜色遮罩，拿这个遮罩数据做Lerp

Unreal中的用法

Episode 27——Direction Masks

根据法向量取不同方向的遮罩

Unreal中实现

Episode 28——Triplanar Projection

三平面投影

需要结合上面两集来看

直接用封装好的节点Triplanar和这种昂贵的效果是一样的，至于使用世界空间还是模型空间根据实际需求来定有点不求甚解了，等实际用上了再说吧

Unreal中的实现

Episode 29、30——是讲三平面投影的映射翻转，以及三平面投影的法线。直接看这个老哥写的吧，这一块有点烧脑。可能他写的也不是很明白，再贴图一个原视频的链接shader着色器基础课21-30_noh贴图-CSDN博客

Triplanar Projection Normal Maps - Shader Graph Basics - Episode 30 - YouTube

Episode 31——MatCap

正确的Matcap做法

Episode 32——LatLong Projection

unity中采样2D格式的HDRI

Unreal中LongLatToUV节点的实现原理

Episode 33——Creating Cubemaps

虚幻中需要未压缩的DDS格式才能够被导入，制作插件下载链接纹理工具导出器 |英伟达开发者 (nvidia.com)

虚幻官方对于Cubemap的一些介绍，创建、导出、导入、使用立方体贴图 |虚幻引擎4.27文档 (unrealengine.com)

笔记就看看他写的shader着色器基础课31-40_unity matcap 卡通材质-CSDN博客

Episode 34——Interior Mapping

内部映射（假室内）

先来构建一个三分量的UV坐标

然后这样连就行（主打一个装懂，但是这样连是能实现的，后面有时间再去弄清楚原理吧）

Cubemap的格式可导入HDR或者DDS，EXR不行，dds格式被压缩了也导不进，只能用33集中说到的那个英伟达插件，所以想要简单快捷还是用HDR吧

Unity中实现

Episode 35——Random Noise

随机的室内效果

直接增加行列数会显得太过规律，所以要给这种效果添加一些随机

先构建一个材质函数

然后这样连

随机后的一个效果

Unity中实现

先做一个Sub Graph

然后请这样连

Episode 36——Interior Mapping Polish

给假室内效果加上外墙以及内部随机自发光

unity中实现，先定义一个Sub Graph，大部分是复制上一节课的，然后定义了两个输入和输出接口

然后请这样连，中间部分的菲涅尔效果是为了让窗户看起来更像玻璃

Unreal中实现

先定义材质函数

然后这样连

Episode 37——Object Space Interior Mapping

更正确的显示效果

从顶部往下看会显示地面，从底部往上看会看到天花板

Hash33

然后这样连，Branch那里连不上可能需要高版本的SG

Unreal中实现

Hash33

材质函数

Shader小改变

Episode 38——Toon Shader Paint

卡通着色器

主要包含三个要素：绘画、镜面高光和描边，这一集主要制作绘画，要注意的事情是我们实际上是在着色器本身创建照明，之前大部分着色器用的都是引擎中的照明所以这里模版选择Unlit

第一种卡通效果的方法在第十七集有，这里我们直接介绍第二种，做一个这样的渐变图，并按照下面的方式进行压缩设置，如果不这样设置显示效果可能会有问题

用半兰伯特作为U向输入，再用一个Slider节点作为V向输入，这样的话调节Slider值就能拥有不同的渐变效果

Unreal中实现，UE中没有Slider节点。图片压缩要关掉SRGB然后压缩格式选用户图形界面2D

Episode 39——Toon Shader Ink Outlines

卡通外描边

方法1，根据前面的向量方面的教程我们了解到法线向量和视角方向做点积可以有反的Fresnel效果，刚好最外面有一圈黑的，然后我们让这个结果更加具体，所以用if节点，并设置一个阈值，大于这个值就返回1，小于就返回0。这个阈值也刚好能控制描边的粗细。但这种方法在某些物体上用不了，例如正方体

方法2：就是复制一个网格并沿法线挤出一点点，然后翻转面法线，再赋予一个黑色的材质

方法3：是基于后处理完成的，再深度缓冲区上运行一个查找边缘过滤器，以便在深度缓冲区中找到深度突然跳跃的位置，然后遮蔽那些黑暗的地方。重要的是Ben没教。。。这里贴一个链接教程Selection Outlines Without Post-Process Material - [UE4 Tutorial] - YouTube

Episode 40——Toon Shader Specular Highlights

卡通着色器的镜面高光Blinn&Phong

Blinn是半角和法线向量做点积

先加可以看出带一点点贴图的染色，后加就是比纯白，round后的高光比较硬，根据效果选择方式。个人感觉Phong比Bilnn好看

Unity中实现，需要注意的是，Unity的值会被限制，所以在Unity里面就直接后加

Episode 41——Tessellation and Displacement

置换

用的是Unity里面的功能，并没有教曲面细分是怎么实现的

遮罩用于控制细分区域，这个可以提神着色器性能。通常情况下，正视一个物体法线贴图就能拥有足够好的效果，假在边缘，所以边缘需要更多的置换效果，所以用法线向量和视方向做点积得到反着的类似Fresnel的效果，再用OneMinus取反并连入Tessellation Factor这个接口。这个功能只在HDRP中有，URP中没有