做传送门效果的时候，很多人都会卡在同一个地方：贴图素材本身明明是个圆形光效或者旋涡纹理，放进场景里却总带着一圈方方正正的底色，黑的或者白的，在Game视图里特别扎眼，瞬间把科幻感拉回“实习生作业”的水平。更尴尬的是，你让美术同事去换一张透明底PNG，对方可能已经换过三四次，问题依旧——真正的原因往往不在贴图导出环节，而在Shader的渲染设置上。这篇就来拆解这个经典问题：传送门shader带正方形背景图时，为什么在右侧Graph Inspector中勾选Alpha Clipping就能解决，以及围绕着这个选项，你还需要做哪些细节才能让效果真正“干净”。
这个方案适合还在用Unity Shader Graph做特效、又不希望写代码的开发者，也适合那些刚接触材质节点、被各种透明混合选项搞晕的人。我会从原理讲到实操，再把踩过的坑和排查思路一并整理出来，争取让零基础的人照着操作也能搞定，让有经验的人也能收获几个之前没注意到的细节。
1. 问题场景与成因拆解
1.1 贴图上的“正方形背景”到底是怎么来的
先说结论：你看到的正方形，本质上是“整张贴图都被渲染出来了”，而不是模型的问题。美术在制作传送门贴图时，习惯在正方形画布上绘制内容，常见的情况是把画布填充为黑色或白色，再把旋涡、光环画在上层。这种贴图导出后，所有像素都有颜色数据，不存在透明区域。把它采样到Base Color上，Shader会老实地把整张纹理映射到网格表面，于是底板也跟着显示出来。
很多人会问：既然圆环周围是纯黑或纯白，那它在视觉上不就是“底色”吗？确实如此，但引擎并不会自动识别“黑色=透明”。它只知道每个像素有RGB颜色值，而RGBA里的A（Alpha）才是控制透明度的通道。当一张贴图没有Alpha通道时，引擎默认把所有像素的Alpha当1.0处理，也就是完全不透明。这就是正方形的真正来源：不是Shader写错了，而是贴图没有提供透明信息。
还有一个容易被忽略的情况：素材站下载的某些“特效纹理”，文件名写着“portal_effect”，但压缩格式是JPG。JPG天生不带Alpha通道，你把这张图拖进Shader Graph，无论怎么调混合模式，都不可能得到真正的透明边缘。
注意：判断贴图是否支持透明，最快的方法是在图片查看器中打开，看图层/通道面板里有没有Alpha通道；或者在Unity的Inspector面板中把Texture Type设为Sprite(2D and UI)并查看导入设置，确认Alpha Is Transparency是否勾选。
1.2 为什么不能靠模型去裁切
也有朋友想过“把Plane模型做成圆形不就行了吗”。这个思路看似直接，但实际不可行。你在Unity里创建一个圆形Plane，网格边缘是锯齿状的，而且传送门通常要配合地面摩擦、粒子拖尾等效果，模型形状一旦固定，后续调整就非常麻烦。更重要的是，Shader层解决的问题可以复用到任意网格上——你用一个矩形Plane也能呈现完美圆形传送门，这才是效率最高的路径。
1.3 从“画布”到“通道”：理解贴图的透明信息
这里用个生活化的类比：贴图就是一张画纸，RGB是画纸上的颜料颜色，Alpha则是“哪些区域是镂空的说明”。如果一张纸压根没写镂空说明，引擎拿到它就只能当作整张纸贴上去。传送门贴图是PNG时，通常在Alpha通道里记录了“旋涡图案实心、四周全透明”的信息；而JPG则完全没有这个说明。
搞清楚这个底层逻辑之后，你会发现所有解决方案都围绕一个目标：让引擎知道“正方形底板区域是透明/被丢弃的”。而Shader Graph里那个Alpha Clipping选项，本质上就是让你把“Alpha说明”用起来。
2. Alpha Clipping的原理与适用边界
2.1 勾选之后到底发生了什么
Alpha Clipping直译是“Alpha裁剪”。它的工作方式非常粗暴：在渲染管线里，对每个像素，Shader都会取它的Alpha值，拿这个值和你在材质面板里指定的Threshold（阈值）比较。Alpha低于阈值的像素直接丢弃（discard），不写入颜色缓冲；高于阈值的像素保留，正常渲染。可以把它想象成一把剪刀：你设定一条“透明度割线”，线左边的舍弃，线右边的留下。
对于传送门贴图来说，正方形底板的Alpha是0，旋涡主体的Alpha是1，阈值设为0.5时，0的部分全被丢弃，1的部分完整保留。最终屏幕上只剩旋涡和光晕，正方形彻底消失。这也就是标题所说的“勾选Alpha Clipping就能解决正方形问题”的根本原因。
2.2 为什么比修改混合模式更省心
Shader Graph里还有一组容易让人困惑的选项：Surface Type设置为Transparent，然后选Alpha Blend、Additive等等。这些选项也能让部分内容透明，但它们依赖“渲染排序”和“混合因子”，处理不好就会出现半透明遮挡错误、透视穿帮。Alpha Clipping走的是简单粗暴的“丢弃”，不参与混合，所以从性能角度讲，它比真正半透明的Transparent材质更友好。尤其在移动端，clip方案不需要像素级混合排序，开销更低、行为更可控。
2.3 这套方案在哪些情况下会翻车
Alpha Clipping不是万能的。它只适合“边缘清晰”的效果：旋涡、光球、符文、圆形传送门这类主体和背景区分明显的贴图，裁剪后基本无缝。但如果你的传送门边缘带着柔和的发光渐变、螺旋尾迹，或者主体本身有半透明的烟雾感，用Clip会在渐变中间猛地切断，产生一圈难看的硬边。
这种情况下就别硬勾Alpha Clipping了，正确的做法是把Surface Type换成Transparent，Blending Mode选Alpha（或者Additive），然后把贴图的Alpha通道连到Shader Graph的Alpha端口上。关于这条路线，后面实操章节会给一个对照。
在动手之前，可以把需求先分个类：
| 效果类型 | 推荐方案 | 原因 |
|---|---|---|
| 硬边图形（圆形旋涡、符文环） | Alpha Clipping | 边缘裁切干脆，性能好 |
| 柔和光晕、半透明烟雾 | Transparent + Alpha Blend | 需要像素级渐变透明度 |
| 叠加发光效果 | Transparent + Additive | 颜色叠加而非透明度混合 |
| 动态噪波边缘 | Alpha Clipping + 噪声扰动 | 可在阈值附近做不规则裁切 |
3. Shader Graph实操：从贴图到传送门的完整配置
3.1 准备一张真正带Alpha的贴图
建议先用一分钟检查素材质量。打开图片编辑软件，确认图像模式是RGBA而不是RGB，并新建一个Alpha通道，把你希望保留的区域填充为白色、不需要的区域填充为黑色。导出时选择PNG或TGA，不要选JPG。一个容易踩的细节是：很多软件导出PNG时会自动丢失Alpha通道，你需要在导出设置里勾选“保存透明度/Alpha通道”，否则导出的图虽然后缀是PNG，实际仍然没有透明信息。
如果你手头只有JPG，而且不想去抠图，也可以临时用“颜色键”的思路替代：有些Shader可以把某个颜色范围判定为透明。但那个方案的缺点是容易出现边缘色溢，且对颜色敏感，远不如直接准备Alpha通道。
3.2 创建Shader Graph并搭建基础节点
在Unity中右键Project窗口，依次选择Create -> Shader Graph -> Unlit Shader Graph，命名后双击打开。界面左侧是Main Preview预览，右侧是Graph Inspector面板。找到左侧菜单里的Input -> Texture -> Sample Texture 2D节点，拖入图中，把传送门贴图赋值给它。
接下来，把Sample Texture 2D节点的RGBA输出分别接到合适位置：RGB接到Fragment阶段的Base Color，A则连接到Alpha端口。这里有个新手容易忽略的细节：Sample Texture 2D节点的输出端口是组合的RGBA，你需要从RGBA右侧拖出连接线，再在弹出的端口选择里分别选择RGB和A。不能直接拿RGBA输出连到Alpha端口，否则GPU会直接报错或产生错误结果。
注意：把贴图的Wrap Mode从默认的Repeat改为Clamp。如果不改，传送门边缘很容易出现相邻像素的镜像重复采样，显示成一圈奇怪的接缝线。
3.3 勾选Alpha Clipping并设置阈值
完成基础连接后，我们来到关键的最终一步。操作是：在Graph Inspector面板中，找到Surface Options选项卡，展开Surface Options菜单，勾选Alpha Clipping复选框。勾选后，原本灰色的Threshold属性就会变成可用状态，默认值通常为0.5。
这里我把阈值设为0.5，足够让Alpha为0的正方形底板被丢弃。但如果你的贴图Alpha通道在边缘处是半透明渐变的，比如从0渐变到0.3，那么0.5的阈值会把这部分半透明区域全部裁掉，导致旋涡边缘略微往里收缩。如果想让保留范围更大，可以把阈值调低到0.1或0.2；如果边缘有半透明杂点，则调高到0.7或0.8。原则是：阈值越低，保留越多的低Alpha像素；阈值越高，裁剪越狠、越干净。
3.4 预览即所得：在Main Preview里验证
每次修改阈值，都建议直接在Main Preview中观察变化。Shader Graph的Main Preview默认展示的是球体表面，不方便观察正方形的裁剪效果，所以需要把预览网格切换成Quad或平面。方法是在Main Preview右上角的下拉菜单里选择Quad。切换后，你会看到正方形的四个边角被直接裁掉，只剩下中间的图形。
如果预览球体时正方形还在，别急着认为方案无效——那是预览网格形状带来的视觉差，切到Quad再看才是真实效果。
3.5 把材质应用到场景中的传送门模型
操作完成后，在Project窗口右键Shader Graph资产，选择Create -> Material，即可生成一个使用该Shader的材质球。把材质球拖到场景中的Plane或者你自己准备的显示器/拱门模型上，Game视图里再检查一下：正方形底板应该已经消失，传送门主体完整显示。
到这里，标题里说的核心操作已经完成了。但实操中还有大量细节会决定最终效果是否“高级”，下面继续往下看。
4. 边缘质量的细节打磨
4.1 硬边的锯齿问题
Alpha Clip最常见的副作用是“锯齿边缘”。因为丢弃逻辑是二值的，边缘像素要么完全保留，要么完全消失，没有过渡，所以曲线边缘会出现明显的阶梯状锯齿。想改善这种问题，最直接的办法是提高贴图分辨率，让边缘的像素密度更高。其次是确保在图片编辑器里把边缘处理成“尽量干净的硬轮廓”，不要在边缘区域残留半透明像素。
如果锯齿依旧明显，还有一个思路：把贴图的MipMap Streaming选项关闭。开启Mipmap后，像素在Camera距离变化时会在不同层级的纹理间切换，由于每一级Mipmap的边缘信息不同，裁剪边界会出现“抖动闪烁”。对于静态特效贴图来说，如果不需要Mipmap，直接关闭即可。
提示：如果你用的不是Unlit Shader，而是Lit Shader Graph，还需要确认PBR参数里的Smoothness、Metallic不会把边缘异常反光放大。最简单的方式是先以Unlit Shader为基础，等效果确认后再考虑是否升级到Lit。
4.2 用噪声破坏规则的圆形边缘
纯Alpha Clip出来的传送门，边缘过于规整，看起来像贴纸，少了“不稳定能量场”的感觉。这时可以把噪声节点接入阈值，制造不规则的边缘扰动。在Shader Graph中，添加Input -> Procedural -> Noise -> Gradient Noise节点，将其输出乘以一个很小的系数（比如0.05），再与Threshold相加，连接到Alpha Clip Threshold节点上。
原理很简单：阈值不再是一个固定值，而是一张随UV变化的灰度噪声图。旋涡边缘的像素Alpha值如果在0.45到0.55之间波动，噪声会让一部分像素保留、一部分丢弃，边缘就变成了不规则的毛边。这种毛边配合传送门的动态扫光，会有明显的“能量裂隙”观感。
需要注意噪声的缩放参数Scale。Scale太大会让边缘毛刺过密，看起来像屏幕碎裂；Scale太小又会变成均匀的模糊过渡。实测下来，Scale在10到20之间比较适合传送门这类中大型特效。具体数值要根据美术风格微调，建议一边预览一边拖。
4.3 黑边与白边的剩余问题
有些朋友在勾选Alpha Clipping后，正方形虽然没了，但旋涡边缘却残留一圈黑边或白边。这通常有两种来源。第一种是贴图压缩造成的颜色溢色：在图片编辑器中，如果你在透明区域填充了纯黑底，导出时压缩算法会让黑色渗入边缘像素，导致截断后出现一圈深色描边。解决办法是重新处理贴图，把透明区域的填充色改为与主体边缘颜色接近的灰色或直接清除像素；或者在Shader里对采样的RGB做“去黑边”处理，比如把Base Color的RGB乘以Alpha的某个高次幂，人为压低边缘亮度。
第二种是边缘的半透明渐变被Threshold切断后留下的半透明残余。把Threshold稍微调高一些，比如从0.5调到0.6，可以切掉更多半透明像素层，通常能缓解。
4.4 Clip与Blend的临时切换建议
做实际项目时，没人能一次确定用Clip还是Blend。我的习惯是先在Shader Graph里先做两个版本：一个版本用Alpha Clipping处理硬三维图形，一个版本用Transparent + Alpha Blend处理光晕层。然后用两个材质球叠加到同一个模型上，或者用混合多个Shader Graph的贴花层级，互相补充，达到既有清晰主体又有柔和光晕的效果。
这个方法对传送门来说特别有用：中间符文用Alpha Clipping，周围光晕用Additive混合，两个Plane叠一起就能得到一个既有“门框锐度”又有“雾状光芒”的组合效果。如果追求极致的表现，还可以再叠一层粒子系统，把Shader和粒子各自的优势发挥出来。
5. 常见问题与排查实录
5.1 勾选Alpha Clipping后贴图整个消失
这个现象往往不是Shader写错了，而是阈值设得太高。比如你从素材站下载的贴图Alpha通道被图片压缩软件压成了浅灰色，原本应该是1.0的白，变成了0.6左右。此时阈值如果保持0.8，整个贴图都会被判定为“低于阈值”然后被丢弃，自然什么都看不到。把阈值调回0.4或0.3，就能看到内容重新出现。
另一个可能性是贴图本身完全没有Alpha通道。这种情况下无论怎么调阈值，Alpha恒为1，Clip永远不会触发，渲染结果依旧是正方形。处理办法就是回到图片编辑器中补一个Alpha通道，或者换一张带透明信息的贴图。
5.2 裁剪之后仍有正方形阴影
如果在Game视图里阴影和遮挡物还在，但物体表面正方形已经消失，问题往往不在Shader Graph，而在材质球的Render Queue。检查材质的Render Queue，确认它没有被设置到特殊的队列（例如Overlay）。对于半透明的排序问题，Clip材质通常用默认的Geometry队列即可，不需要手动增加Offset。
如果正方形阴影来自模型本身（比如你在传送门内侧又放了一个实体网格），那就需要在模型层级上调整，与Shader无关。
5.3 传送门在移动端出现闪烁或排序错乱
移动端GPU对一些像素丢弃操作的Batch处理比较敏感。如果你的传送门Shader Graph里使用了Transparent + Alpha Blend，同时又被多个半透明物体包围，很可能出现层叠顺序错误。此时最省事的做法是把传送门主体改回Alpha Clipping方案，把真正需要柔和混合的光晕单独用一个低透明度的粒子层模拟。这样核心图形走clip路径，不会参与透明排序，出错的概率会大大降低。
5.4 快速排查表
| 现象 | 可能原因 | 排查方法 |
|---|---|---|
| 勾选后贴图消失 | 阈值过高 / 贴图无Alpha | 调低Threshold，检查通道 |
| 正方形仍在 | Shader没启用 / 材质没换 | 确认材质球使用的是当前Shader |
| 边缘出现黑/白描边 | 底色渗透或半透明残留 | 清边缘 / 提高阈值 |
| 远处闪烁不定 | Mipmap抖动 | 关闭Mipmap或调整Texture Bias |
| 移动端压帧 | clip分支过多或者贴图尺寸过大 | 降贴图分辨率，检查Draw Call |
6. 进阶扩展：让传送门效果更出彩
6.1 UV扭曲让门内画面产生“能量流动”
在所有基础问题解决后，可以更进一步。给采样贴图的UV加上一层噪声扰动，让门内纹理出现水流状的扭曲。做法是：把Gradient Noise节点输出乘以0.05的强度，加到Tilling And Offset的UV偏移上，再传给Sample Texture 2D的UV端口。这样传送门内部的纹理就会持续流动，加上时间因子后，流动感会更强。
需要提醒的是，UV扭曲不能做得太过，否则图形结构会被破坏，让人认不出这是传送门。我的推荐参数是：噪声缩放8~12，强度0.02~0.05，Time系数0.1~0.3。根据实际预览微调。
6.2 边缘光环的脉冲效果
基础的传送门应该有一个周期性脉冲光环。可以在Shader Graph中添加Time节点，用Sine（正弦）函数生成一个0到1的周期波形，乘以阈值并接到Alpha Threshold上。这样阈值会周期性地升高和降低，传送门的边缘就会像呼吸一样一收一放。由于Alpha Clip边缘会随阈值变化移动，视觉效果会非常动态。
为了让脉冲与整体特效同步，还可以把Time乘上一定的速度系数（例如0.5或1.5），再连接到Sine的Tilling输入端。这样不用改脚本，纯Shader就能实现动画。
6.3 双面可见与深度遮挡
传送门是一个两面可见的平面结构，实际项目中最好把Shader Graph里的Cull Mode设为Off。找到Surface Options，找到Cull Mode下拉菜单，把它改成Off，这样从背面看时也渲染完整。同时根据传送门在地图上的位置，可能需要配合Depth Test。默认的Less Equal即可，如果你发现门被实心墙遮挡的穿帮，可以调整Depth Offset。
不过双面渲染会打断GPU的背面剔除优化，增加约一倍的像素着色开销。如果只是单一传送门，无伤大雅；如果有几十个传送门同时出现，建议评估后决定是否需要双面。
6.4 把Alpha Clipping扩展为“溶解入场”效果
Alpha Clipping结合噪声还能做“溶解”入场：让物体从噪声状碎片逐渐聚合成完整传送门。把Threshold节点初始设置为1.0，随着Time增加逐步降低到0，那么刚开始所有像素都被裁剪，随着阈值下降，圆环边缘逐渐显露，形成溶解重生效果。这个效果在Boss战开场、传送门召唤时非常带感。实现方式只需要把Threshold的值改成一个随时间递减的表达式，其余节点结构不变。
用这种方法，单个Shader Graph就能应对门内静态显示、脉冲呼吸、溶解召唤三种表现，省去反复切换材质的麻烦，是一个性价比极高的扩展思路。
7. 从“解决问题”到“理解方案”的最后一公里
最后说一点个人体会。当初第一次碰上正方形底板问题时，我第一反应是让美术换贴图，结果换了三次都没解决，最后打开Shader Graph才发现问题出在混合模式上。后来我把Alpha Clipping用熟了，顿时觉得很多所谓“材质难题”其实都卡在对“通道”和“裁剪”这两个概念的理解上。
之后再做传送门，我都会先确认贴图有没有Alpha，再决定走Clip还是Blend。这个习惯帮我省了很多无谓的返工。如果你也经常处理特效材质，建议把“先检查贴图通道，再决定混合策略”这步写成项目规范，团队协作时能避免大量低级沟通成本。希望这篇能让你少踩几个我当年踩过的坑。
