WebGL / three.js片段着色器 - 覆盖alpha透明纹理，具有alpha透明色

Question

所以我有一个纹理传递给片段着色器，我想覆盖一个50％alpha的颜色。我已经完成了一半工作，但原始纹理失去了它的alpha。

请参阅：

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

这里显而易见的是gl_FragColor中没有考虑纹理的alpha，但我不确定如何整合它。

Answer 1

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

您传入的最后一个参数1.0是alpha，您很难将其编码为1。