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:

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?

回答1:

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.

回答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 rendered in the order they appear in the buffer.

three.js r.85

回答3:

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

回答4:

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

来源：https://stackoverflow.com/questions/11827968/three-js-transparent-maps-issue

标签

javascript

WebGL

three.js