Three.js / WebGL - 隐藏其他平面的透明平面 [英] Three.js / WebGL - transparent planes hiding other planes behind them

问题描述

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

When you have two planes in Three.js / WebGL and one or both of them are transparent, sometimes the plane behind will be hidden by the transparent plane above. Why is this?

推荐答案

这不是一个错误，它只是OpenGL（以及WebGL）的工作原理。透明曲面与z缓冲区不兼容，因此必须手动排序并从前到后渲染。三个JS正试图为你做这个（这就是为什么当你设置X值> 0时问题就消失了）但是不能很好地处理像你正在展示的交叉几何的情况。

This is not a bug, it's just how OpenGL (and, hence, WebGL) works. Transparent surfaces don't play well with the z-buffer, and as such must be manually sorted and rendered back-to-front. Three JS is attempting to do this for you (which is why the problem goes away when you set the X value > 0) but cannot robustly handle the case of intersecting geometry like you're showing.

我已经在不同的SO问题中更深入地解释了这个问题，所以你可能想引用它。

I've explained the issue more in-depth in a different SO question, so you may want to reference that.

这篇关于Three.js / WebGL - 隐藏其他平面的透明平面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！