Particles Systems : RGBA colors and blend modes

[Tricotou]

Hello all

I’m trying to play with particles systems (water pressure effect on my Hovercraft project) but I can’t figure out how colors are actually working.

As far as I understood :

• Birth color is random between color1 and color2
• Dead color is colorDead

Now, my problem is that, I can’t manage to have actual RGBA colors.
For example having a look at colorDead :

particleSystem.color1 = new BABYLON.Color4(1,0,0, 1.0);
particleSystem.color2 = new BABYLON.Color4(1,0,0, 1.0);
particleSystem.colorDead = new BABYLON.Color4(0, 0, 1, 0.2);

colorDead is a slight alpha blended bluish color like the color selector previews :

But result is hard blue color :

(playground)

---

Now at the opposite :

particleSystem.color1 = new BABYLON.Color4(1,0,0, 1.0);
particleSystem.color2 = new BABYLON.Color4(1,0,0, 1.0);
particleSystem.colorDead = new BABYLON.Color4(0, 0, 0.2, 1.0);

colorDead should be a dark blue color, with alpha 1.0, like the color selector previews :

But result is light alpha blended blue :

(playground)

---

In my researches, I came accross this topic which gives as a solution to tweak the particleSystem.blendMode param, but after testing all of them, it appears that either it enables or disables alpha (ending up with squares rendered instead of blended balls like the flare.png texture), but non of them actually uses a alpha blend mode. It keeps using alpha add mode, which basically means dark RGB is transparent…

What if I want my particles to actually be dark ?

Thanks
++
Tricotou

[Deltakosh]

Cc @PatrickRyan

[PatrickRyan]

@Tricotou, the better option than color1, color2, colorDead is color gradients. This PG is using a transparent png with standard blend mode so your particles are always a solid color no matter what your background is. Using color gradients allows you to not only control the color over the lifetime by setting the start color and the end color, but you can change the color at any point in the lifetime of the particle. You can also set the final color to be at any point in the lifetime such that you could say I want the particles to start red, but blend to blue in the first half of their lifetime and stay blue after that. I hope this helps, but if this isn’t what you are looking for, please feel free to ping back with more questions.

dark particles | Babylon.js Playground (babylonjs.com)

[Tricotou]

@PatrickRyan thanks for your answer.

Your second link is indeed what I was trying to reproduce : real “Alpha Blend”, using the STANDARD blendmode. But it was not solving my problem, since I was doing exactly the same on my side, without the same result. I went throuht ALL PARAMS of either Particles and Texture, one by one, and I had not the same result.

---

Setting the blendmode to STANDARD, here are results :
Your PG :

My PG :

---

I was going crazy, and finally I spotted the issue : your playground is a lie ahahah
Look at this :

• A : The texture is named “https://assets.babylonjs.com/textures/flare.png” which is exactly the default texture I was using.
• B : The URL is empty.

And if you actually feed this URL with the same URL :

Boom ! You end up with my issue

---

Conclusion : The PG you linked is actually using another texture, manually loaded from file, eventhough the name was a link to the default texture… The new one has alpha channel at zero outside of the circle, which is not the case of the default “flare.png” texture.

Thanks for your help !
++ Tricotou

[PatrickRyan]

@Tricotou, I’m sorry that tripped you up so badly. I mentioned in the first sentence of my reply that I was using a transparent png, but I could have been more specific. I created the particle system and saved it to a snippet server. In doing so, I uploaded the new png with transparency, which is needed when using a standard blend mode, to the particle system editor and then saved to the snippet server. The issue here is that our flow for uploading a new texture is that you follow the link to the default texture and then upload a new texture in memory which is then serialized to the json file saved to the snippet or saved locally. There is a name property in the json for the texture, but it uses the URL of the original texture, and we don’t capture the URL of the texture that is uploaded to replace the original image. This leads to every particle system created with the editor and not code having textures with the same name.

I have opened a feature request to solve this issue. While it’s not a bug or a critical missing feature, it’s a quality-of-life thing that can help users understand the system better.

In general, the best resource for deciding on the blend mode you need and how that affects your texture authoring needs is the particle blending documentation. This shows the exact operation being done which will help you understand if you need to include alpha transparency, light colored pixels, or dark colored pixels to hide the edges of your particle cards.

[Tricotou]

@PatrickRyan

I’m sorry that tripped you up so badly

No worries ! At the end problem is solved, mystery is gone

@PatrickRyan

I mentioned in the first sentence of my reply that I was using a transparent png

Indeed My bad, I was too focused on the texture URL name being the same than mine

@PatrickRyan

I have opened a feature request to solve this issue

Thanks !

See you ++
Tricotou