我在 WebGL 程序中的片段着色器将我的纹理中的所有颜色设置为黑色

Question

我有一个简单的游戏，它使用三个带有透明部分的纹理。我可以看到我的纹理的轮廓，但是任何不将 alpha 设置为零的地方都会返回黑色 (0, 0, 0, 1)。

这是我的片段着色器：

precision mediump float;

// our texture
uniform sampler2D u_image0;
uniform sampler2D u_image1;
uniform sampler2D u_image2;

// the texCoords passed in from the vertex shader.
varying vec2 v_texCoord;

void main() {
// Look up a color from the texture.
vec4 textureColor = texture2D(u_image0, v_texCoord);
    if (textureColor.a < 0.5) 
        discard;
    else
        gl_FragColor = vec4(textureColor.rgb, textureColor.a);

vec4 textureColor1 = texture2D(u_image1, v_texCoord);
    if (textureColor1.a < 0.5) 
        discard;
    else
        gl_FragColor = vec4(textureColor1.rgb, textureColor1.a);

vec4 textureColor2 = texture2D(u_image2, v_texCoord);
    if (textureColor2.a < 0.5) 
        discard;
    else
        gl_FragColor = vec4(textureColor2.rgb, textureColor2.a);

我从另一个问题中得到了测试 alpha 的条件，其中 alpha 为零的像素被设置为白色。解决了我的问题，但不确定它是否可以正确缩放到多个纹理。我很确定我做错了。

提前致谢，如果我需要添加更多代码（顶点着色器等），请告诉我。

Answer 1

我不清楚您实际尝试实现的目标。 你写这段代码的方式让我觉得你不知道discard 语句实际上做了什么：它完全丢弃了片段，着色器的当前调用将立即中止。

如果 3 个纹理中的 任何 的 alpha 值低于 0.5，则着色器所做的只是丢弃整个片段。您在丢弃之前写信给gl_FragCoord这一事实根本不重要。如果所有纹理的 alpha 值都高于 0.5，则最终颜色将为 u_image2。