creating a spherical particle basic material for webgl renderer in threejs

Question

I have a working threejs example in which particles are rendered via canvas on to a spherical object using the program function, like this:

var material = new THREE.ParticleCanvasMaterial( {

      color: 0xffffff,
      program: function ( context ) {

        context.beginPath();
        context.arc( 0, 0, 1, 0, PI2, true );
        context.closePath();
        context.fill();

      }

    } );

    for ( var i = 0; i < 1000; i ++ ) {

      particle = new THREE.Particle( material );
      particle.position.x = Math.random() * 2 - 1;
      particle.position.y = Math.random() * 2 - 1;
      particle.position.z = Math.random() * 2 - 1;
      particle.position.normalize();
      particle.position.multiplyScalar( Math.random() * 10 + 600 );

      initParticle( particle, i * 10 );

      scene.add( particle );

    }

However, I'd like to switch to the webGL renderer in order for things to run a little faster, but it doesn't have a program option. It seems like maybe I need to use map, but I'm not sure how. Anybody have any ideas on how to adjust this code to accomplish the same thing with the webGL renderer.

Related: stackoverflow.com/questions/13860166/…

WestLangley
– WestLangley

2013-07-12 18:47:29 +00:00
Commented Jul 12, 2013 at 18:47 — WestLangley
– WestLangley, Commented Jul 12, 2013 at 18:47

Vico · Accepted Answer · 2021-01-27 08:07:43Z

1

Here's an example that shows how to procedurally create textures for your particles using the WebGLRenderer: http://jsfiddle.net/y18ag3dq/

However, if you wish to use your own texture, simply load whatever texture you want into the map field:

var texture = THREE.ImageUtils.loadTexture('/images/my_texture.png');
// Do NOT set this flag. Explanation provided by WestLangley in the comments
// texture.needsUpdate=true;

var material = new THREE.ParticleBasicMaterial({
  // ...
  map: texture,
  // add all relevant fields as described in the link above
});

// geometry should contain your particle vertices
var particle = new THREE.ParticleSystem(geometry, material);
scene.add(particle);

edited Jan 27, 2021 at 8:07

Vico

1182 silver badges14 bronze badges

answered Jul 12, 2013 at 17:34

elyas-bhy

8021 gold badge17 silver badges24 bronze badges

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

2 Comments

WestLangley Over a year ago

Do not set the needsUpdate flag with ImageUtils.loadTexture(). It sets it for you after the texture loads. Setting it before the texture finishes loading can lead to rendering errors.

elyas-bhy Over a year ago

I missed that one, my bad. Edited my answer.

Collectives™ on Stack Overflow

creating a spherical particle basic material for webgl renderer in threejs

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related