Particle System effect in the white background environment

Hi

I’m a newbie to particle system.
It’s pretty cool. I can’t wait to give it a try.

At first I saw this example in the babylonjs document
https://www.babylonjs-playground.com/#08YT34

However when I try to make it display in the white background, it somehow turns out too light to see the particles ?
(I simply add this to the example
scene.clearColor = new BABYLON.Color3(1, 1, 1);
)
The playground is as shown below
https://www.babylonjs-playground.com/#08YT34#5

Does anyone know how to make good particle effects in the white background environment?

Many thanks

Hello and welcome!
This is because by default particles are in add mode (so white + particle color = white):
https://www.babylonjs-playground.com/#08YT34#6

Many thanks for solving my problem!

Hi @Deltakosh

Have a one more question

When I change the texture pic to this with alpha outside of the particle and set the particle system to BLENDMODE_STANDARD mode

However it seems not as shiny as the original example in the dark environment. Do you recommend any kinds of method to add the emissive color part ?

  1. May I adjust the emissive color of particles?
  2. May I add the glow layer to each particles ?

Thank you so much

flare2

It will never be able to look as shiny on a white blackground. This is mainly a perception thing here due to the contrast with the white background. Would you happen to have a target you want to reach in term of style so that we could find the best way to achieve it ?

Hi @sebavan
This effect is kind of cool for me
https://www.babylonjs-playground.com/#MX2Z99#15

Would it be possible to apply this kind of effect(material or emissive color…) to each particles in the particle system?

Thank you so much

1 Like

This works mainly due to the accumulation of particles so it would not be a per particle possibility. Now let s summon @PatrickRyan who is crazy about particles :wink:

1 Like

Hi @Ned_Benson, happy to help out with your questions. When you are dealing with particles, you generally want to think in terms of adding to your background and when your background starts as white, there’s no headroom to add. You could use a different blend mode for your particles but you won’t get the sense of light coming from the particles with a blend mode other than add.

With the playground in your last post using the sun system in blue, even though the clear color in the scene is white, there is a dark blue base to the system. Consider these lines:

// Create core sphere
var coreSphere = BABYLON.MeshBuilder.CreateSphere("coreSphere", {diameter: 2.01, segments: 64}, scene);

// Create core material
var coreMat = new BABYLON.StandardMaterial("coreMat", scene)
coreMat.emissiveColor = new BABYLON.Color3(0, 0.0930, 0.3773); 

// Assign core material to sphere
coreSphere.material = coreMat;

This section of the code is creating a sphere with an emissive color of a very dark blue. We use an emissive color so that the sphere is not affected by any lights in the scene and will always render as the same dark blue. The particles are also relatively dark blue and during their life gradate from transparent to 50% opaque and back to transparent. When you add these together, you will get the glowing effect through a lot of layers of particles. Adding many dark colors together will give you a lot of depth in your particle system and can still get very bright tones in your particles. To demonstrate this, I created this graphic for you because it becomes very obvious when looking at it.

The background color is the color used on the sphere in the center of the particle system. Each image from left to right is one particle of the same color added to the ones below and rotated. So at the left of the image is one particle, and at the right is eight added together. You can see that we are getting much brighter tones with just 8 layers so thousands of particles can definitely reach areas of white which will resemble cast light or glow.

You can also add to this effect by using particle textures that have broad, soft edges like this:

With all of the blended tones adding together, your particles will really feel emissive so you can really leverage the texture to add to the effect. While you could go with a post process glow effect to add to this it will be an expensive rendering addition that can be done with simple texture and color authoring to make the particles look like they are glowing.

I hope this helps you when planning and authoring your particle systems and feel free to drop playgrounds into the thread if you need some help tuning them.