10

大量のパーティクル（正確には80.000）を作成していて、透明なマップを設定しましたが、すべてのパーティクルが透明であるとは限りません。

透明なPNG画像を使用しています:(粒子.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

一部のパーティクルの背景が黒いのはなぜですか？

4

4 に答える 4

20

alphaTest透明度の代わりにマテリアルのプロパティを設定できます。例えば、

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

three.jsはパーティクルをソートしなくなりました。それらは、バッファに表示される順序でレンダリングされます。

three.js r.85

于 2012-08-06T12:35:30.087 に答える
12

角が黒いパーティクルは、背後にあるものの前にレンダリングされます。したがって、GLは、ブレンドの背後に何かがあることをまだ知りません。正しく見えるようにするには、これらのパーティクルをz座標の順序で後ろから前にレンダリングする必要があります。

于 2012-08-06T12:18:50.113 に答える
1

depthWriteマテリアルの属性を無効にします。

// create a new material
material = new THREE.ParticleBasicMaterial({
    color: colors[i],
    size: 20,
    map: map,
    transparent: true,
    depthWrite: false,
});
于 2019-02-28T07:13:00.057 に答える
0

webgl_particles_billboards.htmlを試してください。私が正しければ、それはあなたが期待するのと同じことをします。

于 2012-08-06T17:17:46.540 に答える