0

I created a THREE.Point object, using a bufferGeometry, to render thousands of particles, and I used the PointsMaterial material. I update the material on runtime, changing between the normal square particle (default one) with some other textures and colors, and it works fine.

The problem comes when I want to create particles with different sizes. I can't do it just setting a BufferAttribute. I tried make a custom shader, Three.js Particles of various sizes but I couldn't make it works, some Three version problem maybe? I duno.

So I thought grouping all my particles by sizes and create one bufferGeometry for each particles sizes. But I'm not sure this is the best approach. Is this the best choice in terms of performance? Or do I have to create a custom shader to achieve this goal?

Three.js revision:72

Community
  • 1
  • 1
Javingka
  • 99
  • 1
  • 11

1 Answers1

1

An example of what you want to do is given in this answer -- just use the alpha attribute value in the example to vary the point size instead: http://jsfiddle.net/8mrH7/196/

gl_PointSize = 8.0 * alpha; // use alpha to vary point size, instead

three.js r.73

Community
  • 1
  • 1
WestLangley
  • 102,557
  • 10
  • 276
  • 276
  • Thanks again @WestLangley, you're awesome!. – Javingka Nov 29 '15 at 10:48
  • let me ask you one more thing, I can't include in the Shader Material a custom texture, here is a jsfiddle where I'm attempting: http://jsfiddle.net/JavIngka/swttpc0L/9/ Actually, the THREE.PointsMaterial works pretty well, but then I needed to set different sizes for my particles. Maybe I can adjust somehow the PointsMaterial to allow me to set this alpha value and changes the sizes in my bufferGeometry, and keep all the other features, like setting a map or sizeAttenuation?, Can you please give a hand with this. Thanks a lot!. – Javingka Nov 29 '15 at 14:52
  • Ok, as you can see at my jsfiddle, http://jsfiddle.net/JavIngka/swttpc0L/12/ I made it work using custom textures. Now I'm trying to include an **Alpha test**, to activate my texture transparency... step by step I am achieving this... – Javingka Nov 29 '15 at 18:40
  • Sorry so many comments, but finally I think I did it: http://jsfiddle.net/JavIngka/swttpc0L/13/ – Javingka Nov 29 '15 at 18:49
  • I figured you would. : - ) – WestLangley Nov 29 '15 at 19:41