transparency - WebGL中的透明纹理行为

Question

环境：WebGL，Chrome。将透明png用作模型的纹理时，我有以下行为：


图片A-树将建筑物隐藏在其后，我看到了世界框纹理。它还隐藏自身（后分支不可见）
同时-图片B-正常运行，窗口是透明的，我看到了后面的内容


答：
B：

这两个屏幕截图都是在不同的相机位置同时在同一场景上制作的。纹理是通过相同的算法生成的。

我不明白窗口和分支透明度之间的区别是什么。我的主要问题是-如何修复分支，以免将对象隐藏在它们的后面？着色器代码为：

gl_FragColor = vec4(textureColor.rgb * vLightWeighting, textureColor.a);

我玩过启用/禁用混合和depth_test，有时会获得预期的结果，但不确定这是否是正确的处理方法。

Answer 1

您遇到了深度缓冲区问题，它与着色器或混合模式无关。

发生的情况是，渲染透明几何体的顺序会影响在其后面进行渲染的能力。这是因为深度缓冲区没有透明或不透明的概念。结果，即使它们在视觉上对场景没有贡献，这些透明像素也无论如何都会将它们写入深度缓冲区，之后，您在它们后面绘制的任何像素都将被丢弃，因为它们“不可见”。但是，如果先将几何图形拖到透明对象的后面，则它将正确显示，因为在放置透明深度以丢弃它之前将其写入框架。

即使是大型商用游戏引擎，在某种程度上仍会遇到这种问题，因此不要为此感到难过，以免引起混淆。 :)

这个问题还没有“完美的解决方案”，但真正归结为试图像这样构造场景：


渲染按状态排序的所有不透明几何图形（着色器/纹理/等）
接下来渲染任何透明几何体。如果可能，请按深度对它们进行排序，以便首先从相机绘制最远的一个。


只需标记透明的几何图形并在所有其他操作之后进行渲染即可解决90％的问题，但对于透明对象重叠，问题仍然存在。对于您来说，这可能不是问题，具体取决于您的场景，但是如果仍然引起伪影，则需要在绘制之前按深度对透明对象进行排序。