Cocos Creator动态不规则图片描边：基于Sobel算子的后处理实现

1. 项目概述：从“画个圈”到“智能描边”的进化

在游戏开发，尤其是2D游戏里，给角色、技能范围或者重要道具加个高亮描边，是个再常见不过的需求了。新手可能会想：“这还不简单？让美术同学在图片外面多画一圈颜色不就行了？” 确实，对于静态、规则形状的图标，这招管用。但一旦遇到动态变化的角色轮廓、不规则形状的UI元素，或者需要实时根据游戏状态改变描边颜色和粗细时，静态贴图就彻底抓瞎了。你总不能为角色的每一个动作帧、每一个可能的轮廓变化，都让美术画一套带描边的图片吧？那工作量是灾难性的。

这就是我们今天要啃的硬骨头：用Cocos Shader实现动态不规则图片的描边效果。所谓“动态”，意味着描边可以随时开启关闭、改变颜色、调整宽度，甚至做出脉动、闪烁等动画。而“不规则图片”，则指任何非纯矩形、形状复杂的精灵（Sprite），比如一个挥舞着武器的角色、一棵枝叶繁茂的树、一个不规则的魔法阵图案。这个技术的核心价值在于，它完全通过程序实时计算生成描边，解放了美术，赋予了策划和程序极大的灵活性。无论是用于标记当前选中的单位，还是提示技能的作用范围，亦或是营造某种视觉特效，都是一个性价比极高的解决方案。

我最早是在一个卡牌对战项目里被这个需求逼到墙角的。策划想要一个效果：当玩家手指悬停在某张卡牌上时，卡牌上的角色立绘要有一个柔和的金色光晕描边。我们的角色立绘都是带透明通道的不规则PNG图。最初尝试用放大Sprite然后叠加一个纯色底图的“土法”，结果描边又蠢又钝，在角色头发、武器等细节处根本没法看。于是，只能硬着头皮研究Shader，趟出了一条路。下面，我就把这条路上的坑、桥以及沿途风景，详细分享给你。

2. 核心思路与方案选型：为什么是后处理与Sobel？

实现动态不规则描边，主流思路有几种，我们需要根据Cocos Creator引擎的特点和项目需求来权衡。

2.1 常见方案对比与淘汰

方案一：多重绘制（Multi-Pass）这个思路很直观：把原始Sprite用不同颜色和轻微放大的尺寸多画几次。比如，先画一个放大一点的纯色版本作为描边，再在上面画原始图片。

• 优点：实现简单，不依赖Shader也能用代码组合实现。
• 缺点：性能差，每多一层描边就多一次Draw Call；描边效果生硬，特别是对于有尖角或复杂镂空的图形，放大会导致描边不均匀、有断点；难以实现渐变、模糊等高级效果。对于追求效果和性能的项目，这基本是第一个被淘汰的方案。

方案二：基于几何轮廓的描边在3D模型中很常见，即沿着顶点法线方向挤出网格。但在2D精灵这里，我们处理的是纹理（贴图），没有顶点法线信息。虽然可以尝试用网格工具手动为2D图片生成轮廓线，但这又回到了静态美术工作的老路，无法动态变化，不满足我们的“动态”需求。

方案三：基于后处理的图像边缘检测（我们选择的方案）这是目前2D游戏实现高质量、动态描边的最主流且灵活的方法。其核心思想是：不直接处理原始精灵，而是先把整个场景（或特定节点）渲染到一张离屏的纹理（RenderTexture）上，然后对这个“场景快照”进行图像处理，找出所有物体的边缘，再将这些边缘信息渲染为描边效果，最后叠加回原画面。在Cocos Creator中，这通常意味着使用RenderTexture结合自定义RenderFeature或PostProcess后处理流程来实现。

2.2 边缘检测算法选型：Sobel算子为何胜出？

边缘检测的本质是计算图像中像素灰度的突变。常见的算子有Roberts、Prewitt、Sobel、Laplacian等。

• Roberts & Prewitt：计算简单，但对噪声敏感，边缘检测结果较粗。
• Laplacian：对边缘的定位更准确，但对噪声极其敏感，通常需要先做高斯模糊，计算量较大。
• Sobel算子：它在Prewitt算子的基础上，为邻近像素赋予了更高的权重（一个典型的Sobel卷积核是[1, 2, 1]而不是[1, 1, 1]），这使得它在抑制噪声方面表现更好，检测出的边缘更平滑、连续，且计算量适中。对于游戏视觉特效来说，平滑连续的描边观感上通常优于锐利但可能断断续续的边缘。

因此，Sobel算子成为了游戏描边效果事实上的标准选择。它通过两个方向（水平Gx和垂直Gy）的卷积核来分别检测横向和纵向的边缘，最后通过计算sqrt(Gx^2 + Gy^2)来得到边缘强度。这个强度值，就直接决定了描边的“存在感”。

2.3 Cocos Creator中的实现路径

在Cocos Creator 3.x版本中，引擎渲染架构升级，提供了更强大的可编程渲染管线能力。实现后处理描边，主要有两种途径：

1. 自定义RenderFeature：这是更底层、更灵活的方式。你可以创建一个继承自RenderFeature的类，将其插入到渲染流程的特定阶段（通常是透明物体渲染之后，UI渲染之前），在其中完成抓取RenderTexture、执行Shader、混合输出的全部操作。这种方式性能控制精细，但实现复杂度较高。
2. 使用PostProcess后处理框架：Cocos Creator 3.8+ 版本逐渐完善了后处理框架。你可以通过添加后处理组件和自定义后处理特效（Effect）来实现。这种方式更“引擎化”，集成相对方便，但可能受限于框架本身的更新和功能覆盖。

考虑到通用性和理解深度，本文将聚焦于自定义RenderFeature的方案。虽然步骤稍多，但它能让你彻底掌握从渲染目标抓取到最终合成的完整链条，以后做任何屏幕效果都能触类旁通。理解了这种方案，使用PostProcess框架只会更轻松。

注意：无论哪种路径，其Shader核心原理——Sobel边缘检测——是完全相同的。我们学习的重点是Shader算法和渲染流程思想。

3. 核心Shader解析：手写Sobel边缘检测

一切的核心在于那段运行在GPU上的着色器代码。我们把它拆开揉碎了看。

3.1 着色器输入与参数定义

首先，我们需要一些参数来控制描边的外观：

uniform Constants { vec4 outlineColor; // 描边颜色 (RGBA) float outlineThreshold; // 边缘检测灵敏度阈值 (0.0~1.0) float outlineWidth; // 描边宽度 (基于像素偏移) vec2 textureSize; // 输入纹理的尺寸 (width, height) };

• outlineColor：很好理解，就是描边的颜色，通常alpha值设为小于1.0以得到半透明光晕感。
• outlineThreshold：这是关键参数。Sobel计算出的边缘强度是一个连续值（比如0到1）。我们需要一个“门槛”来决定多强的边缘才算边缘。阈值设得太低，画面中一些细微的纹理变化也可能被误检为描边，导致效果“脏”；设得太高，则可能漏掉一些柔和的边缘。通常需要根据具体美术资源在编辑器里微调。
• outlineWidth：它决定了我们采样像素时的偏移距离。宽度越大，采样点离当前像素越远，检测到的边缘就越“粗”。注意，这个“粗”不是简单变胖，而是由更远的像素差异决定的，有时会导致描边位置外移。
• textureSize：用于计算每个像素在纹理坐标空间中的实际大小（一个纹素对应的UV偏移量），即pixelSize = vec2(1.0) / textureSize。没有这个，我们就无法进行正确的邻域像素采样。

3.2 灵魂函数：Alpha边缘检测

描边只关心物体的轮廓，而轮廓信息主要存储在纹理的Alpha通道（透明度）中。因此，我们的边缘检测是基于Alpha值进行的。

float sampleAlpha(sampler2D tex, vec2 uv) { return texture(tex, uv).a; // 只取Alpha通道 } float sobelAlpha(sampler2D tex, vec2 uv, vec2 pixelStep) { // 定义Sobel算子卷积核所需的3x3网格偏移 // 左上， 中上， 右上 // 左中， (中心)， 右中 // 左下， 中下， 右下 float topLeft = sampleAlpha(tex, uv + vec2(-pixelStep.x, pixelStep.y)); float top = sampleAlpha(tex, uv + vec2( 0.0, pixelStep.y)); float topRight = sampleAlpha(tex, uv + vec2( pixelStep.x, pixelStep.y)); float midLeft = sampleAlpha(tex, uv + vec2(-pixelStep.x, 0.0)); // float midCenter = sampleAlpha(tex, uv); // 中心点，计算中用不到 float midRight = sampleAlpha(tex, uv + vec2( pixelStep.x, 0.0)); float bottomLeft = sampleAlpha(tex, uv + vec2(-pixelStep.x, -pixelStep.y)); float bottom = sampleAlpha(tex, uv + vec2( 0.0, -pixelStep.y)); float bottomRight = sampleAlpha(tex, uv + vec2( pixelStep.x, -pixelStep.y)); // 应用Sobel卷积核计算梯度 // Gx = (-1, 0, 1) Gy = ( 1, 2, 1) // (-2, 0, 2) ( 0, 0, 0) // (-1, 0, 1) (-1,-2,-1) float gx = -1.0 * topLeft + 0.0 * top + 1.0 * topRight + -2.0 * midLeft + 0.0 * 0.0 + 2.0 * midRight + -1.0 * bottomLeft + 0.0 * bottom + 1.0 * bottomRight; float gy = 1.0 * topLeft + 2.0 * top + 1.0 * topRight + 0.0 * midLeft + 0.0 * 0.0 + 0.0 * midRight + (-1.0) * bottomLeft + (-2.0) * bottom + (-1.0) * bottomRight; // 计算梯度幅度（边缘强度） float edgeStrength = sqrt(gx * gx + gy * gy); // 归一化处理，Sobel结果范围可能很大，我们将其映射到[0,1]区间。 // 这里的除数8.0是一个经验值，对应了Sobel算子可能的最大梯度值近似范围。 edgeStrength = clamp(edgeStrength / 8.0, 0.0, 1.0); return edgeStrength; }

这段代码是Shader的心脏。它在一个像素的周围3x3区域内采样9个点的Alpha值，然后分别与Sobel算子的Gx和Gy核进行卷积。gx反映了水平方向上的透明度变化，gy反映了垂直方向上的变化。两者结合（求平方和的平方根）得到的edgeStrength，就代表了该像素点处于边缘的“可能性”强度。

实操心得：clamp(edgeStrength / 8.0, 0.0, 1.0)这里的除数8.0不是绝对的。它依赖于你outlineWidth缩放后pixelStep的实际大小以及Alpha的对比度。有时你可能需要调整这个除数来让edgeStrength更好地分布在0-1之间，以便用outlineThreshold进行调节。一个调试技巧是在Fragment Shader里暂时返回vec4(edgeStrength, edgeStrength, edgeStrength, 1.0)来可视化边缘强度图，你会看到一个灰阶图，越白的地方边缘响应越强。

3.3 片段着色器：合成最终效果

最后，在片段着色器里，我们将边缘检测的结果与原始颜色混合。

in vec2 v_uv; layout(location = 0) out vec4 o_color; void frag() { vec2 pixelStep = vec2(outlineWidth) / textureSize; // 计算每个像素的UV步进 float edge = sobelAlpha(cc_spriteTexture, v_uv, pixelStep); // 读取原始颜色 vec4 originalColor = texture(cc_spriteTexture, v_uv); // 判断：如果边缘强度超过阈值，则使用描边颜色，否则使用原始颜色（或混合） if (edge > outlineThreshold) { // 完全替换为描边颜色（适用于硬边） // o_color = outlineColor; // 更常用的方式：基于边缘强度进行Alpha混合，实现柔和过渡 float blendFactor = smoothstep(outlineThreshold, outlineThreshold + 0.1, edge); o_color = mix(originalColor, outlineColor, blendFactor); // 注意：这里直接混合会导致描边覆盖内部区域。更优方案见下文“深度与混合”章节。 } else { o_color = originalColor; } }

初版Shader可能像上面这样写。但这里有个大问题：当originalColor的Alpha很低（比如0）时，mix操作的结果可能仍然带有描边颜色，这会导致在物体完全透明（Alpha=0）的区域内部，也因为边缘检测而出现了本不该有的描边色块。

4. 构建完整的后处理渲染流程

仅有Shader是不够的，我们需要在Cocos Creator的渲染管线中搭建一个舞台让它运行。

4.1 创建RenderTexture与相机

首先，我们需要一个“摄影师”把需要描边的场景拍下来。

1. 创建RenderTexture资产：在资源管理器右键创建RenderTexture，命名为outlineRT。设置合适的分辨率（通常与屏幕或设计分辨率一致）。
2. 创建专用相机：新建一个节点，添加Camera组件。
   • 清除颜色：设为(0,0,0,0)，即完全透明黑色。这点至关重要，因为我们只需要它拍摄有内容的物体。
   • 渲染目标：选择刚才创建的outlineRT。这样，这个相机渲染的内容就不会直接画到屏幕上，而是输出到outlineRT这张纹理里。
   • 可见性图层：只勾选你需要描边的物体所在的图层（例如DEFAULT或自定义的OUTLINE_LAYER）。通过图层来控制哪些物体参与描边，这是实现“选择性描边”的关键。
   • 优先级：将这个相机的优先级设为比主相机更高，确保它先执行渲染。

4.2 实现自定义RenderFeature

这是整个流程中最具技术含量的一步。RenderFeature是渲染管线中的一个功能模块。

1. 创建RenderFeature脚本：新建一个TypeScript脚本，例如OutlineRenderFeature.ts，继承自RenderFeature。

2. 关键生命周期方法：

   • initialize: 在这里创建渲染用的Material实例（使用我们编写的描边Effect），并获取或创建用于全屏渲染的Mesh（通常是一个四边形）。
   • render: 这是核心。在这个方法里，我们需要： a.激活我们的RenderTexture作为渲染目标。 b.设置视口和清屏（用透明色）。 c.执行一次渲染，将outlineRT作为输入纹理，传入我们的描边Material，并绘制全屏四边形。这一步就是调用GPU执行我们的Sobel Shader。 d.将结果输出到屏幕或另一个RenderTexture。

3. 注册到渲染管线：你需要修改或创建一个自定义的RenderPipeline，在它的initialize方法中，将你的OutlineRenderFeature实例添加到pipeline.renderFeatures数组中，并确保其顺序正确（通常在所有不透明和透明物体渲染之后，UI渲染之前）。

4.3 深度与混合：解决“内部描边”顽疾

回到之前Shader留下的问题。我们想要的描边，应该只出现在物体外部轮廓，而不是在物体内部透明区域也画上颜色。问题的根源在于，我们的后处理是对整张outlineRT（包含了物体和透明背景）进行的，Sobel算子无法区分“物体内部的透明”和“物体外部的透明”。

解决方案：利用深度或模板测试进行遮挡。思路是：只在不透明物体占据的屏幕区域之外绘制描边。

1. 修改专用相机：除了颜色，让这个相机也输出深度信息（depthStencil）。
2. 修改Shader和渲染流程：
   • 在OutlineRenderFeature的渲染过程中，我们有两张关键纹理：outlineRT（颜色+Alpha）和对应的深度纹理。
   • Pass 1: 生成边缘遮罩。运行一个简化版的Sobel Shader，只计算边缘强度，并输出到一张单通道（如R通道）的临时RenderTexture中，这个纹理可以叫edgeMaskRT。它记录了“哪里是边缘”。
   • Pass 2: 应用描边并合成。再运行一个全屏Shader，输入是edgeMaskRT和原始场景颜色sceneColorRT（主相机渲染的结果）。

     // 伪代码逻辑 float edge = texture(edgeMaskRT, uv).r; // 读取边缘强度 vec4 sceneColor = texture(sceneColorRT, uv); // 读取最终场景颜色 float sceneDepth = texture(depthTexture, uv).r; // 读取场景深度 // 关键判断：只有当当前像素的深度值大于背景深度（即当前像素是物体）时，才考虑描边？ // 不，更准确的逻辑是：我们只在“边缘强度高”且“该像素原本是背景（透明或深度值表示背景）”的地方绘制描边。 // 一种常见技巧：在渲染outlineRT时，将不透明物体的深度写入。 // 在合成时，检查edgeMask。如果edgeMask>阈值，且当前合成Pass的像素属于背景，则用描边颜色与场景颜色混合。

   实际操作中，更清晰的做法是利用模板缓冲。让主相机渲染不透明物体时写入一个模板值（比如1）。然后在后处理绘制描边时，设置模板测试条件为“不等于1”，这样描边就只会画在模板值为1的物体区域之外了，完美实现了外描边。

踩坑实录：深度/模板方案虽然精准，但增加了渲染复杂度。对于很多2D游戏（所有物体都在一个平面上，没有深度交错），一个取巧但有效的方案是：在Shader中，不仅检查边缘强度，还检查当前像素的原始Alpha值。如果边缘强度高，但原始Alpha也高（比如大于0.5），说明这个像素很可能在物体内部靠近边缘的地方，我们就减弱或取消这里的描边。

float blendFactor = edge; // 假设edge是0-1的强度 float interiorMask = 1.0 - smoothstep(0.3, 0.8, originalColor.a); // 原始不透明度越高，interiorMask越小 blendFactor *= interiorMask; // 用内部遮罩削弱物体内部的边缘响应 o_color = mix(originalColor, outlineColor, blendFactor);

这个办法不是物理准确的，但通过调节smoothstep的参数，在视觉上能很大程度缓解“内部描边”问题，且性能开销极小，在要求不极端苛刻的项目中非常实用。

5. 性能优化与进阶技巧

一个基础可用的描边效果做出来了，但要放到真实项目中，尤其是移动端，我们必须考虑性能。

5.1 性能瓶颈分析与优化

1. 降低采样分辨率：全屏后处理对每个像素都要进行至少9次纹理采样（Sobel 3x3）。一个直接暴力的优化是：将outlineRT的尺寸设为屏幕尺寸的1/2甚至1/4。在低分辨率下进行边缘检测，然后在合成阶段再上采样到屏幕分辨率。由于描边本身是模糊的视觉效果，分辨率降低带来的质量损失在大多数情况下难以察觉，但性能提升是线性的（像素数变为1/4，计算量也约变为1/4）。

   • 实现：创建outlineRT时设置较小的尺寸，或者使用相机的renderTarget的width和height属性进行动态设置。

2. 优化Shader指令：

   • 预先计算pixelStep：可以在CPU端计算好vec2(1.0/textureSize.x, 1.0/textureSize.y) * outlineWidth，作为一个uniform传入Shader，减少GPU计算量。
   • 使用textureGather指令（如果支持）：一些GPU提供textureGather函数，可以一次采样获取2x2区域的四个纹素，可以用来优化3x3采样模式，减少采样次数。但需考虑兼容性。
   • 简化Sobel计算：有时为了极致的性能，可以放弃精确的梯度计算，改用近似公式，比如edge = abs(gx) + abs(gy)，省去开方操作。

3. 控制渲染范围：不是所有东西都需要描边。通过相机的视锥体裁剪和图层遮罩，确保只渲染必要的物体到outlineRT。避免UI元素、全屏背景等不需要描边的物体进入这个流程。

5.2 动态效果扩展

描边不仅仅是静态的。结合游戏逻辑，我们可以让它“活”起来。

• 脉动描边：在Shader中引入时间变量cc_time.x，让outlineWidth或outlineColor的亮度随着正弦函数变化，产生呼吸式的脉动效果，非常适合用于提示可交互物品或危险区域。

  float pulse = sin(cc_time.x * 3.14159 * 2.0 * pulseSpeed) * 0.5 + 0.5; // 生成0-1的脉冲波形 float dynamicWidth = outlineWidth * (1.0 + pulse * pulseAmplitude); // 动态宽度 vec3 dynamicColor = outlineColor.rgb * (1.0 + pulse * 0.5); // 动态颜色亮度

• 闪烁描边：更急促的开关效果，可以通过判断时间取整来实现。

  float blink = step(0.5, fract(cc_time.x * blinkFrequency)); // 以blinkFrequency频率在0和1之间切换 vec4 finalOutlineColor = outlineColor * blink; // 描边颜色乘以blink，实现闪烁

• 距离场描边：对于需要非常精确、且可做动态形变（如膨胀、收缩）的描边，可以考虑在预处理阶段为角色生成一张距离场纹理。在运行时，Shader中只需要对距离场进行简单的阈值比较就能得到平滑且可动态控制的描边，性能极高，效果极好。但这需要额外的美术工具链或运行时生成距离场，复杂度更高。

5.3 与引擎UI的兼容性

Cocos Creator中，UI组件（如Sprite、Label）通常由UI渲染批次处理，而我们的后处理相机默认可能渲染不到它们。如果你需要给UI元素加描边，有几种方法：

1. 将UI节点放在3D节点下：不推荐，会破坏UI的渲染顺序和批处理。
2. 为UI相机也添加后处理：为渲染UI的相机单独复制一套后处理流程，但这会显著增加Draw Call。
3. 使用内置的UI Effect：Cocos Creator的UI组件支持自定义Material。你可以编写一个基于Sobel的UI Shader，直接赋给需要描边的UI Sprite。这种方法最直接，性能影响局限于使用了该材质的UI，但每个Sprite独立计算，无法做跨物体的边缘处理。

我的选择：对于需要描边的UI，我通常让美术直接出带描边的图，或者使用简单的多重绘制（对于静态UI，性能可以接受）。将动态描边技术重点用在游戏世界中动态变化的角色和物体上。分清主次，合理选择技术方案。

6. 常见问题排查与调试技巧

即使按照步骤来，你也可能会遇到各种妖魔鬼怪。这里记录几个我踩过的坑和解决方法。

调试利器：Frame Debugger 与 Shader输出调试遇到诡异问题，不要瞎猜。Cocos Creator的渲染调试器（如果版本支持）或通过代码临时修改Shader输出颜色，是定位问题的两大法宝。

• 颜色调试法：在Fragment Shader里，暂时将输出改为某个中间变量。比如o_color = vec4(edge, edge, edge, 1.0);可以查看边缘强度图；o_color = vec4(pixelStep.x*100.0, pixelStep.y*100.0, 0.0, 1.0);可以查看UV偏移是否正常。通过颜色，你能直观地看到每一阶段的数据状态。
• 简化测试法：用一个纯色的、规则形状（如圆形）的图片进行测试，排除美术资源复杂性的干扰。确认基础功能正常后，再换上复杂的角色纹理。

实现一个鲁棒的动态描边效果，就像雕琢一件武器。它需要你对图形学基础（卷积、边缘检测）、引擎渲染流程（相机、RenderTexture、RenderFeature）以及Shader编程都有扎实的理解。这个过程可能会反复调试，但当看到角色在屏幕上随着你的代码亮起一道流畅的光边，并且这个光边还能随着你的心意变化颜色、跳动闪烁时，那种成就感是无与伦比的。希望这篇长文能成为你手中一份详尽的“锻造图纸”，助你打造出属于自己项目的锋利视觉武器。