Unity Shader Graph 2D - Procedural程序化图形之夹心圆环

前言

        本文将使用Unity Shader Graph的节点来绘制一个夹心圆环，分成三部分外环、内环和中心环。通过制作一个夹心圆环能够更好地理解和实践Shader Graph中的基础节点以及思维。

---

        创建一个Ring的Shader Graph文件，再创建一个对应的材质球M_Ring以及一个Texture2D的MainTex变量。

制作中心环

        首先是制作中心部分的圆环，创建一个UV节点，再使用一个距离节点Distance，计算从各个点到中心点（0.5,0.5）的位置，得到一个从中心像四周散开的渐变圆数据。将该数据与一个Step节点的Edge相连，创建一个Float类型的半径Radius作为此Step节点的In值，用来控制圆的半径。再创建一个Float类型的变量RingWidth，即圆环宽度，用半径减去宽度获得一个减去宽度后的圆半径，再将该半径连接到一个新的Step节点的In值里，同时将之前的基础渐变圆数据连接到此Step节点的Edge输入，获得小半径的圆。用大半径的圆减去小半径的圆就可以获得中心圆环，节点如下。

添加中心环颜色

        创建一个Color变量为CenterRingColor，控制中心圆环的颜色，与圆环数据相乘，节点如下