Three.js/WebGL - 透明平面隐藏在它们后面的其他平面

当您在Three.js/WebGL中有两个平面并且其中一个或两个透明时，有时后面的平面将被上面的透明平面隐藏。为什么是这样？Three.js/WebGL - 透明平面隐藏在它们后面的其他平面

2012-06-22 MaiaVictor

这不是一个错误，它只是OpenGL（以及WebGL）的工作原理。透明表面在Z缓冲区中播放不好，因此必须手动排序并将其渲染为背对背。三个JS试图为你做这件事（这就是为什么当你设置X值> 0时问题消失的原因），但不能稳健地处理像你显示的相交几何的情况。

我已经在different SO question中更深入地解释了该问题，因此您可能需要引用该问题。

2012-06-22 23:27:32 Toji

感谢您的回答，但是您告诉我最好只是重新设计我的游戏，或者是一个解决方案，可追踪黑客Three.JS？ – MaiaVictor

@Toji您提到的问题并不涉及完全相同的问题。在另一个问题中，只有部分对象/纹理是透明的，在这个问题中，整个平面是透明的，并且通过简单地为透明平面完全禁用'depthWrite'，这很容易解决。 – Wilt

尝试将alphaTest: 0.5添加到材质。

2012-06-23 13:24:43 mrdoob

已经尝试过，没有工作：/我想这是一个webgl问题，所以我必须重新设计我的游戏如何显示飞机。它会看起来有点黑客。 – MaiaVictor

我有一架基于画布的纹理映射到它显示文本的飞机。在某些角度/位置，我遇到了纹理材质透明度的问题，并修复了这个问题，非常感谢！ – plyawn

注意：'alphaTest'是一个阈值，它会使纹理中的半透明区域完全不透明（当像素不透明度>阈值时）或完全透明（当像素不透明度<阈值时）。这可能会导致丑陋的边缘。 – Blaise

fwiw，如果您有很多平行平面（无法看到您的示例，Google无法解析您的域），很容易将它们沿垂直轴排序。对于飞机列表[A B C D]，抽签顺序将是[A B C D]或[D C B A]，而不是其他任何东西！所以排序时不会有性能问题。随时随地保持秩序。

2012-10-25 15:01:33 bjorke

问题是我有一些飞机应该穿过其他飞机。就好像他们是3d扁刀。我可以问一下，在问了这么长时间之后，你是如何发现这个问题的，以及4位upvoter是如何来到这里的？ – MaiaVictor

您的问题与人们的行为无法回答:)但是，如果您的多边形相互交叉，除了像K-Buffers或原始的A-Buffer算法这样的片段外，没有简单的正确解决方案，除非特别警察三角形交叉点并在飞行中对它们进行镶嵌。 – bjorke

假设您使用了一些透明的* .png图像。然后，这将有助于：

new THREE.MeshBasicMaterial({ side:THREE.BackSide,map:texture, depthWrite: false, depthTest: false });

2012-12-06 10:21:16

出于某种原因，“side：THREE.BackSide”部分阻止了我的图像全部渲染。但除此之外，其余的工作很好！ –

您可能需要使用THREE.DoubleSide，以便双方都可以看到它。 – Blaise

这实际上工作得很好！ – polyclick

的depthWrite属性设置为false解决了我的问题。

new THREE.MeshBasicMaterial({ 
    opacity: 0.25, 
    transparent: true, 
    side: THREE.DoubleSide, 
    depthWrite: false 
});

2016-01-14 09:11:34 Wilt

谢谢。没有更多的“透明黑盒问题”！ – Andy

回答