javascript - Three.js ParticleSystem透明度问题

Question

我正在使用 Three.js 并且我有一个 ParticleSystem，其中每个粒子可能具有不同的透明度和颜色。

代码:

var shaderMaterial = new THREE.ShaderMaterial({
    uniforms: customUniforms,
    attributes: customAttributes,
    vertexShader: document.getElementById('vertexshader').textContent,
    fragmentShader: document.getElementById('fragmentshader').textContent,
    transparent: true,
    alphaTest: 0.5
});


particles = new THREE.ParticleSystem(geometry, shaderMaterial);
particles.dynamic = true;

顶点着色器:

attribute float size;
attribute vec3 color;

varying vec3 vColor;

void main() {

    vColor = color;

    vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );

    //gl_PointSize = size;
    gl_PointSize = size * ( 300.0 / length( mvPosition.xyz ) );

    gl_Position = projectionMatrix * mvPosition;

}

片段着色器:

uniform sampler2D texture;
uniform float alpha;
varying vec3 vColor;

void main() {
    gl_FragColor = vec4(vColor, 100);
    vec4 textureColor =  texture2D( texture, gl_PointCoord );
    gl_FragColor = gl_FragColor *  textureColor;
    gl_FragColor.a = alpha;
}

纹理是一个圆圈，但是当我设置 alpha 时，如下所示:gl_FragColor.a = alpha，我的纹理变成了一个黑色方 block 中的圆圈，alpha 级别还可以，但我不需要正方形，只有圆圈，如果我不设置 alpha，则不会出现正方形。 那么如何为提供的纹理正确设置 alpha？

Answer 1

看看这个:three.js - Adjusting opacity of individual particles

您可以在使用 ShaderMaterial for ParticleSystem 的页面某处找到 jsfiddle，变量 alpha:http://jsfiddle.net/yfSwK/27/

另外，至少改变一下片段着色器，gl_FragColor 应该是只写变量，通常不把它作为读变量:

vec4 col = vec4(vColor, 100);
vec4 tex = texture2D( texture, gl_PointCoord );
gl_FragColor = vec4( (col*tex).rgb, alpha );

...或在一行中:

gl_FragColor = vec4( (vec4(vColor, 100) *  texture2D( texture, gl_PointCoord )).rgb, alpha);