Particle texture alpha channel is not work

I’m using particle system, and add a texture to the particle. The texture is a png image with transparent background. But after I loaded it, the image background become white.
However, if i remove one of RGB channel,the background become transparent with less details. I don’t know what’s wrong with it. I want the transparent background and keep the details.

// using original image
 var particleTexture = new BABYLON.Texture("./textures/T_Bubble_Opacity/T_Bubble_Albedo_20.png", scene);
// using the image which the blue channel is removed
// var particleTexture = new BABYLON.Texture("./textures/T_Bubble_Opacity/T_Bubble_Albedo_20_M.png", scene);
// hasAlpha don't work
particleTexture.hasAlpha = true;
// particleTexture.getAlphaFromRGB = true;
particleSystem.particleTexture = particleTexture;

The original image. It’s a bubble.
The modified image. removing the blue channel.
The comparation, the left one using modified image, right one using original image.

My target: remove the white background and keep the details.

Hi and welcome to our Community,
I suppose you are loading a regular PNG. In which case you need to set the particles blendMode (to add). I believe that should solve your issue. Else, let us know.

Edit: This example using a GUI icon from the asset library might be a more explicit example

The blendmode is ADD as in the PG above.

particleSystem.blendMode = 2;

Else, you can set your PNG to indexed colors or simply add a black background for the alpha. Where black == alpha 0, Where white == alpha 1. Then you won’t need the blend mode.



I found the blendMode worked, Thanks for your reply!!!

1 Like

nit: use BABYLON.ParticleSystem.BLENDMODE_ADD instead of 2 to make the blend mode clearer!

@Evgeni_Popov what’s more, does particle system can achieve the Tindal effect? I want to simulate the sunlight.

I don’t know, what is the tindal effect?

Like god ray. I just want to use texture to achieve the effect.

I don’t think this effect is generally done with particles (I would not know how to do it), as the particles of a ray don’t move (in the PG, a ray does not move, the illusion of movements is because some rays appear while other ones disappear).

More probably, it’s implemented with a post-process, as in the PG you linked.

My god ray just display over a picture (such as morning forest).
I achieve the effect with my day-long effort. Using a light texture and a noise texture to simulate the god ray.

1 Like