广州企业网站设计方案,网络维修,什么是网络社交,大良网站设计使用着色器#xff08;shader#xff09;和材质#xff08;material#xff09;#xff0c;我们能够创造出非常多有趣的效果。除了Unity自带的shader外#xff0c;还可以自己编写shader或使用其他人所编写的shader。编写shader通常需要我们了解shader编程语言的语法和相关… 使用着色器shader和材质material我们能够创造出非常多有趣的效果。除了Unity自带的shader外还可以自己编写shader或使用其他人所编写的shader。编写shader通常需要我们了解shader编程语言的语法和相关特性总体来说入门难度相对较高Shader Graph这个工具能够让编写shader的过程更加容易。 Shader Graph可以让我们不用写代码就创建一些专用的shader。比如你能够组合不同的纹理让它们在片元着色器中移动位置或者在顶点着色器中改变顶点的位置。在专业的技术美术technical artist的手中shader能够创造出千变万化的视觉效果。
打开已有的Shader Graph Shader Graph从名字来看就是想让我们用画图表的方式来创建shader。我们先来看看Shader Graph打开后的样子。在下面例子中有一个Example_Shimmer的shader它是通过Shader Graph创建的。在工程中直接双击这个文件即可打开它。 第一次看到这个界面脑子会比较糊没关系我们接下来创建空的Shader Graph窗口来看。
Shader Graph窗口 首先我们在项目窗口中右键新建一个Shader Graph,名字为Shimmer_ShaderGraph,创建好后双击打开我的工程目录中创建Shader Graph的位置是Assets CreativeCore_Shaders ShaderGraphs渲染管线是URP因此右键选择Create Shader Universal Render Pipeline Lit Shader Graph(Unity版本2020.3.43f1c1): 1Shader Graph工具栏这里可以保存shader 2Blackboard黑板包含了所创建的shader可供外部所使用的属性。在这里我们可以定义属性的类型名字默认值等 3Workspace工作空间用于创建shader的node graph的地方 4Main Preview window主预览窗口可以实时预览当前的shader效果 5 Graph Inspector window类似于Unity Editor的Inspector面板显示当前设置、属性和所选择的node的相关信息 6 Master Stack主堆栈定义着色器最终表面外观的着色器图的终点一个 Shader 中有且只有一个。它列出了顶点着色器和片段片元着色器的主要着色器属性并提供插入必要值的终端节点 在Shader Graph窗口中 平移鼠标中间按住后拖动可以实现平移或者按住Altwindows或Option(Mac 缩放滚动鼠标滚轮 聚焦和放大元素选中元素后按F按A恢复 了解了基本的Shader Graph窗口后我们以一个案例来练习一下。这个练习目标是创建一个自定义的shader带有发光glowing、透明transparent和微光shimmer的效果。
添加程序化贴图Procedural map 对于微光shimmer的效果我们使用程序化噪声贴图procedural noise map来实现。程序化Procedural的意思是纹理是通过方程或算法来创建的而不是从图片创建而来。Shader Graph提供了少量可选的程序化噪声贴图每种贴图会产生像云朵流动效果的贴图。 下面我们来在Shader Graph中添加第一个节点node: 1. 在Shader Graph的工作空间中按空格键打开Create Node菜单也可以用右键选择Create Node 2. 在搜索框中输入noise然后选择Gradient Noise 3. 在工作空间中选择新建的Gradient Noise查看结果 让程序化贴图动起来 回忆一下之前讲过的纹理的Offset属性它可以改变物体表面从纹理的哪个位置开始映射。前面一小节生成的贴图是一个随机的噪声图我们可以让Offset值不停地变化来让这个图动起来。 正如Tiling和Offset在URP/Lit Shader中是一起出现的一样Tiling和Offset在Shader Graph中也是绑定到一个节点中的。 1. 在工作空间中按空格键或右键在弹出的窗口中创建一个Tiling and Offset节点。这个节点可以用来调整noise map的缩放参数和起始位置 2. 拖动Tiling and Offset节点的output到Gradient Noise Node的input。完成连接后在Tiling and Offset里的值就会影响到Gradient Noise 3. 改变Tiling and Offset节点上的Offset值看看实际的效果。 4. 创建一个Time节点这个节点可以让我们随着时间变化改变一个值 5. 由于我们想要Offset随着时间变化因此我们将Time节点的output和Tiling and Offset节点的input连接起来连接后我们就可以看到noise纹理动起来了 注意到Time节点有几种选择对于Sine/Cosine Time其效果就是一个来回往复的效果正如正弦、余弦函数是周期函数的性质一样 6. 最后我们将Gradient Noise节点的output连接到Master Stack的Base Color这样就能看到这个材质所呈现的效果了 注意记得经常使用Shader Graph窗口的左上角的 Save Asset保存你的成果 添加材质的可输入属性 对于使用你所创建的材质的艺术家或你自己而言如果我们能够提供外部可调的参数来控制材质的效果比如本例子中shimmer效果的移动速度那么这个材质会变得更加实用。要实现这个功能我们可以使用input node来设置材质属性允许使用者修改最终效果。 Input node在Blackboard中创建黑板的标题和shader的名字是一样的。 1. 在Blackboard上点击“”选择Float创建一个浮点值input node。将其命名为“ScrollSpeed”。使用这个input node使用者就可以通过输入一个浮点数来调整滚动速度了 2. 拖动刚刚在Blackboard中创建的input node到工作空间中 3. 由于Time节点并没有input节点我们无法直接将ScrollSpeed的输出和Time节点输入连接起来。这里我们用另一种方式来实现这两者的结合创建一个Multiply节点它可以用来将两个值组合到一起组合的方式是相乘并输出结果。 提示还有一种让Create Node菜单出现的方法就是拖动ScrollSpeed的output节点到工作空间的空白处然后松开鼠标左键这时就会出现Create Node菜单。 4. 我们将原来Time节点的output和Tiling And Offset之间的连接改到ScrollSpeed连接的Multiply节点上的B输入上要删除原来的连线可以选择原来的连线然后按delete接下来将Multiply节点的output和Tiling and Offset的input连接起来。 注意此时noise贴图停止运动了。这是因为ScrollSpeed的默认值是0因此Multiply所返回的结果是0因此Tiling And Offset节点中Offset的值固定为0所以就没有动的效果了。 7. 要修改ScrollSpeed的默认值选中ScrollSpeed在Graph Inspector中输入一个默认值。 贴图组合 前面的几个小节中我们已经实现了一个能够移动的噪声贴图我们还可以再增加一个造成贴图让这个贴图移动速度不同然后叠加组合这两幅噪声贴图的效果来实现更有趣的效果。 首先我们先复制一份原来的Gradient NoiseMultiplyTiling And Offset节点不用选择Time或ScrollSpeed。 1. 在工作空间中拖出一个方框框住这些节点或者通过按住Ctrl后点击这些节点 2. 选中所有要复制的节点后点击右键选择Duplicate然后复制这些节点也可以用CtrlD 3. 接下来我们调节一下复制出的噪声贴图的移动速度这里我们要将移动速度变慢。因此我们增加一个Divide节点用来做除法将Time的Cosine Time的output连接到Divide节点的A输入然后设置B输入为2表示Time输出的值除以2. 4. 将Divide节点的output和Multiply的B节点连接起来 5. 现在我们得到了两张不同移动速度和方向的噪声贴图为了将它们的效果融合到一起。我们再新建一个Multiply节点然后将两个Gradient Noise Map的output连接到Multiply的A,B输入然后将Multiply的output连接到Master Stack的Base Color上 使用节点分组功能 当Shader Graph中节点数量变得庞大时我们有必要对完成特定功能的节点进行分组管理以便让图看起来更加简洁。下面我们将所有用来生成Offset值的节点不包括Gradient Noise节点放大一个Group中来维护。 1. 首先选中所有的节点如下图 2. 在任意一个选中的节点上点击右键注意不是工作空间空白处点击Group Selection或者按Ctrl G(MAC上按CMDG) 然后将Group的名字改为“Changing Offset over Time” 当这些节点被划分为一个group后我们可以对它们做整体移动管理并且从逻辑上看这些节点的功能一目了然
调节纹理的缩放 在实际使用中我们要让shader尽可能的有更多的灵活性。当前的shader的纹理看起来有些密集我们可以添加一个input节点来调节纹理的缩放效果。 本例子中我们会增加一个叫GradientScale的浮点类型输入节点然后实现两个Noise Map有不同缩放比例的效果。具体的过程不再详细描述使用之前的知识已经完全足够了下面的示例图是一个参考大家练习的时候可以自由发挥创造出不同的效果。 调整对比度 目前为止我们的shader已经越来越有微光的效果了但效果本身只有黑白两种对比强烈的颜色并且也无法修改颜色。 要调整对比度我们需要使用Remap节点它可以将0-1范围的值缩到更窄的范围内。 1. 首先在Blackboard中增加一个Vector2 input节点它只有两个值。我们取名为RemapValues将它拖到工作空间中并设置Y为1 2. 增加一个Remap节点到工作空间 3. 连接之前作为Base Map input节点的Multiply节点的output到Remap的的In节点 4. 连接RemapValues节点到Reamp节点的Out Min Max这个值指定了Remap节点所能输出的值的最小值和最大值可供外部进行调节 5. 确保Remap节点的In Min Max的值设置为了0和1这个值是用来匹配输入值In的实际范围的。 6. 在Graph Inspector中调节一下RemapValues的默认值 7. 将Remap节点的output和Master Stack的Base Color进行连接看看实际效果 调整颜色和透明度 为了能够调整颜色我们再添加一个Multiply节点让当前Remap输出的颜色和一个TintColor的input节点进行叠加有了之前的基础这里应该很容易能够完成。 如果要让颜色看起来更加突出这里TintColor的Mode可以选择HDR。 颜色看起来似乎还是不够突出我们还可以将Multiply节点的output连接到Master Stack的Emission节点上看看效果 接下来我们来实现透明效果在Graph Inspector中在Graph Settings标签页上将Surface改为Transparent然后将Remap节点的output和MasterStack的Alpha连接起来 最后的练习 观察目前为止我们所创建的Shader的Master Stack里面还有Metallic和Smoothness这两个值我们没有动过我们可以尝试添加Input节点来让使用者能够调节这两个值这个练习留给大家自己实现。 重要提示记得点击Save Asset及时保存你的进展
创建一个测试材质 到这里我们已经创建出了一个shader了要使用这个shader我们创建一个新的材质取名为MyShimmerMaterial然后将这个材质的Shader选择为我们用Shader Graph创建的shader 我们将其应用到场景中的某个模型上看看实际效果 Shader Graph更多的探索 上面的练习我们创建了一个简单的shader并且应用到了材质上。Shader Graph还有许多东西值得探索在具体使用过程中我们可能会想要了解某一个节点的详细帮助信息。我们可以在Shader Graph中选择一个节点右键点击后选择Open Documentation选项Unity会帮助我们打开这个节点相关的文档。 Unity官方关于Shader Graph的手册地址About Shader Graph | Shader Graph | 10.7.0 Unity官方的一个制作飘扬的旗帜的案例Make a Flag Wave with Shadergraph - Unity Learn Unity资源商店中其他创作者的案例Unity Asset Store - The Best Assets for Game Making
