如何修复 Three.js 中无缝对象之间的间隙？

Question

我试图在 Three.JS 中实现彼此相邻的无缝对象，目前它在大多数设备/浏览器上运行良好，但在某些情况下我遇到了困难。例如，当将 MacOS 与最新版本的 Google Chrome（以及 Safari）一起使用时，对象渲染时会出现不应存在的像素化间隙。

所有 3D 对象、GLTF 模型（左）和 BoxGeometry（右）都会出现错误：

使用相同的 Mac 设备但使用 Firefox 时，一切都会按预期呈现：

尺寸恰好为 (1, 1, 1)，并且应该彼此完全贴合。我还尝试将其放大到（1.05, 1.05, 1.05），但这并没有解决问题，事实上，当启用纹理时在 Z-fighting 中应用缩放结果时，情况只会变得更糟。

我目前正在使用 Three.JS 的 R137，并确保我的应用程序正确应用 window.devicePixelRatio，因此这也不应该成为问题 - 是否有任何我忘记的其他渲染器设置可以提供帮助解决这个渲染问题吗？

Android 和 Windows 设备的行为也可以正常工作。使用的 Android 设备的 devicePixelRatio 大于 2，一切看起来都很顺利。我怀疑这是我的 Mac GPU 的问题，因为它可以在 Firefox 中正确渲染；这可能是浏览器的错误，我们可以自己做些什么吗？

希望这不是重复的，我找不到任何解决方案/答案。

编辑：

我发现 EffectComposer（用于 FXAA）导致 Mac 设备上的 Google Chrome / Safari 出现这些问题。这很奇怪，因为它在所有其他设备上都可以正常工作。我目前仍在寻找解决此问题的方法。如果有人过去在使用 EffectComposer for Mac 时遇到问题并设法解决这些问题，请与我们分享您的解决方案。当用例如 Sepia 着色器替换 FXAA 着色器时，会出现相同的错误，传递哪些着色器似乎并不重要，从 EffectComposer 传递的任何内容都会导致此问题。

我做了一个小提琴： https://jsfiddle.net/ilanbentley/g3yxdvmh/3/ 请注意右侧 (EffectComposer) 的边缘有问题，而左侧 (渲染器) 看起来不错（对于 Mac）。

不知何故，下面的代码导致了这种错误行为：

    const renderPass = new RenderPass( scene, camera );
    fxaaPass = new ShaderPass( FXAAShader );
    composer2 = new EffectComposer( renderer );
    composer2.addPass( renderPass );
    composer2.addPass( fxaaPass );