Strumpy Shader Editor入门教程

   对于3D游戏来讲，有不少绚丽的效果，都是靠shader（着色器）来实现的。不过不少朋友估计都不会编写shader，阿赵我本身也只是看了个入门，明白了它的原理，不少具体的效果都写不出来的。此次来介绍一个Unity3D的第三方shader编辑器：Strumpy。这个编辑器是彻底可视化编辑，使用起来相对简单一点。

先来看看咱们此次须要作的例子：

咱们须要使用Strumpy，编辑出这样一个shader：包括了漫反射通道、法线通道、高光通道，以及在模型的边缘运动的光效。

很显然，Unity3D自带的shader没有能直接实现这样的功能的，最多也只能使用法线和高光通道而已。

 

      因为这个例子稍微复杂，因此咱们先来作一个更简单的例子，来熟悉一下strumpy的界面和基本操做。

 

首先确定是要先下载Strumpy插件了。在Asset Store里面有，免费下载的。我这里使用的是4.0a版本。

下载完以后导入，会看到多了一个选项：

 

 

选择以后打开了Strumpy的编辑窗口： 

 

Flie的功能很直观，新建，读取，保存和导出的功能，咱们能够先看看读取功能

 

插件自带了一些已经编辑好的范例，有兴趣的朋友能够逐个看看，会有很大的收益。

 

而后咱们来正式开始作这个简单的例子，咱们准备了一张带有透明通道的贴图（拿斩首大刀的阿赵），接下来咱们作一个shader，把这张贴图显示在一个面片上面，使它实现漫反射通道和透明通道的显示。

 

咱们新建一个着色器编辑： 

 注意看，新建时，在Settings的标签是红色的，而后Shader Name也是红色的，这是提醒咱们，每个shader必需要先有一个名称，而这个名称就是之后你在材质栏里面选择的材质名称了。好比你能够用“myshader/test”，这样test材质会出如今myshader下面。

 

 

输入材质名词以后，咱们先来Inputs里面，新建一个输入。这个输入，就是咱们日常在Unity自带的材质球里面看到的输入通道了。假如咱们须要它能调节颜色，那么就要新建一个颜色的输入，假如须要调用贴图，就要新建一个贴图的输入。这里咱们新建一个Unity预设的MainTexture。熟悉用脚本替换材质贴图的朋友估计很熟悉这个标签的含义了。

 

 

新建以后，咱们能够看到，出现了一个贴图选择的通道，就像咱们日常操做的自带材质球同样。

 

接下来咱们会新建一些节点，而后对他们进行编辑。

建立节点的方式有两种：

第一种是在Nodes里面选择相应的节点：

 

第二种是在节点编辑的窗口鼠标右键单击，选择相应的节点。 

我我的比较习惯第二种方法。

 

咱们选择了一个Sampler2D的输入 

刚生成的时候，这个节点是红色的，由于咱们没有指定输入的来源。想起刚才咱们新建的Input了吧？那个MainTexture指定在这里。

 

在选中该节点的状况下，来到Node的标签，会看到提示错误了

 

咱们选择_MainTex

 

这时候，节点就再也不是红色了，而是出现了两项输出，分别是2D采样和UV信息。节点名称里面，也会相应的显示出_MainTex，也就是咱们刚才新建的Input的名称。

 

接下来咱们新建一个Tex2D方法节点。

 

而后像上图同样，用鼠标把他们之间连起来。

 

 这时候，把咱们预先准备好的贴图指定在贴图通道里面

 

点击预览窗口的Update Preview，会看到预览的物体上面出现了咱们的贴图

 

为了便于观察，咱们选择一个片面模型。这时候，漫反射通道已经完成了，接下来咱们继续作透明通道。

 

如上图同样，把A链接到Alpha通道。

 

而后来到Settings，按上图设置一下。

 

打开背景显示，会看到透明通道已经生效了。

 

在完成了以上的小例子以后，咱们正式来解释一下Strumpy各个部分的意思吧。 

在master里面，分别是各个通道的最终输出。

 

节点是经过有方向性的线条来链接的，分为输入端和输出端，上图是一个单向输入输出的例子。

 

再来是一个运算的例子，Add是相加的操做，这里是两个输入端进入了相加，而后输出一个结果。

在这里要说明一下的是，这些操做很大一部分都是数学运算的方法，好比加减乘除、sin、cos之类，各位在学习以前最好要先理解他们的意思。好比相加就是互相叠加，两张图相加会整张图都变得更亮。相乘是波峰波谷的叠加，两张图相乘，会使亮的地方更亮，暗的地方更暗。其余的方法请各位自行百度去查阅了，就不一一说明。

 

再来看看设置的选项 

若是曾经本身写过shader的朋友，对于这些选项应该是很熟悉的。好比不少朋友问的双面显示，其实就是把CullMode选择为Off就行。

 

 

介绍完基本功能，咱们正式的来作此次的目标例子了。 

这里咱们准备了一个模型。

 

模型带有了漫反射贴图和法线贴图。

 

首先新建一个着色器编辑，而后给shader起名为：myShader

 

按照第一个例子的操做，咱们完成了漫反射通道。

 

为了应用在咱们的模型上，咱们须要先生成一个shader。选择导出（Export As）

 

给shader起一个文件名。这个名称没有太大的意义。

 

导出以后，咱们来到材质球选择的地方，会看到了咱们新建的myShader，选择它。

 

而后指定漫反射贴图，咱们的模型变成了上图的效果。

 

接下来，咱们在Inputs里面新建一个凹凸贴图的输入

 

而后完成法线通道节点的编辑。因为须要使用法线贴图，因此须要加入一个UnPackNormal的节点。

 

这时候，咱们会发现输入通道处多了Normalmap通道，咱们把法线贴图赋予上去。模型变成上图的效果。

 

咱们再新建一个颜色输入，做为高光的颜色。

 

完成高光通道和光泽强度的节点编辑。

这里我用了一个Multiply（相乘），目的是让光泽强度范围的对比度更大，显得高光会更尖锐一点。高光颜色直接链接到Specular通道。

 

如今咱们的模型已经拥有了必定的质感了。因为模型原来是没有法线贴图的，我拿了漫反射贴图来直接转换，因此效果差了点，有兴趣的朋友能够本身作法线贴图加强效果。

 

接下来作有动画效果的光。

咱们新建了几个输入：发光颜色（_LightColor），一个发光颜色的遮罩贴图（_Light），一个浮点（_dir）做为光运动的方向，一个范围选择（_RimPow）做为发光强度的控制。

 

这张是发光遮罩贴图，是一张黑白的梯度图。

 

这一个步骤的节点编辑有点复杂，基本的思路是将颜色和遮罩贴图混合在一块儿，并用时间控制UV动画：

一、遮罩贴图我用了ViewDirection和Fresnel结合控制显示方向，并用_RimPow做为显示方向的次幂控制显示强度。

二、为了让光会随着时间本身作动画，我是用来Time和_dir相乘，这样能够控制动画的速度和方向。

三、为了让UV移动作动画，我用了UV_Pan。记得UV_Pan须要选择输入的轴，这里我选择了Y轴。

 

四、最后，我把发光颜色和遮罩运算的结果相乘，达到叠加波峰改变颜色的目的。

 

最后，发布shader，根据须要选择相应的遮罩贴图，指定发光的颜色、强度和方向，咱们的例子就完成了。

 

补充说明几点：

一、可能不少功能自带的shader都有，不过有时候你就是会须要一些功能特殊一点的shader，具体须要什么输入通道，和怎样的操做，请根据实际状况考虑。

二、关于即时镜面反射的shader，估计不少朋友都很感兴趣。不过我这里不打算详细介绍，由于unity没有直接即时反射运算的shader。

简单说明一下其原理：

在自带的水面和愤怒机器人场景里面，咱们都看到了相似镜面反射的效果，其实这都是一种欺骗。作法不算复杂，实际上是根据了当前摄像机的位置，新建了一个相对角度的反射摄像机，并把反射摄像机看到的内容渲染成RenderTexture。最后把RenderTexture和位置矩阵输入到普通材质的贴图通道，达到好像即时反射的效果。水面的例子作法会傻一点，由于它是针对水面物体本身生成了一个反射摄像机，因此的反射效果只会对水面自己有效果，每一个能够反射的面，都要单独生成。而愤怒机器人里面的例子会聪明不少，它会在摄像机的脚本里面根据预先选择的可反射的图层，统一辈子成了一张RenderTexture，并让全部能够反射的shader使用。

 

结合着即时反射这个例子，能够看出实际上不少特殊的效果，都不是单独的shader能直接实现的，还须要到其余的脚本去配合。