Procedurally generated texture for Particle with t

问题:

My goal is to create a particle system that involve procedurally generated texture for each particle (vertices), but I find it difficult to create a prototype of such particle system that works under both Canvas and WebGL renderer with three.js

Criteria I am trying to achieve:

1. Renderer independent (ParticleCanvasMaterial won't work with WebGL)
2. Circular texture (ParticleBasicMaterial does not like canvas texture; unable to make it output a circle shape)
3. Procedurally generate those texture (cannot just use loadTexture with prepared circle texture)

Is this currently possible with three.js? Am I missing some features?

//create a texture generation function
function simpleTexture() {

    // generate canvas
    var canvas = document.createElement('canvas');
    canvas.width = 100;
    canvas.height = 100;

    // get context
    var context = canvas.getContext('2d');

    // circle texture
    context.beginPath();
    context.arc(50, 50, 50, 0, Math.PI*2, true); 
    context.closePath();
    context.fillStyle = "red";
    context.fill();

    // get texture
    texture = new THREE.Texture(
        canvas
    );

    texture.needsUpdate = true;
    return texture;

}

    //then use it like following...

    var material = new THREE.ParticleBasicMaterial({
        color: 0xffffff,
        size: 1,
        map: simpleTexture,
        blending: THREE.AdditiveBlending,
        transparent: true
    });

    var system = new THREE.ParticleSystem(particles, material);

回答1:

There is nothing you can do about question 1. Use ParticleCanvasMaterial for CanvasRenderer.

Regarding 2 and 3, you can have a procedurally-generated texture with ParticleBasicMaterial and WebGLRenderer. Here is one with a circular texture and random vertex colors: http://jsfiddle.net/7yDGy/1/

回答2:

Why not load an image? You can always tweak its attribues on the fly, rahter than shoving whole new blocks of pixels around.