Javascript webgl 2d将两个透明纹理相互叠加

我正在尝试将两个纹理与一个alpha通道相互混合

通过网络查看后，似乎没有简单的方法来解决这个问题。我在片段着色器中尝试了以下技巧：

if(gl_FragColor.a < 0.5){
    discard;
}

precision mediump float;
varying vec3 fragColor;
varying highp vec2 vTextureCoord;
uniform sampler2D uSampler;
void main()
{
    vec4 tex = texture2D(uSampler, vTextureCoord);
    gl_FragColor = tex * vec4(fragColor, 1.0);
    if(gl_FragColor.a < 0.5){
    discard;
}
}'

gl_FragColor = tex * vec4(fragColor * tex.rgb, tex.a);

这是我使用的总账设置的一部分：

gl.enable(gl.DEPTH_TEST);
gl.enable(gl.BLEND);
gl.blendEquation(gl.FUNC_ADD);
gl.blendFunc(gl.SRC_ALPHA, gl.ON);

当前所有精灵都在同一z轴0上绘制。然而，我不知道是否是问题的根源，因为我测试给每个对象一个随机的z值，问题仍然存在

编辑： 回应拉比的评论

这个很好用！alpha是混合的，但唯一的问题是精灵看起来“烧焦了”：

我尝试将片段着色器更改为：

<strike>gl_FragColor = tex * vec4(tex.rgb, tex.a);</strike>

而不是

gl_FragColor = vec4(fragColor* tex.rgb, tex.a);

否则会产生燃烧混合效果

当前所有精灵都在同一z轴0上绘制

由于dept测试已启用（），且默认深度函数（）为

gl.LESS

，因此第二个绘制的精灵将无法通过深度测试。
您必须禁用深度测试：

gl.disable(gl.DEPTH_TEST);

此外，我建议调整混合函数（）：

或者你用。因此，必须调整片段着色器：

if(gl_FragColor.a < 0.5){
    discard;
}

precision mediump float;
varying vec3 fragColor;
varying highp vec2 vTextureCoord;
uniform sampler2D uSampler;
void main()
{
    vec4 tex = texture2D(uSampler, vTextureCoord);
    gl_FragColor = tex * vec4(fragColor, 1.0);
    if(gl_FragColor.a < 0.5){
    discard;
}
}'

gl_FragColor = tex * vec4(fragColor * tex.rgb, tex.a);

您必须使用以下混合函数（）：

注意，如果（gl_FragColor.a<0.5）丢弃，则不需要

if更多

gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);