My current threejs example features particles being rendered onto a spherical object using the canvas with the program function. Here's a snippet of the code:
var material = new THREE.ParticleCanvasMaterial( {
color: 0xffffff,
program: function ( context ) {
context.beginPath();
context.arc( 0, 0, 1, 0, PI2, true );
context.closePath();
context.fill();
}
} );
for ( var i = 0; i < 1000; i ++ ) {
particle = new THREE.Particle( material );
particle.position.x = Math.random() * 2 - 1;
particle.position.y = Math.random() * 2 - 1;
particle.position.z = Math.random() * 2 - 1;
particle.position.normalize();
particle.position.multiplyScalar( Math.random() * 10 + 600 );
initParticle( particle, i * 10 );
scene.add( particle );
}
Now, I'm looking to enhance performance by switching to the webGL renderer, but it lacks the program option. It appears that utilizing the map method might be the solution, but I'm uncertain how to proceed. Does anyone have suggestions on modifying this code to achieve the same outcome with the webGL renderer?