three.js：分层和解决z-fighting的效率更高：使用polygonOffsetFactor或透明度并禁用了depthWrite？

Posted 2021-05-02

我正在使用THREE.js制作图表软件。一些绘制的矩形位于同一平面上，因此存在z-fighting，尤其是但不限于我移动相机时。

我找到了两个对我有用的解决方案。

第一：

polygonOffset: true,
polygonOffsetUnits: 1,
polygonOffsetFactor: -rectCount

其中rectCount是绘制的矩形的总数（因此每个下面都有较小的polygonOffsetFactor，因此被绘制在前面的'top'之上）。

第二：

transparent: true,
depthWrite: false

与renderOrder = rectCount。

我知道不透明和透明的对象是由THREE分别排序的，所以如果我使用第二种方法，我也必须设置

transparent: true
opacity: 1

到我想要在上述矩形之上绘制的所有其他对象。

第二种解决方案感觉更干净，TBH更有效（而使用polygonOffsetFactor偶尔也会进行z-fighting），但我担心对场景中的许多物体启用透明度（即使不透明度设置为1）也会产生不良影响在渲染效率上。让我们说我希望它足够轻巧，也可以在移动设备上运行。

我不知道三个内部，但我希望在考虑透明度魔法之前首先检查不透明度。

问题：我可以放心使用

transparent: true,
opacity: 1

在许多对象上，它不会严重影响渲染/ CPU / GPU周期？或者使用polygonOffsetFactor被认为对这种用例更有效？谢谢！

答案

深度写入false对于所有距离都更可靠。如果由于其他原因最终需要更多深度排序精度，请查看在渲染器构造函数中设置logarithmicDepthBuffer：true。