javascript - 有 Z-Fighting 问题

Question

我正在使用 Babylon.js 制作 3D 游戏。我的项目旨在在所有浏览器上运行。但是，当用户在 Firefox 中运行它时，似乎存在一些 Z-Fighting 问题，即某些 3d 对象无法正确渲染或根本无法渲染！我还注意到一些纹理会有条纹接缝像这样对角线......

我在网上做了一些研究，发现了.css的z-index属性。我玩过这个设置，但它并没有解决我的问题。我愿意接受任何建议来帮助我解决这个问题？提前谢谢了！

Answer 1

鉴于我的评论被证明是有用的，我将在这里重新引用它以允许将此答案标记为已接受。

大胆猜测一下，锐利的边缘与抗锯齿有关，而 3D 相对较新。尝试更改任何透视值。

Answer 2

这也可能是2 天前与此处相关的 Firefox 错误。设置 时antialias:false，firefox 还需要stencil:true启用 24 位深度缓冲区。

Answer 3

z格斗（2020年）

BABYLON.js 自 2015 年以来一直在发展，所以这里是我关于如何对抗 z 战的建议：

1. material.useLogarithmicDepth = true; 适用于场景中的所有材料。看这个怎么做。

2. 调整material.zOffset（负值强制向相机移动深度）。看到这个游乐场。

请注意，z-index问题中所问的css通常对 3D 场景没有影响。<canvas>它生活在元素内部的自己的世界中。3D 对象不是 DOM 元素，每个引擎（BABYLON、THREE 等）都以自己的方式表示它们。