three.js透明地图问题

Question

我正在创建大量的粒子(确切地说是80.000)并且我已经设置了透明贴图,但并非所有粒子都是透明的.

我正在使用透明的PNG图像: (它几乎不可见,但它没关系)作为材质图,虽然它显示了如下所示的黑色背景:

如果你仔细观察,一些颗粒很好地混合在一起(没有重叠的黑色边缘),尽管有些颗粒没有.可能是因为有太多重叠的透明物体或不应该是一个问题？

这是负责生成粒子的片段:

// 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

为什么有些粒子有黑色背景？

Answer 1

您可以设置alphaTest材质的属性而不是透明度.例如,

material.alphaTest = 0.5;
material.transparent = false;

three.js不再排序粒子; 它们按照它们在缓冲区中出现的顺序呈现.

three.js r.85

Answer 2

那些带有黑角的粒子在它们后面的任何东西之前呈现.所以GL还不知道还有什么可以融合.为了使其看起来正确,您必须从后到前以z坐标的顺序渲染这些粒子.