WebGL/three.js fragment shader - Overlay alpha-transparent texture with alpha-transparent colour

Question

So I have a texture passed to a fragment shader, and I want to overlay a colour with 50% alpha on top of it. I've got it half working, but the original texture loses it's alpha.

See:

uniform sampler2D texture;
varying vec2 vUv;

void main() {
    vec4 tColor = texture2D(texture, vUv);

    vec4 color = vec4(1.0, 0.0, 0.0, 0.5);
    gl_FragColor = vec4(mix(tColor.rgb, color.rgb, color.a), 1.0);
}

It's obvious here that the texture's alpha isn't taken into account in gl_FragColor, but I'm not sure how to integrate it.

Answer 1

gl_FragColor = vec4(mix(tColor.rgb, color.rgb, color.a), 1.0);

The last argument you're passing in, 1.0, is the alpha, and you're hard coding it to 1.