WebGL/three.js 片段着色器 - 使用 alpha 透明颜色覆盖 alpha 透明纹理答案

【问题标题】：WebGL/three.js fragment shader - Overlay alpha-transparent texture with alpha-transparent colourWebGL/three.js 片段着色器 - 使用 alpha 透明颜色覆盖 alpha 透明纹理
【发布时间】：2014-02-06 03:51:12
【问题描述】：

所以我有一个纹理传递给片段着色器，我想在它上面覆盖一个具有 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，但我不确定如何整合它。

【问题讨论】：

标签： javascript three.js glsl webgl shader

【解决方案1】：

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

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

【讨论】：

天哪。是的，这就是我想要的：gl_FragColor = vec4(mix(tColor.rgb, color.rgb, color.a), tColor.a);