Controlling position of 2d particles (or making SPS png particles pretty)

Hiya. I’ve been playing with SPS particles all day. They are incredible. I’m moving SPS particles around using x,y,z positioning, which is working well.

But at the same time, I really only want to display a 2d image, like those used in the particle emitter function. Help docs suggest using the 2d system for 2d particles. But I don’t see a way to manipulate their position. So, first question:

  • Is there a way to modify x/y position of particles in the 2d system?

If not, 2nd question: with SPS, loading the flare png, doesn’t look too good. Here’s a playground:
https://playground.babylonjs.com/#MRKZAX#7
And another playground with another transparent png:
https://playground.babylonjs.com/#MRKZAX#8
37%20PM 30%20PM

Those pngs don’t look good. What would i need to do to make them beautiful like those used in the 2d emitters, like so:
31%20PM

Hello,

SPS.mesh.material.useAlphaFromDiffuseTexture = true;

Galen

1 Like

@galen is right

[EDIT] the same with a double-sided model so the flares can be seen from each side : https://playground.babylonjs.com/#MRKZAX#10

[EDIT 2] the flare from your first PG seems to have no alpha channel actually : https://bjs-playground.s3.amazonaws.com/flare.png

1 Like

It is absolutely true that if you display quad only using the 2d particle system might be more efficient even more if you use the GPUParticleSystem.

That said you do not control the position directly but more through controls like velocity and so on which are influencing the trajectory. You could even rely on noise texture to influence the particle system.

Finally you could also use a customFunction to update the system and this way you would be free to do what you want: Customize Particle System - Babylon.js Documentation

Thanks all. Just gave it a test and see that position is exposed and available in updateFunction. So 2D emitter can be used along with precise alignment of particles. Very cool!

particleSystem.updateFunction = function(particles) {
     for (var index = 0; index < particles.length; index++) {
         particles[index].position.x = .05;
         particles[index].position.y = .05;
     }
}

Also, thanks for useAlphaFromDiffuseTexture. That’s handy.

Yea, funny about https://www.babylonjs-playground.com/textures/flare.png not having an alpha channel. The black must be subtracted out somehow by the particle emitter. Have been curious about that… trying to replicate the effect with an alpha mask, but no luck with it.

About the alpha it is because particules are by default additive for the best rendering quality without sorting issues.

Additive? Does that refer to blend mode, BABYLON.Engine.ALPHA_ADD. Use Blend Modes - Babylon.js Documentation

?

Yup :slight_smile:

1 Like

After some further experimentation, it looks like
particleSystem.updateFunction, does not work with GPU particles.
https://www.babylonjs-playground.com/#MRRGXL#28

Nope as they do update on GPU, you might need to stick with 2d Particles for your needs.

https://playground.babylonjs.com/#MRKZAX#11

1 Like

Wow!!

1 Like

tweaking a little bit https://playground.babylonjs.com/#MRKZAX#12

Niceeeeeeeeeeee !!!

1 Like

I don’t have the wherewithal at the moment to turn this into a PG. But SPS particles are rocking my world atm:
https://www.dropbox.com/s/eblcxv11hrfcore/particles.mov?dl=0

2 Likes

This is huge I love it !!!