第9.3章：2D颜色替换着色器

颜色替换是2D游戏中常用的技术，可以实现换装系统、队伍标识、昼夜变化等效果。本章将详细介绍各种颜色替换技术的实现。

🎯 学习目标

理解颜色替换的基本原理
掌握精确颜色匹配和范围替换
学会实现调色板交换系统
理解HSV颜色空间的应用

💡 颜色替换原理

基础概念

颜色替换通过检测特定颜色并用新颜色替代：

// 基础颜色替换
if (distance(originalColor, targetColor) < threshold) {
    finalColor = replacementColor;
} else {
    finalColor = originalColor;
}

替换方式分类

精确匹配 - 单一颜色替换
范围匹配 - 相似颜色替换
调色板 - 批量颜色映射
HSV调整 - 色调/饱和度修改```

## 🔧 基础颜色替换

### 1. 精确颜色替换

```glsl
CCEffect %{
  techniques:
  - name: exact-color-replace
    passes:
    - vert: color-replace-vs:vert
      frag: exact-replace-fs:frag
      properties: &props
        mainTexture:      { value: white }
        targetColor:      { value: [1, 0, 0, 1], editor: { type: color } }
        replacementColor: { value: [0, 1, 0, 1], editor: { type: color } }
        threshold:        { value: 0.01, range: [0, 0.5] }
        featherEdge:      { value: 0.005, range: [0, 0.1] }
}%

CCProgram color-replace-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 exact-replace-fs %{
  precision highp float;
  
  uniform sampler2D mainTexture;
  uniform vec4 targetColor;
  uniform vec4 replacementColor;
  uniform float threshold;
  uniform float featherEdge;
  
  in vec2 v_uv;
  
  vec4 frag() {
    vec4 originalColor = texture(mainTexture, v_uv);
    
    // 计算颜色差异
    float colorDistance = distance(originalColor.rgb, targetColor.rgb);
    
    // 替换判断
    float replaceMask = 1.0 - smoothstep(threshold - featherEdge, threshold + featherEdge, colorDistance);
    
    // 颜色混合
    vec3 finalColor = mix(originalColor.rgb, replacementColor.rgb, replaceMask);
    
    return vec4(finalColor, originalColor.a);
  }
}%