如何在不丢失 png 透明度的情况下设置 webgl 不透明度？

Question

我使用 webgl 绘制带有两个三角形的 2d 图片，比使用 canvas 2d context 更快。我把事情保持得很简单，因为我只用它来画图，没有 3d。 现在我正在尝试为我的片段着色器添加不透明度，因为 webgl 上下文没有 .globalalpha 属性。

这是我的代码：

<script id="2d-fragment-shader" type="x-shader/x-fragment">
    precision mediump float;

    uniform sampler2D u_image;
    varying vec2 v_texCoord;
    uniform float alpha;

    void main()
    {
        gl_FragColor = vec4(texture2D(u_image, vec2(v_texCoord.s, v_texCoord.t)).rgb, alpha);
    }
</script>

...

webglalpha = gl.getUniformLocation(gl.program, "alpha");

...

gl.uniform1f(webglalpha, d_opacity);

d_opacity 是我的绘图函数作为参数获取的不透明度值。

不透明度发生了变化，但现在我的透明 png 得到了黑色背景，虽然 png 透明度以前可以工作，当时我还在使用

gl_FragColor = texture2D(u_image, vec2(v_texCoord.s, v_texCoord.t));

如何在不丢失 png 透明度的情况下设置不透明度？

Answer 1

您需要将覆盖的 alpha 乘以纹理中的原始 alpha：

void main()
{
    vec4 color = texture2D(u_image, vec2(v_texCoord.s, v_texCoord.t));
    gl_FragColor = vec4(color.rgb, alpha * color.a);
}

例如，当 texel A 的 PNG 不透明度为 0.5 而 texel B 的 PNG 不透明度为 0.3，当您将全局 alpha 设置为 @987654326 时，您希望它们分别变为 0.25 和 0.15 @ 而不是两者都是0.5。