Jump to content

Have my alpha and fade it?


Recommended Posts

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:


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


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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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_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)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...