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);

WestLangley · Accepted Answer · 2012-12-13 15:59:02Z

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, 2012 at 15:59

WestLangley

105k11 gold badges288 silver badges285 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

bitinn Over a year ago

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 Over a year ago

So basically I need some ways to normalize ParticleCanvasMaterial and ParticleBasicMaterial, and choose material type according to renderer, right?

WestLangley Over a year ago

Yes, that is what you will have to do. Give it a go, and if you have further problems, please post a new issue.

bjorke · Accepted Answer · 2012-12-13 16:10:20Z

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, 2012 at 16:10

bjorke

3,3131 gold badge19 silver badges20 bronze badges

1 Comment

bitinn Over a year ago

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)

Collectives™ on Stack Overflow

Procedurally generated texture for Particle with three.js

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related