Question

我使用webgl绘制2d图片，带有两个三角形，比使用canvas 2d上下文更快。我保持简单，因为我只用它画画，没有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是我的绘图函数作为参数获取的不透明度值。

不透明度发生了变化，但是现在我的透明pngs得到了黑色背景，虽然png透明度曾经用过，之前我还在使用

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

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

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);
}

例如，当纹素A的PNG不透明度为0.5且纹素B的PNG不透明度为0.3时，您希望它们分别成为0.25和0.15您将全局Alpha设置为0.5，而不是0.5。

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

1 个答案: