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 visible but it’s there alright) as the material map, though it shows a black background as seen here:

particles

If you look closely, some particles blend together well (no overlapping black edges) though some do not. Could it be because there are so many overlapping transparent objects or shouldn’t this be an issue?

Here’s the snippet responsible for the generation of 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 of the particles have a black background?

Answer

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.

Advertisement

Answer