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.
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
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 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.
