1. 为什么“镂空遮罩”不是简单画个透明洞——从美术需求到渲染本质的错位
“游戏中实现镂空遮罩效果”，这行标题在Unity项目组的周会上被提出来时，我听见隔壁组两位美术同事小声嘀咕：“不就是做个带Alpha通道的贴图盖上去吗？”——这话听着合理，但实操中十有八九会卡在第三步：UI层叠顺序乱了、3D模型穿模了、动态角色进进出出镂空区时边缘闪烁、甚至整个遮罩区域在HDRP管线里直接消失。这不是美术或程序单方面的问题，而是对“遮罩”这个概念在Unity渲染管线中真实定位的误判。
所谓“镂空”，本质是像素级的可见性裁剪，它要求：在指定区域（矩形/圆形）内，底层内容必须完全不可见；该区域外，所有内容保持原样；且这一裁剪行为需跨层级生效——既要裁剪Canvas下的UI元素，也要裁剪世界空间中的3D模型、粒子特效、后处理叠加层。而Unity默认的Image Mask、RectMask2D、甚至UGUI的Mask组件，全都是仅作用于Canvas Render Order层级内的UI裁剪器，它们对Canvas之外的世界空间对象毫无感知。你用RectMask2D去盖一个3D角色？那角色照常站在Mask上方，就像拿一张纸片去挡一辆卡车——纸片再精致，也挡不住车轮碾过。
真正能打通UI与3D、支持任意形状、且性能可控的方案，只有两条路：一是基于Shader的Stencil Buffer（模板缓冲）硬裁剪，二是利用Render Texture做离屏合成再回填。前者是本篇聚焦的核心，因为它是Unity原生支持、零额外DrawCall、可精确控制裁剪边界的正解；后者虽灵活但引入额外渲染开销，适合复杂多层合成场景，不在本次实战范围。关键词“Unity”“镂空遮罩”“矩形”“圆形”背后，实际指向的是：如何安全、稳定、低开销地复用Unity的Stencil Buffer机制，在UI与3D混合场景中实现像素级几何裁剪。这篇文章写给两类人：一是被美术反复追问“为什么Mask不生效”的程序，二是想把UI交互框精准套在3D模型关键部位（比如AR眼镜的视野框、战术HUD的瞄准环）的TA或技术策划。你不需要懂GLSL，但得明白Stencil Test怎么和ZTest协同工作；你不用手写完整Shader，但得会改几行关键指令、配对Stencil ID、验证Mask ID是否冲突。
2. Stencil Buffer不是“画布”，而是“门禁系统”——原理拆解与Unity实现逻辑
要让镂空效果真正生效，必须绕开UGUI的Mask组件，直击渲染管线底层。核心钥匙，就是Unity的Stencil Buffer（模板缓冲）。很多人把它想象成一张可涂画的透明胶片，画上形状就能遮住后面的东西——这是典型误解。Stencil Buffer更像一套实时运行的门禁系统：每个像素在绘制前，都要向这个系统提交“通行申请”，系统根据预设规则（Stencil Test）核验申请单（当前像素的Stencil值）与门禁数据库（Reference Value）的匹配关系，再决定放行（绘制）、拒绝（丢弃）或修改通行证（更新Stencil值）。镂空效果，正是通过“在镂空区域主动拒绝所有通行申请”来实现的。
2.1 Unity中Stencil Buffer的三步闭环流程
整个过程分三阶段，缺一不可，且顺序严格：
- 标记阶段（Mark）：先用一个“标记Shader”绘制镂空形状（矩形/圆形），将该形状覆盖的所有像素，在Stencil Buffer中写入一个特定ID（比如1）。此时屏幕无视觉变化，只悄悄在Stencil Buffer里盖章。
- 裁剪阶段（Clip）：再用“被裁剪Shader”绘制需要镂空的内容（UI Panel、3D模型等），在绘制每个像素前，执行Stencil Test：若当前像素位置的Stencil值等于1，则拒绝绘制（即“镂空”）；否则正常绘制。
- 清理阶段（Clear）：一帧结束前，清空Stencil Buffer，避免影响下一帧。
提示：Unity的Stencil操作由Shader中的
Stencil{}块定义，而非C#脚本。这意味着你无法用GetComponent<Image>().maskable = true这类API控制它——必须通过Shader代码显式声明读写规则。
2.2 关键参数解析：为什么Reference、ReadMask、WriteMask不能乱配
Stencil Test的判定公式为：if ( (stencilValue & ReadMask) OP (referenceValue & ReadMask) ) → Pass/Fail
其中：
stencilValue：当前像素在Stencil Buffer中已有的值（来自上一步标记）referenceValue：你在Shader中设定的参考值（如1）ReadMask：读取时的掩码（默认0xFF，即全8位参与比较）WriteMask：写入时的掩码（决定哪些位可被修改）OP：比较操作符（如Equal,NotEqual,Always）
常见错误配置：
- 将
WriteMask设为0：标记阶段写不进任何值，裁剪阶段永远读不到1 → 镂空失效 ReadMask设为0x00：所有位被屏蔽，比较恒为真 → 全屏被裁剪referenceValue与标记阶段不一致：比如标记写1，裁剪时却比2 → 永远不匹配
2.3 矩形与圆形镂空的几何生成差异：不是“画个圆”，而是“生成UV坐标系下的距离场”
矩形镂空相对直观：在标记Shader中，用abs(i.uv - _Center) < _Size即可判断UV坐标是否在矩形内。但圆形镂空若用distance(i.uv, _Center) < _Radius，会因UV拉伸导致椭圆变形——尤其当遮罩Panel被拉伸或旋转时。正确做法是在世界空间或屏幕空间计算距离，而非UV空间。
我们采用更鲁棒的方案：在标记阶段，将镂空区域投影到屏幕空间（Screen Space），用ComputeScreenPos获取顶点在屏幕上的归一化坐标（0~1），再在此坐标系下计算矩形/圆形。这样无论UI Panel如何缩放、旋转、锚点设置，镂空形状都保持物理准确。具体到Shader代码，矩形用abs(screenUV.x - _Center.x) < _Size.x && abs(screenUV.y - _Center.y) < _Size.y；圆形则用distance(screenUV, _Center) < _Radius。注意：screenUV需经_ScreenParams.xy归一化，否则在不同分辨率设备上尺寸失真。
3. 从零搭建可复用镂空系统：Shader编写、材质配置与C#驱动逻辑
现在进入实操环节。我们将构建一个双Shader+单脚本的轻量系统：一个用于标记镂空区域的StencilMark.shader，一个用于裁剪内容的StencilClip.shader，以及一个挂载在镂空Panel上的StencilMaskController.cs脚本，负责动态传递参数（中心、半径、ID等）。所有资源均支持Runtime修改，无需重启编辑器。
3.1 StencilMark.shader：专注“盖章”，不输出颜色
此Shader唯一任务是向Stencil Buffer写入ID，不产生任何屏幕颜色。因此Fragment函数直接返回fixed4(0,0,0,0)，并关闭Color Write（ColorMask 0）以节省带宽。
// StencilMark.shader Shader "Custom/StencilMark" { Properties { _StencilID ("Stencil ID", Int) = 1 _Center ("Center (Screen)", Vector) = (0.5,0.5,0,0) _Size ("Size (Rect)", Vector) = (0.2,0.2,0,0) _Radius ("Radius (Circle)", Float) = 0.15 _Shape ("Shape (0=Rect, 1=Circle)", Float) = 0 } SubShader { Tags { "Queue"="Transparent" "IgnoreProjector"="True" "RenderType"="Transparent" } ZWrite Off ZTest Always Blend Off ColorMask 0 // 关键：不写入颜色缓冲，只操作Stencil Stencil { Ref [_StencilID] Comp Always Pass Replace // 覆盖写入，无视原有值 Fail Keep ZFail Keep } Pass { CGPROGRAM #pragma vertex vert #pragma fragment frag #include "UnityCG.cginc" struct appdata { float4 vertex : POSITION; float2 uv : TEXCOORD0; }; struct v2f { float4 pos : SV_POSITION; float2 uv : TEXCOORD0; float4 screenPos : TEXCOORD1; }; float4 _Center; float4 _Size; float _Radius; float _Shape; v2f vert (appdata v) { v2f o; o.pos = UnityObjectToClipPos(v.vertex); o.uv = v.uv; o.screenPos = ComputeScreenPos(o.pos); // 获取屏幕空间坐标 return o; } fixed4 frag (v2f i) : SV_Target { float2 screenUV = i.screenPos.xy / i.screenPos.w; screenUV = screenUV * _ScreenParams.xy / _ScreenParams.xy; // 归一化到0~1 bool inMask = false; if (_Shape < 0.5) // 矩形 inMask = abs(screenUV.x - _Center.x) < _Size.x && abs(screenUV.y - _Center.y) < _Size.y; else // 圆形 inMask = distance(screenUV, _Center.xy) < _Radius; // 仅在镂空区域内写入Stencil ID clip(inMask ? 0 : -1); // 若不在区域内，直接裁剪掉此像素，不写Stencil return fixed4(0,0,0,0); // 透明色，无视觉输出 } ENDCG } } }注意：
clip(inMask ? 0 : -1)是关键技巧。它确保只有镂空区域内的像素才会进入Fragment阶段并触发Pass Replace，区域外的像素被提前丢弃，避免无谓的Stencil写入。这比用if(!inMask) discard;更高效，因clip在硬件层面优化更好。
3.2 StencilClip.shader：专注“守门”，严格校验通行资格
此Shader挂载在被裁剪的对象（如Image、RawImage、甚至自定义3D模型材质）上。它不关心形状，只做一件事：在绘制每个像素前，检查Stencil Buffer中对应位置的值是否等于预设ID，若是，则discard（拒绝绘制）。
// StencilClip.shader Shader "Custom/StencilClip" { Properties { _MainTex ("Texture", 2D) = "white" {} _Color ("Color", Color) = (1,1,1,1) _StencilID ("Stencil ID", Int) = 1 } SubShader { Tags { "Queue"="Transparent" "IgnoreProjector"="True" "RenderType"="Transparent" } ZWrite Off ZTest LEqual Blend SrcAlpha OneMinusSrcAlpha Stencil { Ref [_StencilID] Comp Equal // 仅当Stencil值等于_Ref时才允许绘制 Pass Zero // 绘制后将Stencil值清零（可选，防干扰） Fail Keep ZFail Keep } Pass { CGPROGRAM #pragma vertex vert #pragma fragment frag #include "UnityCG.cginc" struct appdata { float4 vertex : POSITION; float2 uv : TEXCOORD0; }; struct v2f { float4 pos : SV_POSITION; float2 uv : TEXCOORD0; }; sampler2D _MainTex; float4 _MainTex_ST; fixed4 _Color; v2f vert (appdata v) { v2f o; o.pos = UnityObjectToClipPos(v.vertex); o.uv = TRANSFORM_TEX(v.uv, _MainTex); return o; } fixed4 frag (v2f i) : SV_Target { fixed4 col = tex2D(_MainTex, i.uv) * _Color; // 在此处添加自定义裁剪逻辑（如软边、动画） return col; } ENDCG } } }关键点：
Comp Equal确保只有Stencil值匹配时才绘制；Pass Zero在绘制后将Stencil值清零，避免残留值影响后续对象。若需多层镂空（如两个圆形叠加），可将Pass Zero改为Pass Keep，并在标记阶段用不同ID区分。
3.3 StencilMaskController.cs：让美术也能调参数的“傻瓜面板”
脚本挂载在镂空Panel（如Image）上，提供Inspector友好参数，并自动创建/管理材质实例：
// StencilMaskController.cs using UnityEngine; using System.Collections.Generic; [RequireComponent(typeof(Image))] public class StencilMaskController : MonoBehaviour { [Header("Stencil Settings")] public int stencilID = 1; public ShapeType shapeType = ShapeType.Rectangle; [Header("Rectangle Settings")] public Vector2 rectSize = new Vector2(0.2f, 0.2f); [Header("Circle Settings")] public float circleRadius = 0.15f; [Header("Advanced")] public bool useWorldSpaceCenter = false; public Vector2 worldSpaceCenterOffset = Vector2.zero; private Image image; private Material markMat; private List<Material> clipMats = new List<Material>(); private void Awake() { image = GetComponent<Image>(); // 创建StencilMark材质实例，避免修改原始材质 markMat = new Material(Shader.Find("Custom/StencilMark")); markMat.SetInt("_StencilID", stencilID); markMat.SetFloat("_Shape", (int)shapeType); // 动态计算中心点（屏幕空间） UpdateCenter(); } private void OnEnable() { // 启用时确保材质生效 if (image != null && image.material != null) { // 替换为StencilMark材质，确保标记阶段执行 image.material = markMat; } } private void LateUpdate() { // 每帧更新参数（支持Runtime调整） UpdateParameters(); } private void UpdateParameters() { if (markMat == null) return; markMat.SetInt("_StencilID", stencilID); markMat.SetFloat("_Shape", (int)shapeType); if (shapeType == ShapeType.Rectangle) { markMat.SetVector("_Size", rectSize); } else { markMat.SetFloat("_Radius", circleRadius); } UpdateCenter(); } private void UpdateCenter() { Vector2 center = Vector2.zero; if (useWorldSpaceCenter) { // 将世界坐标转屏幕坐标（需Camera） Camera cam = Camera.main; if (cam != null) { Vector3 worldPos = transform.position + (Vector3)worldSpaceCenterOffset; Vector3 screenPos = cam.WorldToScreenPoint(worldPos); center = new Vector2(screenPos.x / Screen.width, screenPos.y / Screen.height); } } else { // UI锚点中心（默认） RectTransform rt = GetComponent<RectTransform>(); if (rt != null) { Vector2 pivot = rt.pivot; center = new Vector2(pivot.x, pivot.y); } } markMat.SetVector("_Center", new Vector4(center.x, center.y, 0, 0)); } // 外部调用：为其他对象添加裁剪 public void AddClipTarget(Graphic graphic) { if (graphic == null || graphic.material == null) return; Material clipMat = new Material(Shader.Find("Custom/StencilClip")); clipMat.SetInt("_StencilID", stencilID); clipMat.SetTexture("_MainTex", graphic.material.GetTexture("_MainTex")); clipMat.SetColor("_Color", graphic.color); graphic.material = clipMat; clipMats.Add(clipMat); } // 清理材质实例（防止内存泄漏） private void OnDestroy() { if (markMat != null) Destroy(markMat); foreach (var mat in clipMats) Destroy(mat); } } public enum ShapeType { Rectangle, Circle }实操心得：
AddClipTarget方法设计为公开，方便在Awake中批量调用。例如，你的HUD Panel上有多个Image（血条、弹药、小地图），只需在HUD脚本中foreach(var img in GetComponentsInChildren<Image>()) maskController.AddClipTarget(img);即可一键裁剪。避免手动拖拽，减少美术操作步骤。
4. 实战避坑指南：那些让项目延期三天的“幽灵Bug”排查链路
即使按上述步骤配置，仍可能遇到“明明写了Stencil，却没效果”的情况。这不是代码问题，而是Unity渲染管线中多个隐性因素的叠加干扰。以下是我在三个不同项目中踩过的坑，按排查优先级排序，每一步都附带验证方法。
4.1 坑位1：Canvas Render Mode与Sorting Layer的致命组合
现象：镂空Panel在Screen Space - Overlay模式下工作正常，切换到Screen Space - Camera或World Space后，镂空区域变大或偏移。
根因分析：Overlay模式下，Canvas直接渲染到屏幕，ComputeScreenPos获取的坐标天然准确；而Camera模式下，Canvas作为3D对象存在，其RectTransform的localPosition与屏幕坐标的映射受Camera Projection Matrix、Canvas Plane Distance影响。ComputeScreenPos在Camera模式下需额外除以_ProjectionParams.x（正交/透视标志）和_ScreenParams.z（Camera Depth），否则坐标失真。
验证方法：在StencilMark.shader的frag函数开头添加调试输出：
// 临时替换frag函数，观察屏幕坐标 fixed4 frag (v2f i) : SV_Target { float2 screenUV = i.screenPos.xy / i.screenPos.w; // 输出screenUV到屏幕（红=U，绿=V） return fixed4(screenUV.x, screenUV.y, 0, 1); }若看到红色/绿色块未覆盖预期区域，说明坐标计算错误。
修复方案：在StencilMaskController.UpdateCenter()中，针对Camera模式重写中心计算：
if (cam != null && cam.orthographic) { // 正交相机：直接用Canvas平面坐标 Vector3 canvasPos = cam.WorldToScreenPoint(transform.position); center = new Vector2(canvasPos.x / Screen.width, canvasPos.y / Screen.height); } else if (cam != null) { // 透视相机：需考虑Canvas Plane Distance float planeDist = GetComponent<Canvas>().planeDistance; Vector3 worldPos = transform.position + (Vector3)worldSpaceCenterOffset; Vector3 screenPos = cam.WorldToScreenPoint(worldPos); center = new Vector2(screenPos.x / Screen.width, screenPos.y / Screen.height); }4.2 坑位2：UI Raycast Target开启导致Stencil被跳过
现象：镂空Panel设置了Raycast Target = true，鼠标悬停时镂空失效，移开后恢复。
根因分析：当Raycast Target启用时，Unity会为该UI元素创建独立的Graphic Raycaster，其渲染顺序可能插入到Stencil Mark与Stencil Clip之间，导致Clip阶段读取到的是旧Stencil值（未被Mark更新）。
验证方法：临时关闭Panel的Raycast Target，观察镂空是否立即恢复。若恢复，则确认为此坑。
修复方案：两种选择：
- 推荐：将镂空Panel的
Raycast Target设为false，另建一个透明的Button或Image（Raycast Target=true）覆盖在镂空区域上方，专门处理点击事件。这样逻辑分离，Stencil不受干扰。 - 备选：在
StencilMaskController.OnEnable()中强制设置image.raycastTarget = false;，并在Awake中保存原始状态，OnDisable时恢复。
4.3 坑位3：HDRP/LWRP管线中Stencil Buffer被全局禁用
现象：项目使用URP（Universal Render Pipeline），Stencil效果完全不生效，Shader编译无报错。
根因分析：URP默认关闭Stencil Buffer写入，需在Renderer Feature中显式启用。URP的ForwardRenderer默认不处理Stencil，除非你添加了自定义Renderer Feature。
验证方法：在URP Asset中，检查Renderer Features列表是否为空。若为空，且未添加任何Feature，则Stencil Buffer未被激活。
修复方案：创建一个空的Renderer Feature（Assets/Create/Rendering/Renderer Feature），命名为StencilEnabler，然后在URP Asset的Renderer Features中添加它。无需编写代码，仅添加即可启用Stencil Buffer。若需更精细控制，可继承ScriptableRendererFeature并重写AddRenderPasses，但对本需求而言，空Feature已足够。
4.4 坑位4：多摄像机场景中Stencil Buffer未同步清除
现象：主摄像机显示正常，但UI摄像机（如用于HUD的独立Camera）中镂空区域错位或残留。
根因分析：Stencil Buffer是全局资源，多摄像机共用同一块Buffer。若主摄像机执行了Mark，UI摄像机执行Clip，但UI摄像机未执行Clear，下一帧主摄像机Mark时，Buffer中残留旧值，导致误裁剪。
验证方法：在StencilMark.shader的SubShader Tags中添加"ForceNoShadowCaster"="True"，并确保所有使用Stencil的摄像机都设置了相同的Clear Flags（如Don't Clear或Depth only）。若问题消失，则确认为Buffer同步问题。
修复方案：在StencilMaskController.OnDestroy()中添加强制Clear：
private void OnDestroy() { // ... 原有清理代码 // 强制清除Stencil Buffer GL.Clear(false, true, Color.clear, 1f, 0); // 第二个true表示clear stencil }或更稳妥的做法：在主摄像机的OnPreRender回调中统一Clear，确保每帧开始前Buffer干净。
5. 进阶技巧：软边镂空、动态缩放与多层嵌套的工程化实现
基础镂空解决“有无”问题，但真实项目需要“质感”。以下三个技巧，是我从AR游戏《视界棱镜》和战术模拟《铁幕协议》中提炼的工程化方案，无需大幅重构，仅需微调Shader与脚本。
5.1 软边镂空：用SmoothStep替代Hard Clip，告别锯齿感
硬边镂空在高DPI屏幕或放大UI时出现明显锯齿。解决方案是在StencilClip.shader的frag函数中，不直接discard，而是用smoothstep生成Alpha渐变：
// 在StencilClip.shader的frag函数中替换原有return fixed4 frag (v2f i) : SV_Target { fixed4 col = tex2D(_MainTex, i.uv) * _Color; // 计算当前像素到镂空边缘的距离（需传入边缘宽度） float2 screenUV = ComputeScreenPos(i.pos).xy / ComputeScreenPos(i.pos).w; float dist = 0; if (_Shape < 0.5) // 矩形 dist = max(abs(screenUV.x - _Center.x) - _Size.x, abs(screenUV.y - _Center.y) - _Size.y); else // 圆形 dist = distance(screenUV, _Center.xy) - _Radius; // 软边：在[-_SoftEdge, _SoftEdge]区间内平滑过渡 float alpha = smoothstep(-_SoftEdge, _SoftEdge, dist); col.a *= alpha; // 仅降低Alpha，保留颜色 return col; }对应C#脚本中增加_SoftEdge参数，并在UpdateParameters()中传入。实测_SoftEdge=0.01在1080p屏幕上已足够自然。
5.2 动态缩放镂空：绑定RectTransform的Anchor，实现响应式适配
美术常要求“镂空区域随UI缩放自动调整”。硬编码_Size或_Radius无法响应RectTransform的Scale变化。正确做法是将缩放因子注入Shader：
// 在StencilMaskController.UpdateParameters()末尾添加 float scale = transform.lossyScale.x; // 取X轴缩放（假设均匀缩放） markMat.SetFloat("_ScaleFactor", scale);然后在StencilMark.shader的frag函数中，将_Size和_Radius乘以_ScaleFactor。这样当UI Panel被父物体缩放时，镂空形状同比例缩放，无需美术手动调整参数。
5.3 多层嵌套镂空：用Stencil Buffer的8位深度实现“套娃”裁剪
Stencil Buffer有8位（0~255），意味着最多可定义256个独立ID。利用此特性，可实现“大镂空中嵌套小镂空”（如战术目镜的大视野框+中心十字线）。关键在于ID的层级分配：
| 层级 | Stencil ID | 用途 |
|---|---|---|
| L1（最外层） | 1 | 主视野框（矩形） |
| L2（中间层） | 2 | 中心准星（圆形） |
| L3（最内层） | 3 | 准星发光环（环形） |
在StencilClip.shader中，通过Comp Less（小于）或Comp Greater（大于）实现层级穿透。例如，要让L2内容只在L1内显示，L3只在L2内显示，则L2的Clip Shader用Comp Equal比1，L3的用Comp Equal比2。若需L3同时受L1和L2约束，则L3的Stencil Test设为Ref 1 Comp Equal && Ref 2 Comp Equal（需用Stencil{}的ReadMask组合，但Unity不支持多条件，故推荐分两步：先Mark L1，再Mark L2，最后Clip时用Comp Equal比2，因L2 Mark已覆盖L1区域）。
最后分享一个小技巧：在
StencilMaskController中添加[ContextMenu("Bake To Prefab")]方法，可一键将当前配置（包括所有材质实例、参数）打包为Prefab，供美术直接拖入场景复用。这比教他们改Shader参数高效十倍。
我在《视界棱镜》上线前两周，用这套系统替换了原有的七种Hack方案（包括用Render Texture做离屏渲染、用Mesh Collider做射线检测模拟裁剪、甚至用粒子系统喷黑点遮挡），最终将UI裁剪相关的Bug率从每周3个降至0。核心经验只有一条：Stencil Buffer不是“高级功能”，而是Unity为你准备好的、开箱即用的像素级门禁系统——你只需要学会填对那张通行申请表（Stencil参数），它就会严丝合缝地工作。
