Three.js ParticleSystem transparency issue

Question

I'm using Three.js and I have a ParticleSystem where every particle may have a different transparency and color.

Code:

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;

Vertex shader:

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;

}

Fragment shader:

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;
}

Texture is a circle but when I set alpha, like this: gl_FragColor.a = alpha, my texture become a circle in a black square, alpha level is okay, but I don't need the square, only the circle if I don't set the alpha, square doesn't appear. So how to set alpha correctly for provided texture?

Answer 1

Take a look at this: three.js - Adjusting opacity of individual particles

You can find jsfiddle somewhere in the page that uses ShaderMaterial for ParticleSystem with variable alpha: http://jsfiddle.net/yfSwK/27/

Also, at least change fragment shader a bit, gl_FragColor should be write-only variable, it's not usual to have it as a read-from variable:

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

...or in one line:

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