Procedurally generated texture for Particle with three.js

Question

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:

Renderer independent (ParticleCanvasMaterial won't work with WebGL)
Circular texture (ParticleBasicMaterial does not like canvas texture; unable to make it output a circle shape)
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);

score 5 · Accepted Answer · answered Dec 13 '12 at 15:59

5

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/

answered Dec 13 '12 at 15:59

WestLangley

102,557
10
276
276

Thanks, your example looks surprisingly like mine, I must be missing some attributes on the second issue. (oh, before I accept this answer, can I confim this solution will NOT work with CanvasRenderer? Because that's my initial question: **is it possible to do this and still allow fallback to CanvasRenderer, thus 'Renderer independent'**) – bitinn Dec 13 '12 at 17:58
So basically I need some ways to normalize ParticleCanvasMaterial and ParticleBasicMaterial, and choose material type according to renderer, right? – bitinn Dec 13 '12 at 18:05
Yes, that is what you will have to do. Give it a go, and if you have further problems, please post a new issue. – WestLangley Dec 13 '12 at 18:12

score 0 · Answer 2 · answered Dec 13 '12 at 16:10

0

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

answered Dec 13 '12 at 16:10

bjorke

3,295
1
16
20

because my ultimate goal is to create a procedually generated planetary system, so texture (terrain) is very much different from each other. (did not go for sphere geometry due to performance in canvas renderer) – bitinn Dec 13 '12 at 17:53

Procedurally generated texture for Particle with three.js

2 Answers2

Linked