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

Posted 2023-02-27

【中文标题】使用 Three.js 渲染多边形头发时混合伪影

【英文标题】：Blending artifacts when rendering polygon hair with Three.js

【发布时间】：2016-06-21 01:11:30

【问题描述】：

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

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

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

如何调试？

【问题讨论】：

Three.js self transparency with intersecting polygons的可能重复

另见What does Material.alphaTest mean?

@PeterO。这不是那个问题的重复，因为我注意到使用这种方法仍然会产生明显的伪影。我找到了另一个解决方案（相应地编辑了问题和答案）。

另见Transparent objects in Threejs

【参考方案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找到解释。