I'm currently working on generating a large number of particles (exactly 80,000) and I have applied a transparent map to them. However, not all the particles appear to be completely transparent.
The material map I am using is a transparent PNG image (although it may be difficult to see, it is indeed present), but some particles are showing a black background as illustrated here:
Upon closer inspection, I noticed that some particles blend seamlessly without any overlapping black edges, while others do show this issue. Could this be due to the high volume of overlapping transparent objects, or should this not be a concern?
Here is the code snippet responsible for creating the particles:
// load the texture
var map = THREE.ImageUtils.loadTexture('img/particle.png');
// create temporary variables
var geometry, material;
// create an array to hold ParticleSystems (I require multiple systems for different colors and materials)
var systems = [];
// Iterate through each color
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 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
What could be causing some particles to display a black background?