three.js:什么是分层和解决 z-fighting 更有效:使用 polygonOffsetFactor 或禁用 depthWrite 的透明度？

Question

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

我找到了两个适合我的解决方案。

首先:

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

其中 rectCount 是绘制的矩形总数(因此每个下一个都有较小的 polygonOffsetFactor，因此绘制在前一个矩形的“顶部”)。

第二个:

transparent: true,
depthWrite: false

使用 renderOrder = rectCount。

我知道不透明和透明的物体是按照三个分别排序的，所以如果我使用第二种方法，我也必须设置

transparent: true
opacity: 1

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

第二个解决方案感觉更干净，TBH，更有效(而玩 polygonOffsetFactor 偶尔仍然有 z-fighting)，但我担心为场景中的许多对象启用透明度(即使不透明度设置为 1)会对渲染效率有不利影响。假设我希望它足够轻便，也可以在移动设备上运行。

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

问题:我可以安全使用吗

transparent: true,
opacity: 1

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

Answer 1

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