XTK在叠加网格中闪烁

Question

所以我试图在xtk中使用alpha混合覆盖2个网格，设置不同的颜色和不透明度。

这里可以看到一个例子 http://biostat.jhsph.edu/~jmuschel/XTK_Flicker_Example/

当2个网格在同一个渲染器中渲染但不重叠时，不会发生这种情况。

我似乎无法理解为什么闪烁会发生这种情况。

Answer 1

这是与你搞砸的排序算法。渲染透明对象时，像three.js或xtk这样的图形引擎就像从后到前对场景中的对象进行排序，以便正确地积累透明度（在'Learning WebGL'中详细了解它。）

由于你的场景中有一个大的透明物体位于另一个大的透明物体内，两个物体具有相同的起源，因此分拣机制会混淆并开始在正面和背面之间翻转物体。当首先渲染内部对象时，外部会将其透明度与内部对象混合，但是当外部首先渲染时，内部对象将被忽略，因为它的表面位于外部（深度测试）之后。

要解决此问题，您可以尝试强制首先渲染内部对象。

Answer 2

您可以通过执行

来禁用渲染器重新排序(which is also the solution to this problem in three.js)

r0 = new X.renderer3D();
r0.init();
r0.config.ORDERING_ENABLED = false

这样，将对象添加到场景的顺序将决定它们的渲染顺序。它解决了闪烁问题。