Three.js/WebGL - 隐藏其他平面的透明平面

Question

如果在Three.js/WebGL中有两个平面,并且其中一个或两个都是透明的,有时后面的平面将被上面的透明平面隐藏.为什么是这样？

Answer 1

假设你正在使用一些透明的*.png图像.那么这会有所帮助:

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

Answer 2

尝试添加alphaTest: 0.5材料.

注意:`alphaTest`是一个阈值,可以使纹理中的半透明区域完全不透明(当像素不透明度>阈值时)或完全透明(当像素不透明度<阈值时).这可能导致边缘丑陋. (3认同)

Answer 3

设置depthWrite属性以false解决我的问题.

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

Answer 4

这不是一个错误,它只是OpenGL(以及WebGL)的工作原理.透明曲面与z缓冲区不兼容,因此必须手动排序并从前到后渲染.三个JS正试图为你做这个(这就是当你设置X值> 0时问题消失的原因)但是不能像你所显示的那样稳健地处理交叉几何的情况.

我已经在一个不同的SO问题中更深入地解释了这个问题,所以你可能想要参考它.

Answer 5

fwiw,如果你有很多平行的平面(无法看到你的样本,谷歌无法解析你的域),很容易保持它们沿垂直轴排序.对于平面列表[ABCD],绘制顺序将是[ABCD]或[DCBA]而不是其他任何东西!因此,排序不会对性能造成影响.当你走的时候,请保持秩序.