Three.js Transparent Maps Issue

I'm creating loads of particles (80.000 to be exact) and I have set a transparent map, though, not all particles are transparent. I'm using a transparent PNG image: (it's barely v

Solution 1:

You can set the alphaTest property of the material instead of transparency. For example,

material.alphaTest = 0.5;material.transparent = false;

three.js no longer sorts particles; they are rendered in the order they appear in the buffer.

three.js r.85

Solution 2:

Those particles with black corners are rendered before anything behind them. So GL doesn't know yet there is something behind to blend. In order to make it look right you have to render these particles in the order of their z coordinates from back to front.

Solution 3:

Disable the depthWrite attribute on the material.

// create a new material
material = new THREE.ParticleBasicMaterial({
    color: colors[i],
    size: 20,
    map: map,
    transparent: true,
    depthWrite: false,
});

Solution 4:

Try webgl_particles_billboards.html. If I'm right it does the same thing you expect.