three.js transparent maps issue

Question

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

Answer 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

Answer 2

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,
});

Answer 3

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

Answer 4

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.