第9.4章：2D描边着色器

描边效果是2D游戏中非常常见的视觉增强技术，用于突出角色、UI元素、提高可读性等。本章将详细介绍各种描边技术的实现方法。

🎯 学习目标

理解描边效果的基本原理
掌握外描边和内描边技术
学会实现多色描边和动态描边
理解距离场描边的高级应用

💡 描边原理

基础概念

描边通过检测边缘并在周围绘制颜色实现：

// 基础描边检测float edge = 0.0;
for (int i = -outlineWidth; i <= outlineWidth; i++) {
    for (int j = -outlineWidth; j <= outlineWidth; j++) {
        vec2 offset = vec2(i, j) * texelSize;
        edge += texture(mainTexture, uv + offset).a;
    }
}

描边类型分类

外描边 - 在透明区域绘制边缘
内描边 - 在不透明区域内侧绘制
双向描边 - 同时包含内外描边
发光描边 - 具有渐变发光效果

🔧 基础描边效果

1. 简单外描边

CCEffect %{
  techniques:
  - name: simple-outline
    passes:
    - vert: outline-vs:vert
      frag: simple-outline-fs:frag
      properties: &props
        mainTexture:    { value: white }
        outlineColor:   { value: [0, 0, 0, 1], editor: { type: color } }
        outlineWidth:   { value: 2.0, range: [1, 10] }
        textureSize:    { value: [512, 512], editor: { type: vec2 } }
}%

CCProgram outline-vs %{
  precision highp float;
  #include <cc-global>
  
  in vec3 a_position;
  in vec2 a_texCoord;
  
  out vec2 v_uv;
  
  vec4 vert() {
    v_uv = a_texCoord;
    return cc_matViewProj * vec4(a_position, 1);
  }
}%

CCProgram simple-outline-fs %{
  precision highp float;
  
  uniform sampler2D mainTexture;
  uniform vec4 outlineColor;
  uniform float outlineWidth;
  uniform vec2 textureSize;
  
  in vec2 v_uv;
  
  vec4 frag() {
    vec2 texelSize = 1.0 / textureSize;
    vec4 originalColor = texture(mainTexture, v_uv);
    
    // 如果当前像素不透明，直接返回原颜色
    if (originalColor.a > 0.5) {
      return originalColor;
    }
    
    // 检测周围是否有不透明像素
    float outline = 0.0;
    float samples = 0.0;
    
    for (float x = -outlineWidth; x <= outlineWidth; x += 1.0) {
      for (float y = -outlineWidth; y <= outlineWidth; y += 1.0) {
        vec2 offset = vec2(x, y) * texelSize;
        float alpha = texture(mainTexture, v_uv + offset).a;
        outline += alpha;
        samples += 1.0;
      }
    }
    
    outline /= samples;
    
    // 生成描边
    if (outline > 0.1) {
      return outlineColor;
    }
    
    return originalColor;
  }
}%