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

Question

尝试用透明度渲染多边形头发我得到了这个神器：

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

1. renderer.sortObjects 是真的。
2. 头发的material.side 是THREE.DoubleSide。
3. 设置material.alphaTest=0.5 - 减少了问题，但仍然可以看到一些伪影。

如何调试？

Answer 1

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

    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找到解释。