CODEWITHSUNDEEP
javascriptthree.js
Tim S.
Tim S.

Reputation: 13843

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: particle.png (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?

Upvotes: 9

Views: 8177

Answers (4)

hughes
hughes

Reputation: 5713

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

Upvotes: 1

WestLangley
WestLangley

Reputation: 104783

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

Upvotes: 19

Fract
Fract

Reputation: 369

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

Upvotes: 0

Roest
Roest

Reputation: 818

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.

Upvotes: 11

Related Questions