三.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.

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