three.js overdraw = true 在透明几何体上创建线框工件答案

【问题标题】：three.js overdraw = true creates wireframe artifacts on transparent geometrythree.js overdraw = true 在透明几何体上创建线框工件
【发布时间】：2012-08-02 10:12:09
【问题描述】：

似乎当 overdraw 设置为 true 时，画布渲染器实际上将填充扩展到面的边缘之外，因此它们重叠了一点。这通常很好，但是当材质是透明的时，这些重叠的边缘会产生不受欢迎的线框类型伪影。

请参阅示例中的粉红色箭头：Example

有没有办法计算填充实际扩展了多少？恐怕源代码只是在我头上，但如果有人能指出处理的地方（源代码中的哪一行），那将不胜感激。如果做不到这一点，希望有人知道另一种解决方案或解决方法。

我意识到使用 WebGL 渲染器时问题会消失，但我被要求尽可能在 Canvas 上进行这项工作。

【问题讨论】：

标签： canvas three.js renderer

【解决方案1】：

是的。恐怕使用CanvasRenderer 没有解决方案。

但是，如果您想尝试一些值...这是执行此操作的函数：

https://github.com/mrdoob/three.js/blob/master/src/renderers/CanvasRenderer.js#L1011-1025

你可以试试这个……

idet = ( 1 / Math.sqrt( det ) ) * 0.5;

然后，在您的系统中安装 python 后，转到 /utils 并运行它以生成新的 Three.js：

python build.py --common

完成后将其缩小：

python build.py --common --minified

但我认为您在不同的浏览器中可能会得到不同的结果。

很想知道你是否解决了这个问题。

【讨论】：

感谢您的快速回复。这确实有效 - 有点。随着几何体旋转远离相机，重叠似乎变得更加严重，因此即使像 0.4 或 .5 这样的值起初看起来不错，但随着动画的进行，它又开始重叠。显然，如果该值太低，则该方法用于修复的接缝再次开始出现。几何图形太复杂而无法排序，所以我只是将值保留为 0.5，并决定满意它可以稍微缓解问题，即使它没有修复。再次感谢。
P.S.结果在 Chrome、Firefox 和 Safari 上看起来确实一致
啊，有趣。也许我应该把它放进去。