Unity UI Soft Mask

### 实现 Unity 中 UI 的软遮罩效果 在 Unity 中实现 UI 的软遮罩 (Soft Mask) 效果可以通过自定义 Shader 和材质来完成。虽然 Unity 提供了一些基础的 Mask 功能，但它并不直接支持软边缘的效果。为了达到这一目标，通常需要编写一个带有模糊功能的自定义着色器。 以下是具体方法： #### 自定义 Soft Mask 着色器 通过创建一个新的 Shader 来模拟软遮罩效果。这个 Shader 需要能够处理透明度渐变并允许指定模糊半径。 ```csharp Shader "Custom/SoftMask" { Properties { _MainTex ("Texture", 2D) = "white" {} _MaskTex ("Mask Texture", 2D) = "white" {} _BlurRadius ("Blur Radius", Float) = 0.1 } SubShader { Tags { "Queue"="Transparent" "RenderType"="Transparent" } Pass { CGPROGRAM #pragma vertex vert #pragma fragment frag #include "UnityCG.cginc" struct appdata { float4 vertex : POSITION; float2 uv : TEXCOORD0; }; struct v2f { float2 uv : TEXCOORD0; float4 vertex : SV_POSITION; }; sampler2D _MainTex; sampler2D _MaskTex; float _BlurRadius; v2f vert(appdata v) { v2f o; o.vertex = UnityObjectToClipPos(v.vertex); o.uv = v.uv; return o; } fixed4 frag(v2f i) : SV_Target { fixed4 col = tex2D(_MainTex, i.uv); // Sample the mask texture with a blur effect. float alphaSum = 0; const int sampleCount = 9; // Number of samples for Gaussian blur approximation. for(int dx=-sampleCount/2; dx<=sampleCount/2; ++dx){ for(int dy=-sampleCount/2; dy<=sampleCount/2; ++dy){ float weight = exp(-float(dx*dx + dy*dy)/_BlurRadius); // Simple Gaussian-like weighting. alphaSum += tex2D(_MaskTex, i.uv + float2(dx,sampleCount-dy)*_BlurRadius).a * weight; } } col.a *= saturate(alphaSum / (sampleCount * sampleCount)); return col; } ENDCG } } } ``` 此 Shader 使用 `_MaskTex` 进行蒙版操作，并应用了一个简单的高斯模糊算法以生成柔和的边界[^3]。 #### 创建和设置 Material 1. 将上述代码保存为 `Assets/Shaders/SoftMask.shader` 文件。 2. 右键单击项目窗口中的 Assets 文件夹 -> Create -> Material 并命名为 “SoftMaskMaterial”。 3. 设置该材质的 Shader 属性为刚刚创建的 Custom/SoftMask。 4. 添加两张纹理图：一张作为主贴图 (`_MainTex`)，另一张用于控制遮罩区域 (`_MaskTex`)。 #### 应用到 Canvas 或 Image 组件上 将准备好的材质拖放到希望具有软遮罩效果的对象上。如果对象是一个图片组件，则可以在其 Materials 字段中绑定刚才配置的材质。 #### 注意事项 - 如果发现性能瓶颈，请减少采样次数或者优化模糊逻辑。 - 对于复杂的场景布局，可能还需要调整 Z 排序以及渲染队列标签。