为什么透明材质会导致遮挡？答案

【问题标题】：Why do transparent materials result in occlusion?为什么透明材质会导致遮挡？
【发布时间】：2015-11-07 08:59:28
【问题描述】：

我有一个 threejs 场景，其中包含多个具有透明材质的网格（平面）。渲染器打开了透明度，您可以看出这是因为<body> 具有蓝到黑渐变样式。

<body style="background: linear-gradient(to bottom, #1e5799 0%,#000000 100%);">

以下是我创建平面几何的方法：

const geometry = new THREE.PlaneBufferGeometry( 15, 15, 1 );

然后它们被旋转以使它们相交。

请注意，在某些地方，它们是合成的，因此两种材质混合在一起，但在其他地方，一个平面的一部分会遮挡另一平面的一部分。我的理解是，一个平面被认为在另一个平面的“前面”，这决定了它们的绘制顺序。但是，为什么一个透明的平面会遮挡另一个平面？。

也就是说，即使不可能以正确的顺序绘制相交平面，我仍然希望它们不正确地合成，而是它们被遮挡了。

【问题讨论】：

标签： 3d three.js

【解决方案1】：

在您的材质上将 depthWrite 设置为 false： material.depthWrite = false;

当您将其设置为 false 时，材质不再对深度缓冲区产生影响。对不起，我无法进一步解释，这只是个人经验。

三.js r73

【讨论】：

【解决方案2】：

简短的回答是深度测试和 alpha 混合不能很好地协同工作。如果首先绘制的四边形更接近，则将针对整个四边形区域写入深度缓冲区，而不管 alpha 值如何。之后绘制的粒子进一步未能通过深度测试，因此它们不会被绘制。

对此的部分解决方案通常是在片段着色器中进行 alpha 测试。 If (color.a < 0.01) {discard;} 或者禁用深度测试。

【讨论】：

【解决方案3】：

使用材料alphaTest 属性来移除这些工件。

【讨论】：