CODEWITHSUNDEEP
javascriptthree.jsprocedural-generation
bitinn
bitinn

Reputation: 9338

Procedurally generated texture for Particle with three.js

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

Upvotes: 0

Views: 2672

Answers (2)

bjorke
bjorke

Reputation: 3305

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

Upvotes: 0

WestLangley
WestLangley

Reputation: 104783

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/

Upvotes: 5

Related Questions