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

Question

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

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

首先：

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

其中rectCount是绘制的矩形的总数（因此每个下面都有较小的polygonOffsetFactor，因此在前面的那些上面绘制了＃39;）

第二

transparent: true,
depthWrite: false

renderOrder = rectCount。

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

transparent: true
opacity: 1

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

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

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

问题：我可以安全使用

transparent: true,
opacity: 1

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

Answer 1

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