WebGL/three.js片元着色器 - 使用透明度纹理覆盖透明度颜色

Question

我有一个纹理传递到片段着色器中，我想在其上方叠加一种50%不透明度的颜色。我已经让它部分工作了，但原始纹理失去了它的透明度。

参考：

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中没有考虑纹理的透明度，但我不确定如何集成它。

- user2994359

Answer 1

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

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

- Andy Ray

---

哦，糟糕。是的，这就是我想要的：gl_FragColor = vec4(mix(tColor.rgb, color.rgb, color.a), tColor.a); - user2994359