Object and Material for a particle system in Three.js?

Question

I've been working with particle systems in Three.js for a couple weeks now. I started out using an Object3D and adding my own Vector3s and MeshBasicMaterials (and other materials like Phong and Lambert) then someone turned me on to the built-in ParticleSystem object and the BasicParticleMaterial because it could be tagged for sorting and may have other advantages. However, now through some further research I'm finding these may be deprecated (ParticleSystem, BasicParticleMaterial) and perhaps it is now PointCloud and PointCloudMaterial. Along the way I discovered that BasicParticleMaterial could support only one texture for all the particles, and I need to used multiple textures so my questions are:

What are the current Object and Material for a particle system in Three.js?
Does it support multiple textures (a variety of images for the particles)?
If the current particle system doesn't support multiple textures, I'm considering going back to an Object3D with custom materials and geometry. Is there a more suitable choice I might be missing?

UPDATE

My specific task is to make several hundred abstract figures each composed of multiple particle clouds (10+) and each of those particle clouds composed of 400+ particles. The particles are different hand drawn sketch marks so that when many varied marks are present in each cloud the whole figure appears hand drawn. All the marks lightly pulse from the center as if blown by a light wind.

I am looking for the most efficient material and object for this task that can also handle multiple textures so the particles can be different hatch marks. For example, below is a single particle cloud (each abstract figure would be composed of a variety of differently shaped clouds like this), however this cloud is composed of only a single kind of hatch mark and I would like to mix a variety of marks as particles.

elliptical particle cloud composed of sketch marks

What is it really you want to do? Sprites work fine for my needs, though I have only about 220 of them at the moment (might eventually grow to about 5 times that) ... they do support unique materials. — Leeft
@Leeft - I added an update with more context. Let me know if that clarifies or if you need more info. Thanks! — gromiczek
Sounds like Sprites are the way to go (and afaik, Particles are actually Sprites in three.js in the latest version(s), but they may or may not not offer the same programmatic control over materials). — Leeft

Leeft Leeft · Accepted Answer · 2014-07-28T15:00:14

Your code should do something like this (you're probably not using canvases, so you'll have to use the textureloader instead and use the callbacks to only add sprites when they're loaded .. also set texture.needsUpdate = true; if all you see is a black sprite).

var texture1 = new THREE.Texture( canvas1 );
var texture2 = new THREE.Texture( canvas2 );
var texture3 = new THREE.Texture( canvas3 );

var material1 = new THREE.SpriteMaterial({ map: texture1 });
var material2 = new THREE.SpriteMaterial({ map: texture2 });
var material3 = new THREE.SpriteMaterial({ map: texture3 });

var sprite1, sprite2, sprite3;

var particleCloud1 = new THREE.Object3D();
for ( var i = 0; i < 100; i += 1 ) {

   sprite1 = new THREE.Sprite( material1 );
   // set position etc
   particleCloud.add( sprite1 );

   sprite2 = new THREE.Sprite( material2 );
   // set position etc
   particleCloud.add( sprite2 );

   // and on ...
}
scene.add( particleCloud1 );

This will share the textures and materials across all the sprites. You should be able to have hundreds of them at the very least, possibly many thousands, though animating them might be very expensive in terms of performance (no way around that, as far as I know).

You could even have the various textures in a single texture atlas and use the parameters texture.offset.x, texture.offset.y, texture.repeat.x and texture.repeat.y to get at the right texture from the atlas. Though I don't think you'll gain much from doing so given your use case.

Object and Material for a particle system in Three.js?

1 Answers