Shader案例 颜色替换

之前实现过 色相替换 把颜色转为 HSV 后改变色相,这次直接用 RGB 格式 替换。

wechat_2025-08-06_074713_768


原理

通过RGB值计算向量距离来检索相似颜色,然后进行替换。

colorDistance = distance(color1Rgb, color2Rgb);

CCEffect

properties:
        originalColor: { value: [1,1,1,1], editor: { type: color ,tooltip: '原颜色' } }
        targetColor: { value: [1,1,1,1], editor: { type: color ,tooltip: '目标颜色' } }

片段着色器 fs

声明部分:

uniform colorReplacement {
    vec4 originalColor;
    vec4 targetColor;
  };

入口函数:

void main () {
  vec4 texColor = vec4(1.0);
  CCTexture(texture, v_uv0, texColor);
  vec4 finalColor;

  #if USE_TINT
    finalColor.a = v_light.a * texColor.a;
    finalColor.rgb = ((texColor.a - 1.0) * v_dark.a + 1.0 - texColor.rgb) * v_dark.rgb + texColor.rgb * v_light.rgb;
  #else
    finalColor = texColor * v_light;
  #endif

  #if USE_COLOR_REPLACEMENT
     vec3 pixelRgb = finalColor.rgb;
     vec3 originalRgb = originalColor.rgb;
     vec3 targetRgb = targetColor.rgb;

     // 计算 RGB 颜色距离(欧式距离)
     float colorDistance = distance(pixelRgb, originalRgb);

     // 设定颜色匹配阈值(值越小匹配越严格)
     float blendFactor = smoothstep(0.1, 0.3, colorDistance); // 平滑过渡
     finalColor.rgb = mix(targetRgb, pixelRgb, blendFactor);
 #endif

  ALPHA_TEST(finalColor);

  gl_FragColor = finalColor;
}
5赞

up有没有3.x版本的

大佬 有没有完整的shader代码