three.js透明地图问题 [英] three.js transparent maps issue

问题描述

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

I'm creating loads of particles (80.000 to be exact) and I have set a transparent map, though, not all particles are transparent.

我是使用透明的PNG图像：（它几乎不可见，但它没关系）作为材质图，尽管它显示如下所示的黑色背景：

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

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

推荐答案

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

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.

这篇关于three.js透明地图问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！