Blending artifacts when rendering polygon hair with Three.js

Question

Trying to render polygon hair with transparency I get this artifact:

Polygon hair artifacts

What I've checked so far:

renderer.sortObjects is true.
The hair's material.side is THREE.DoubleSide.
Set material.alphaTest=0.5 - reduced the problem but some artifacts are still visible.

How do I debug this?

Possible duplicate of [Three.js self transparency with intersecting polygons](http://stackoverflow.com/questions/31735792/three-js-self-transparency-with-intersecting-polygons) — Peter O., Mar 07 '16 at 20:28
See also [What does Material.alphaTest mean?](http://stackoverflow.com/questions/19305917/what-does-material-alphatest-mean) — Michael Litvin, Mar 08 '16 at 09:52
@PeterO. it's not a duplicate of that question as I noticed that using this approach still generated noticeable artifacts. I found another solution though (edited the question and answer accordingly). — Michael Litvin, Mar 08 '16 at 15:29
See also [Transparent objects in Threejs](http://stackoverflow.com/questions/15994944/transparent-objects-in-threejs/15995475#15995475) — Michael Litvin, Mar 09 '16 at 07:36

score 3 · Accepted Answer · edited May 23 '17 at 12:18

What solved the problem was rendering the hair twice, first the back side and then the front side:

    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 is explained in this answer.

Another thing I tried was like here - I set

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

which reduced problem (still noticeable artifacts seen). An explanation can be found here.

Blending artifacts when rendering polygon hair with Three.js

1 Answers1