使用 z-buffer 正确渲染透明胶片答案

【问题标题】：Render transparencies correctly with z-buffer使用 z-buffer 正确渲染透明胶片
【发布时间】：2014-07-13 21:15:38
【问题描述】：

我在使用透明胶片和 z 缓冲区时遇到了问题。一个平面的透明度隐藏了另一个平面。

蝴蝶是简单的几何图形，基本上是两个平面（4 个三角形）。我在一个上渲染 50 只蝴蝶，因为在顶点着色器中使用纹理传递位置。纹理是透明的png。 alphaTest 对透明设置为 true 的材质不起作用（尝试 0.5 和其他值）。也尝试所有类型的混合，但效果不佳。 depthWrite = false 没有帮助，因为 alpha 没有，但问题是深度排序会造成混乱。

如果我在没有着色器的情况下每次调用渲染一只蝴蝶，那么 alpha 测试可以正常工作。你可以在这里看到错误

我正在使用 three.js 版本 67。如果有人可以帮助我，将不胜感激 :)

【问题讨论】：

标签： three.js webgl

【解决方案1】：

在这种情况下，您可以简单地使用位于机翼不可见部分的 Discarding Fragments。

【讨论】：

我尝试但对您的建议没有帮助。好吧，我在单蝴蝶渲染中以两种方式在材质中使用 alphaTest 实现了良好的透明度。但我试图让它以一种更有效的渲染方式工作，发送一个模型 50 蝴蝶几何图形。这意味着只有一个模型被添加到场景中。感谢您的建议。
@mcanet 这不是问题。您还可以发送将在相机变换时更新的位置数组或对其进行动画处理。
是的，我正在发送一个包含 50 个蝴蝶位置的纹理，该位置在顶点着色器中将所有顶点放置到位。但是透明度并不正确，因为 alphaTest 不能像预期的那样工作。
您缓冲区中的@mcanet 几何图形将以恒定顺序呈现，因此引擎无法为您修复它。但是您可以在 CPU 上对蝴蝶位置（纹理中的数据索引）进行深度排序，然后它就会起作用。或者你可以在 GLSL 中使用 discard opengl.org/sdk/docs/tutorials/ClockworkCoders/discard.php
非常感谢！！它使用丢弃。vec4 tcolor = texture2D(texture1, vUv); if (tcolor == vec4(0.0,0.0,0.0,0.0)) discard; 边框中唯一的东西有一点背景颜色，它不适用于texture.magFilter = THREE.NearestFilter; texture.minFilter = THREE.NearestFilter;。知道会发生什么吗？截图在这里：flickr.com/photos/mcanet/14260053745