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屋！