I am working towards creating a particle system that involves procedurally generated textures for each particle's vertices. However, I am facing challenges in developing a prototype that can function seamlessly under both the Canvas and WebGL renderer in three.js.
Here are the specific criteria I am aiming to fulfill:
- Renderer independent: I need a solution that works with both ParticleCanvasMaterial and WebGL renderers.
- Circular texture: I want to output a circular shape for each particle, which is proving difficult with ParticleBasicMaterial.
- Procedurally generated textures: I am looking to generate textures dynamically rather than using pre-made images.
Is it currently feasible to achieve all of this with three.js? Are there any features that I might be overlooking?
//create a texture generation function
function generateTexture() {
// create a canvas
var canvas = document.createElement('canvas');
canvas.width = 100;
canvas.height = 100;
// get the drawing context
var context = canvas.getContext('2d');
// draw a circular texture
context.beginPath();
context.arc(50, 50, 50, 0, Math.PI*2, true);
context.closePath();
context.fillStyle = "red";
context.fill();
// create a texture from the canvas
var texture = new THREE.Texture(canvas);
texture.needsUpdate = true;
return texture;
}
// using the texture generation function...
var material = new THREE.ParticleBasicMaterial({
color: 0xffffff,
size: 1,
map: generateTexture,
blending: THREE.AdditiveBlending,
transparent: true
});
var system = new THREE.ParticleSystem(particles, material);