覆盖网格中的XTK闪烁

Question

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

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

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

我似乎不明白为什么闪烁会发生这种情况。

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

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