有Z战斗问题

Question

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

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

Answer 1

看到我的评论证明有用，我只是在这里重新引用，以便将此答案标记为已接受。

  

为了进行疯狂的猜测，锐利的边缘与抗锯齿相关，而3D则相对较新。尝试更改任何透视值。

Answer 2

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

Answer 3

z-fighting（in 2020）

BABYLON.js自2015年以来不断发展，因此，以下是我对如何对抗Z战的建议：

1. $levels = [50, 100, 150, 200]; $points = 0; $rewards = []; foreach ($levels as $key => $level) { if($points >= $level) { $rewards[] = 'reward' . $key; } // 20, 40, 60, 80 $points += 20; } return $rewards; 适用于您场景中的所有物料。请参见此how to。

2. 调整material.useLogarithmicDepth = true;（负值强制向相机方向移动深度）。请参见此playground。

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