如何在应用Shader时保留自身颜色？当前实现存在褪色问题

我编写的Shader代码如下：

shader_type canvas_item;

void fragment(){
    vec4 self_color = texture(TEXTURE, UV);
    vec4 back_color = texture(SCREEN_TEXTURE, SCREEN_UV);
    
    if(self_color.a==0.0)
        COLOR=back_color;
    else // invert color
        COLOR = mix(self_color,vec4(1.0 - back_color.rgb, back_color.a),0.5);
}

当前效果：左侧应用Shader的素材出现褪色，与编辑器灰色背景融合，和右侧原始素材差异明显

期望实现的效果：

解决方案 #

你当前的问题在于mix(self_color, vec4(1.0 - back_color.rgb, back_color.a), 0.5)直接将素材颜色与反相背景色各取50%混合，导致素材原始颜色被背景色大幅冲淡。要保留素材自身颜色，需要以素材颜色为基础，仅在素材区域叠加反相背景的效果，而非直接混合两种颜色。

修改后的Shader代码：

shader_type canvas_item;

void fragment(){
    vec4 self_color = texture(TEXTURE, UV);
    vec4 back_color = texture(SCREEN_TEXTURE, SCREEN_UV);
    
    if(self_color.a == 0.0){
        COLOR = back_color;
    } else {
        // 保留素材自身RGB颜色，叠加反相背景的效果
        vec3 inverted_back = 1.0 - back_color.rgb;
        // 以素材颜色为基础，根据透明度控制反相背景的混合权重
        COLOR = vec4(mix(self_color.rgb, inverted_back, 0.5 * self_color.a), self_color.a);
    }
}

代码说明：

• 不再直接混合整个self_color和反相背景色，而是仅混合两者的RGB通道，保留素材原有的透明度
• 用self_color.a控制反相背景的混合强度，确保只有素材不透明的区域才会应用反相效果，避免透明区域的干扰
• 若需要更突出素材原始颜色，可以调整mix的第三个参数（比如改为0.3），减少反相背景的影响

内容的提问来源于stack exchange，提问作者cak3_lover