feat: 添加渐变、圆环的实现

UE5/材质/README.md

@@ -1,5 +1,7 @@
 # 材质
 
+来源 [虚幻引擎【UE5】材质宝典【初学者材质基础入门系列】](https://www.bilibili.com/video/BV1fR4y1f75J)
+
 ## 简单介绍
 
 ### 材质的输出
@@ -289,7 +291,7 @@ UE 支持的 **纹理格式** 有：bmp、float、jpeg、jpg、pcx、png、psd
 选中节点之后，可以从左侧细节面板中查看那些参数可以设置
 
 | 属性名 | 作用 |
-| --- | --- | --- | --- | --- | 
+| --- | --- | 
 | Coordinate Index | UV 索引号，通常情况下模型导入虚幻后会创建两套 UV，一套是模型的纹理坐标UV，另一套UV是光照UV |
 | UTiling | U平铺，表示当前纹理在 UV 坐标当中 U 方向的平铺次数 | 
 | VTiling | V平铺，表示当前纹理在 UV 坐标当中 V 方向的平铺次数 |
@@ -311,7 +313,7 @@ UE 支持的 **纹理格式** 有：bmp、float、jpeg、jpg、pcx、png、psd
 
 > 红色 + 绿色 = 黄色，所以 `TexCoord` 的交汇处是黄色
 
-由于 `UTiling`、`VTiling`` 等都是节点内部属性，无法通过直接设值暴露给材质实例
+由于 `UTiling`、`VTiling` 等都是节点内部属性，无法通过直接设值暴露给材质实例
 
 ![](Image/070.png)
 
@@ -327,3 +329,63 @@ UE 支持的 **纹理格式** 有：bmp、float、jpeg、jpg、pcx、png、psd
 
 ### 制作方形渐变和中心渐变
 
+![](Image/074.png)
+
+在 `PhotoShop` 中使用两个径向工具绘制的图层，使用**变暗**叠加，可以得到方形渐变的效果，同理在 UE 中可以使用两个镜像的效果叠加变暗的计算，也可以得到**方形渐变**
+
+![](Image/073.png)
+
+![](Image/075.png)
+
+> 直接对 UV 进行计算操作，最后拆分成两个通道进行最后的**变暗**计算，得到的效果一样
+
+对于中心渐变来说，UV 坐标的中心点是 `(0.5, 0.5)` 只需要计算 UV 坐标到 `(0.5, 0.5)` 之间的距离，即可得到一个渐变效果
+
+![](Image/076.png)
+
+> 最后添加了一个 `Power` 节点，用于控制边缘过度软硬，具体效果修改数值可见
+
+### 角度渐变
+
+![](Image/077.png)
+
+角度渐变效果如上图
+
+`Arctangent2Fast` 节点的工作原理：
+- 输入参数：它接受两个输入参数，X 和 Y
+- 计算方式：节点会计算 X/Y 的反正切值，并使用输入的符号来确定结果的象限
+
+X 和 Y 的含义：
+- X：表示水平轴上的值
+- Y：表示垂直轴上的值
+
+通过这两个值，`Arctangent2Fast` 节点可以确定一个点相对于原点的角度。这在许多图形和物理计算中非常有用，例如确定物体的朝向或计算旋转角度
+
+`Arctangent2Fast` 计算得到的角度是 `-PI ~ PI`，为了把值统一到 `0 ~ 1`，所以最后计算的结果要除以 `2PI` 然后加上 0.5
+
+![](Image/078.png)
+
+### 圆环
+
+![](Image/079.png)
+
+使用如上图所示的一个渐变颜色的贴图
+
+![](Image/080.png)
+
+使用 `RemapValueRange` 将值从 `0 ~ 1` 变成 `-1 ~ 1`， 然后通过 `Append` 合并成二维向量 `(-1, -1) ~ (1, 1)`，再使用 `VectorLength` 得到其相对 `(0, 0)` 点的距离的一维值
+
+最后得到的距离值的取值范围是 `-√2 ~ √2`，然后将该值设置到贴图的 UV 上，就可以得到一个圆环
+
+| UV 贴图 | 采样图 | 结果 |
+| --- | --- | --- |
+| ![](Image/081.png) | ![](Image/079.png) | ![](Image/082.png) |
+
+上图中，UV坐标为 (0.5, 0.5) 点，值为 (0, 0)，所以最后输出时中心为采样图 (0, 0) 坐标的颜色，也就是红色
+
+UV 坐标为 (0, 0) 点，值为 (√2, √2)，采样的是贴图 (√2 - 1, √2 - 1) 点的颜色，也就是蓝色
+
+由于 UV 坐标点对应的值呈环状，所以最后采样出来的颜色也是呈环状排列，最后就得到一个渐变的圆环
+
+此时再加上 `Time` 函数，就可以得到一个会动的圆环
+