WebGL：纹理中的零 alpha 像素是否一定会更新深度缓冲区？答案

【问题标题】：WebGL: Will zero-alpha pixels in a texture necessarily update the depth buffer?WebGL：纹理中的零 alpha 像素是否一定会更新深度缓冲区？
【发布时间】：2012-09-12 01:46:04
【问题描述】：

我正在尝试渲染一个混合了完全透明像素和完全不透明像素的纹理。似乎我唯一的选择是从后到前按距离渲染它们（毕竟是完全不透明的多边形），因为即使是完全透明的像素也会更新深度缓冲区，但我不确定这是否准确。是吗？

似乎可以告诉片段着色器将深度缓冲区单独留给透明像素，但显然不是。我错过了什么吗？

除了我没有想到的大量多边形之外，还有其他合理的方法来渲染高度不规则形状的图像吗？

【问题讨论】：

标签： webgl fragment-shader alpha-transparency

【解决方案1】：

既然我已经提出了这个问题，我似乎至少找到了一个答案。片段着色器中的 discard 语句似乎可以满足我的需要：

void main(void) {
  vec4 textureColor = texture2D(uSampler, vTextureCoord);
  if (textureColor.a < 0.5) 
    discard;
  else
    gl_FragColor = vec4(textureColor.rgb * vLighting, textureColor.a);
}

【讨论】：

是的，这是正确的解决方案。在固定功能的 OpenGL 中，这被称为 alpha 测试。顺便说一句，如果 vTextureCoord 是 vec2，你的 vec2() 是多余的，如果不是，vTextureCoord.st 就足够了。
谢谢，凯文！很高兴知道我在正确的轨道上。（我也摆脱了你提到的那些copypasta垃圾，所以再次感谢。）
哦，那真是太棒了。非常感谢。

【解决方案2】：

当您到达片段着色器时，无论您是否输出 alpha，都已经确定会有一个像素。避免它的唯一方法是使用 glEnable(GL_ALPHA_TEST) 之类的选项。然而，这仅适用于 0 或 1 的 alpha 值，例如当您绘制带有硬边框的精灵时。如果你想要软边框或者你想要半透明的物体，你需要从前向后画。您可能需要为此切割几何图形。

【讨论】：

我确实有硬边框。但是显然 WeGL 不支持此功能。 Quoth Chrome：WebGL: INVALID_ENUM: enable: invalid capability