Have my alpha and fade it?

[qqdarren]

I'm trying to get a particle effect where it starts off a bright orange, then becomes one that is grey, spread out and getting fainter. (Think fire turning into smoke).

I started with a playground entry by @Wingnut (reference below), which I've cut back to just show one particle stream.

I seem to be stuck on the "fade to invisible" idea. As I increase particle size they tend to get brighter. In fact it feels like my changes to particle.color.a (line 97) are not having any effect:

http://playground.babylonjs.com/#D1QNY#3

I tried switching to BABYLON.ParticleSystem.BLENDMODE_STANDARD (line 35), and now they are fading to invisible:            

http://playground.babylonjs.com/#D1QNY#2

If you change line 97 to:

    particle.color.a = Math.max(0.0, 0.7 - ar);

it becomes clearer, as they fade to invisible about 70% of the way down the tree.

But you'll instantly see the problem with BLENDMODE_STANDARD, as the alpha channel in the png is ignored. I.e. this option seems to only be of use if you want square particles.

So is there a way to have my cake and eat it? Be able to use particles of interesting shape/pattern, but also be able to fade them away?

[GameMonetize]

Hello

as you are using a jpg I'm 100% sure that there is no alpha in it

[qqdarren]

Aha! I'd not noticed that. I've switched in flare.png, but the behaviour seems to be unchanged. I've increased the size to emphasize how the brightness increases when it should be fading away to nothing:  http://playground.babylonjs.com/#D1QNY#5

(This is also set to fade away completely by 70% of the way down the tree.)

[GameMonetize]

Works well for me:

 

[qqdarren]

That image shows the problem: the white circles are not getting fainter: they are just as bright and semi-transparent at the bottom as they were in the middle of the tree. In fact you shouldn't see anything at all in the bottom 30% of the tree, because alpha has been set to zero by that point onwards.

If you swap lines 34 and 35 (in http://playground.babylonjs.com/#D1QNY#5), i.e. switch to BLENDMODE_STANDARD you will see the correct behaviour. BUT, then I get those ugly black squares around each particle.

[GameMonetize]

ok gotcha

just use a png with alpha in it then and it will work (the flare.png does not have alpha channel)

[qqdarren]

Thanks @Deltakosh ! I'd not realized flare.png had no alpha channel (because it behaved as if it did, with BLENDMODE_ONEONE)! Here is a summary of the 4 possibilities, when used with:

    ps.color1 = ps.color2 = new BABYLON.Color4(1, 1, 1, 1.0);
    ps.colorDead = new BABYLON.Color4(1, 1, 1, 0.0);

(I.e. fade each particle out, over its lifetime)

JPG/PNG with no transparency:  (e.g. flare.png)

• BLENDMODE_STANDARD: Fade works, but black border around white circle.
• BLENDMODE_ONEONE: Black border automatically becomes transparent, but fade does not work

PNG with transparency: (e.g. flare.png opened in GIMP, Colors|ColorToAlpha, select black.)

• BLENDMODE_STANDARD: Fade works!
• BLENDMODE_ONEONE: No fade, and everything horribly over-exposed. (It seems it now treats it as a 1-bit image?)

I wanted to summarize this as always use BLENDMODE_STANDARD! But apart from the lack of fade-out, BLENDMODE_ONEONE is giving a much better effect in my real code!! Aaarrgghhh! It seems I can't have my cake and eat it, after all! (I guess I'll experiment with using two sets of particles, next.)

(BTW, no playground examples, as I don't know how to upload my transparent version of flare.png)

[adam]

4 hours ago, qqdarren said:

(BTW, no playground examples, as I don't know how to upload my transparent version of flare.png)

use imgur.com

[GameMonetize]

What about something like that: http://playground.babylonjs.com/#D1QNY#6 (using one_one means that if color is black then the particle disappears)