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

原理
通过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;
}