WebGL给图片添加透明背景功能运行无效果求助

问题原因 #

• 片元着色器的输出被重复赋值覆盖：你先给gl_FragColor赋值了半透红色，紧接着的纹理采样操作直接把这个值完全覆盖了，如果你的原图没有透明通道，输出的alpha值默认为1，自然看不到下层背景。
• 未开启WebGL的混合功能：WebGL默认不会自动叠加片元和画布已有内容的颜色，必须手动配置混合规则才能让alpha值生效。
• 采样坐标存在适配问题：你用gl_FragCoord.yx会导致图片横竖翻转，硬编码600作为采样分母，当画布尺寸不是600*600时会出现纹理拉伸变形。

修正方案 #

1. 修改片元着色器代码

precision highp float;
    
uniform float time;
uniform sampler2D image;
uniform vec2 u_resolution;
uniform vec2 viewport;
    
void main(void)
{
    // 采样纹理，用u_resolution动态计算坐标适配不同画布尺寸
    vec4 textureColor = texture2D(image, gl_FragCoord.xy / u_resolution);
    // 调整alpha值实现半透效果，可自行调整0.5这个数值控制透明度
    gl_FragColor = vec4(textureColor.rgb, 0.5);
}

2. 补充JS端的混合配置

在WebGL上下文初始化完成后，添加以下代码开启混合：

const gl = canvas.getContext('webgl');
// 开启alpha混合
gl.enable(gl.BLEND);
// 配置标准透明混合规则：源颜色乘自身alpha，背景乘1减源alpha再相加
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);

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