Unity Shader Graph 2D - Procedural程序化图形之渐变的正弦波形

前言

        正弦波形也是一种常用、常见的程序化图形，合理的使用正弦波形会创作出一些有趣、美观和丰富的效果，本文将使用Unity Shader Graph来实现一个正弦波形效果，帮助理解和实践Unity Shader Graph以及正弦函数。

        创建一个名为SineWave的Shader Graph文件，对应创建一个M_SineWave的材质球，再创建一个名为MainTex的基础Texture2D类型变量做默认输入。

创建正弦波形

        首先使用UV节点将坐标归零处理，减去一个（0.5,0.5）的二维向量偏移，将起点从UV的左下角移动到中心点位置，并将其坐标拆分出来X轴和Y轴，节点如下。

        创建一个Float类型的变量名为Repetition用来控制正弦波重复的波形数量，然后再做一个Fraction处理（重复从0到1取值），然后乘以2π（正弦函数的周期为2π）获得一个周期，将结果输入到Sine节点，节点如下。

        创建一个Float类型的变量名为Height用来控制正弦波的高度，与Sine节点的输出相乘，再将结果输入到Edge，再将Y轴坐标数据输入到In里，就获得了一个周期的正弦波，节点如下。

获得正弦波线条

        创建一个Float类型的变量名为LineWidth用来控制正弦波线条的宽度，用Y轴减去这个宽度，将上个高度控制后的输出结果输入到一个新的Step节点的Edge里，然后将减去宽度后的Y轴数据输入到In中，节点如下。

        将两个Step节点结果相减获得正弦波线条，节点如下所示。

将正弦波动起来

        创建一个时间节点和一个Float类型的速度变量，速度取反用来做正向移动，两个相乘，再叠加到X轴上，将其结果输入到和Repetition相乘的输入里，节点如下。

        这样正弦波就可以动起来了，效果如下。

给正弦波加一个渐变颜色

        单一的颜色加上去已经开始显得有点单调了，这次我们给正弦波加一个渐变颜色，原理很简单就是设定两个颜色变量，用一个插值节点将两个颜色变量连接起来，基于X轴的坐标来进行一个过渡，再将渐变颜色的输出与正弦波相乘获得最终带颜色的正弦波，然后将带颜色的正弦波数据输入到最终的颜色数据上，节点如下。

最终效果

        最后在Unity编辑器里面呈现的效果如下的动态图所示，一个渐变颜色带动画的正弦波就完成了！