Rendering a large number of colored particles using three.js and the canvas renderer

Question

I am trying to use the Three.js library to display a large number of colored points on the screen (about half a million to million for example). I am trying to use the Canv

Answer 1

EDIT: ParticleSystem and PointCloud has been renamed to Points. In addition, ParticleBasicMaterial and PointCloudMaterial has been renamed to PointsMaterial.

To have a different color for each particle, you need to have a color array as a property of the geometry, and then set vertexColors to THREE.VertexColors in the material, like so:

// vertex colors
var colors = [];
for( var i = 0; i < geometry.vertices.length; i++ ) {

    // random color
    colors[i] = new THREE.Color();
    colors[i].setHSL( Math.random(), 1.0, 0.5 );

}
geometry.colors = colors;

// material
material = new THREE.PointsMaterial( {
    size: 10,
    transparent: true,
    opacity: 0.7,
    vertexColors: THREE.VertexColors
} );

// point cloud
pointCloud = new THREE.Points( geometry, material );

Here is an updated Fiddle: http://jsfiddle.net/J7zp4/200/

Your other questions are a little too general for me to answer, and besides, it depends on exactly what you are trying to do and what your requirements are. Yes, you can expect Canvas to be slower.

EDIT: Updated for three.js r.73