The problem with transparent cards three.js

Question

I create a mass of particles (more precisely, 80,000), and I set up a transparent map, although not all particles are transparent.

I am using a transparent PNG image: (it’s barely noticeable, but it’s okay there) as a material map, although it shows a black background, as shown here:

If you look closely, some particles blend well (without blocking the black edges), although some do not. Maybe because there are so many overlapping transparent objects, or should this not be a problem?

Here is the snippet responsible for generating my particles:

// load the texture var map = THREE.ImageUtils.loadTexture('img/particle.png'); // create temp variables var geometry, material; // create an array with ParticleSystems (I need multiple systems because I have different colours, thus different materials) var systems = []; // Loop through every colour for(var i = 0; i < colors.length; i++) { // Create a new geometry geometry = new THREE.Geometry(); // create a new material material = new THREE.ParticleBasicMaterial({ color: colors[i], size: 20, map: map, // set the map here transparent: true // transparency is enabled!!! }); // create a new particle system systems[i] = new THREE.ParticleSystem(geometry, material); // add the system to the scene scene.add(systems[i]); } // vertices are added to the ParticleSystems' geometry here 

Why do some particles have a black background?

Answer 1

Those particles with black angles face something behind them. So GL does not know that there is anything behind. For it to look right, you must display these particles in the order of their z coordinates back to back.

Answer 2

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 displayed in the order in which they are displayed in the buffer.

three.js r.85

Answer 3

Try webgl_particles_billboards.html. If I'm right, he does the same as you.