three.js - 使用 Three.js 渲染多边形头发时的混合伪影

尝试渲染具有透明度的多边形头发，我得到了这个神器:

到目前为止我检查过的内容:

renderer.sortObjects 是真的。

头发的 material.side 是 THREE.DoubleSide。

设置 material.alphaTest=0.5 - 减少了问题，但仍然可以看到一些工件。

我该如何调试？

最佳答案

解决问题的是两次渲染头发，首先是背面，然后是正面:

    var hairMesh1 = obj;
    var hairMaterial1 = hairMesh1.material;
    hairMaterial1.opacity = 1.0;
    hairMaterial1.transparent = true;
    hairMaterial1.side = THREE.BackSide;
    hairMaterial1.depthWrite = false;

    var hairMesh2 = hairMesh1.clone();
    var hairMaterial2 = hairMesh2.material = hairMesh2.material.clone();
    hairMaterial2.side = THREE.FrontSide;

    var hairObj2 = new THREE.Object3D();
    hairObj2.add(hairMesh2)
    hairObj2.renderOrder = 1;

    model.add(hairObj1);
    model.add(hairObj2);

这在 this answer 中有解释。

我尝试的另一件事就像 here - 我设置

material.alphaTest = 0.5; // between 0 and 1

这减少了问题(仍然可以看到明显的工件)。可以在 here 找到解释。

关于three.js - 使用 Three.js 渲染多边形头发时的混合伪影，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35844526/