本文为原创文章，仅在简书与CSDN发布，禁止一切形式的转载

先上效果图：

最终效果

在这篇教程中我们用最简单的方式，在Unity自带的Quad上用Shader Graph展示一个彩虹。并且在下一篇博客中我会用纯Shader代码的方式再实现一遍。

首先在Hierarchy中通过3D Object > Quad创建一个正方形，然后放大放置在合适的位置上：

创建Quad

大小位置这些在后面可以慢慢调整，只要大到整个场景都能看到即可。

确保你的项目已经配置了渲染管线（URP或HDRP），然后创建一个UnLit Shader Graph以及相应的材质，然后打开Shader Graph编辑：

画出一道彩虹很简单，先画出一条有厚度的曲线，然后在曲线内画出色阶渐变的颜色即可。带厚度的曲线有几种画法：

1. 第一种，直接偏移。画出sin、抛物线等曲线，然后往y轴正方向偏移一段距离就是一条有厚度的曲线。然后把UV的坐标y值与曲线函数的差作为色阶偏移的变量。不过经常再shader上画画的人应该很清楚，这样得到的曲面在函数导数较陡的地方会被“拉扁”，效果如下图：[图片上传失败...(image-775232-1624004483994)]

2. 方法二，变形网格。画出sin、抛物线等曲线，然后往函数的导数方向膨胀。如果采用这个方法的话我建议在顶点着色器上操作。如果是在片段着色器的话你需要列出圆与曲线的方程判断园与曲线是否相交，对于三角函数来说它最后是一个超越方程，只能求近似解并且你还拿不到沿法线方向的距离作为色阶变换的变量。

   操作扭曲顶点的话先用Unity的插件ProBuilder建造一个平面（没有的话可以打开Package Manager搜索找到），高度不需要细分，细分宽度越大曲线越柔和：

   创建Plane
   然后编辑一下UV，不然你在像素（片元）着色器中会拿到十分迷惑的uv坐标，点击ProBuilder面板中的UV Editor打开UV编辑器：
   uvEditor

   选择编辑面模式，然后把UV壳缩放至UV坐标0-1的正方形区域内即可。

   
   
   editing UV

   当然也可以直接调整Offset和Tilling：

edited UV

然后创建一个ShaderGraph材质变形顶点。
由于我们使用的形状是cos函数，cos的导数是-sin，由于在z方向只有-0.5到0.5两个方向，所以只要在曲线相应位置把z方向的上下两个点往相应的法线方向平移就行了:

法线

【法线的计算：切线是导数（1, sinX），用旋转矩阵逆时针旋转90度{-1, 0, 0, 1}就能得到（sinX, 1），这个值还需要normalize归一化】
完整的Shader Graph如下：

扭曲网格 ShaderGraph

最后扭曲出来的平面如下：（没处理颜色）

扭曲后的网格

你或许想说，有这精力还不如直接在Maya做一个彩虹的曲面模型。其实我也觉得做模型更快，但本着科学严谨的精神，还是把这种方法列出来了。

绘制彩虹

虽然说完了上面两种方法，但这篇教程并不采用上面两种方法。彩虹本身就是一个半截的圆环，因此直接截取半截圆进行绘制即可。

颜色偏移我们采用Hue，把Range设置为Normalized，In输入为一个纯色（比如红100、绿010、蓝001），在Offset从0到1变化过程中颜色就会沿整个色相环走一圈。如果你觉得纯红色太辣眼睛的话，可以提高In的亮度，即提高其他RGB分量的值。如果你想让彩虹的色相分布进行一些偏移，比如彩虹顶部的红色多一些，可以提高B分量，反之提高G分量的值，或者在输入Offset前再进行一次偏移。在这里我把输入设置为了(1, 0.5, 0.5)

Hue

接下来我们在UV坐标（0.5, 0）的地方创建一个距离场，并缩放到我们想要的彩虹的宽度：

画出彩虹

这里为了充分利用像素，我们把彩虹的外径设置为0.5，宽度为0.05
画出了颜色，接下来只要裁剪出半径0.45到0.5之间的一段就行了。裁剪使用两个Step即可完成：

裁剪

最后将透明度下调就能看见一道完整的彩虹了：

彩虹

但是作为虚景的彩虹这样的效果仍然显得有点突兀，我们可以通过透明度渐变来获得一个比较好的效果。

虚化

完整的ShaderGraph如下：

完整ShaderGraph

最后的效果就是文章一开始的那张图那样。
下篇博客会有shader的版本，欢迎三连我的博客~~~