Three.js Particles of various sizes

Question

I'm new to three.js and am trying to figure out the best way to add a 1000 particles each being a different size and color. The texture for each particle is created by drawing a canvas. By using a ParticleSystem all the particles are the same color and size. Creating a ParticleSystem for each particle is very inefficient. Is there an efficient way to handle this?

Answer 1

The best way to go about this, in my experience, is to create a customized shader material; you can then include attributes, which are properties that vary from particle to particle. Your shader code would look something like this:

Vertex shader:

attribute vec3 customColor;
attribute float customSize;
varying vec3 vColor;
void main() 
{
    vColor = customColor; // set color associated to vertex; use later in fragment shader
    vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
    gl_PointSize = customSize * ( 300.0 / length( mvPosition.xyz ) );
    gl_Position = projectionMatrix * mvPosition;
}

Fragment shader:

uniform sampler2D texture;
varying vec3 vColor; // colors associated to vertices; assigned by vertex shader
void main() 
{
    // calculates a color for the particle
    gl_FragColor = vec4( vColor, 1.0 );
    // sets particle texture to desired color
    gl_FragColor = gl_FragColor * texture2D( texture, gl_PointCoord );
}

For a similar live example, check out:

http://stemkoski.github.io/Three.js/ParticleSystem-Attributes.html