three.js - 深度测试为 true 的 Three.js Sprite 的黑色背景

Question

我一直在尝试将自定义属性 BufferGeometry 示例( https://threejs.org/examples/webgl_buffergeometry_custom_attributes_particles.html )转换为飞越动画，如果 depthTest 设置为 true，我发现 Sprite 具有深色背景(以及我自己创建的那些)。请参阅图像。
自定义属性示例中的 sprite 具有透明背景，但如果 depthTest 设置为 true，则在呈现时会忽略此背景。
我尝试了许多自定义混合规则，但找不到去除背景的方法，只能稍微减少效果。如果 depthTest 设置为 false，背景就会消失。
这是一个已知的限制吗？有解决办法吗？
我正在修改这个问题，以使用不同的球 Sprite (也具有透明背景)添加更清晰的图像。对于 https://threejs.org/examples/webgl_buffergeometry_custom_attributes_particles.html 中使用的自定义 ShaderMaterial，该图像的 depthTest 设置为 true三.js 示例。

相比之下，这使用了来自不同 Three.js 示例 ( https://threejs.org/examples/webgl_points_sprites.html ) 的多个 PointsMaterial，同时将 depthTest 设置为 true 并为 Sprite 使用 PointsMaterial 贴图参数。

如您所见，第二个 PointsMaterial 示例按预期工作。因为 PointsMaterial 只接受一种固定的大小和颜色，所以我需要创建 36 个不同的点几何来渲染这个图像。
我更喜欢在第一个示例中使用自定义着色器(它具有自定义大小和颜色属性，并且只需要一个几何图形)。有没有办法像 PointsMaterial 那样定义自定义着色器来支持 depthTest？

Answer 1

WebGL 有一个深度缓冲区，用于找出隐藏在其他像素后面的像素。如果一个像素隐藏在另一个像素后面，它就不会被渲染。通常这就是你想要的，你为什么要浪费 GPU 时间来渲染你永远不会看到的像素？考虑下面的示例深度缓冲区，白色方块离相机更近，而深色方块离相机更远:

如果有一个方块隐藏在另一个方块后面，您将不会在 depthBuffer 中看到它，您只会看到最接近的一个。 depthBuffer 不知道您的正方形具有部分透明度并且您希望某些部分是透明的。这在其他实时引擎中也是一个问题，这是来自 Unity 的一个例子:

较近的方块会阻挡 depthBuffer 中较远的方块的一部分，因此不会渲染被遮挡的像素。这就是为什么设置 depthTest to false很有用。您基本上是在告诉渲染器停止测试哪些像素落后于其他像素，而只是渲染所有像素。又来了 depthTest = false :

如果您 必须设置depthTest，(例如，如果你想让 Sprite 隐藏在实心墙后面)你可以set depthWrite to false在 Sprite Material 上。它仍然会检查哪些像素在其他像素之后，但是 Sprite 的像素不会写入 depthBuffer，因此没有 Sprite 可以阻止另一个 Sprite 。

depthTest: true;   // Tests pixel depth
depthTest: false;  // Does not test pixel depth
depthWrite: true;  // Writes pixel depth to depthBuffer
depthWrite: false; // Does not write pixel depth to depthBuffer

至于混合模式，我更喜欢 THREE.AdditiveBlending因为当它们堆积在另一个顶部时，它会给粒子一个很好的发光效果。但这取决于你。