Particles : Smooth birth

[Floof]

Hello everyone ?

Is it possible to smooth the birth of each particle ? I mean ensure that the particles appear softly with opacity.

 

Thank you for your answers.

 

 

[GameMonetize]

You can by using our own shader:

https://github.com/BabylonJS/Babylon.js/wiki/12-Particles#customeffect-the-fourth-parameter-in-the-constructor

[Floof]

Thank you Deltakosh for your reply. I put a shader on my particle and after some experiments ( and thanks to Wingnut's help ) I finally found how to smooth the death of particles.

Now I just need to smooth their birth.

Can you please help me ?

 

 

here is my code : 

 

var fountain = BABYLON.Mesh.CreateBox("fountain", 0.1, scene);

BABYLON.Effect.ShadersStore["myParticleFragmentShader"] =

    "#ifdef GL_ES\n" +

    "precision highp float;\n" +

    "#endif\n" +

 

    "varying vec2 vUV;\n" +                     // Provided by babylon.js

    "varying vec4 vColor;\n" +                  // Provided by babylon.js

 

    "uniform sampler2D diffuseSampler;\n" +     // Provided by babylon.js

    "uniform float time;\n" +                   // This one is custom so we need to declare it to the effect

 

    "void main(void) {\n" +

        "vec2 position = vUV;\n" +

 

        "float color = 14.0;\n" +

        "vec2 center = vec2(0.5, 0.5);\n" +

  

        "color = sin(distance(position, center) * 10.0+ time * vColor.g);\n" +

 

        "vec4 baseColor = texture2D(diffuseSampler, vUV);\n" +

 

        "gl_FragColor = baseColor * vColor * vec4( vec3(color, color, color), 10.0 );\n" +

    "}\n" +

    "";

 var effect = engine.createEffectForParticles("myParticle", ["time"]);   

var particleSystem = new BABYLON.ParticleSystem("particles", 20000, scene,effect);

fountain.position.y=0;

fountain.position.x=0;

fountain.position.z=0;

particleSystem.particleTexture = new BABYLON.Texture("star.png", scene);

particleSystem.emitRate = 15000;

particleSystem.emitter = fountain

particleSystem.minEmitBox = new BABYLON.Vector3(700, -700, 700); // Starting all From

particleSystem.maxEmitBox = new BABYLON.Vector3(-700, 700, -700); // To...

particleSystem.minSize = 0.01;

particleSystem.maxSize = 4;

 

particleSystem.textureMask = new BABYLON.Color4(1, 1, 1, 1);

 

//particleSystem.color1 =  new BABYLON.Color4(0, 0, 0, 0);

//particleSystem.color2 = new BABYLON.Color4(1, 1, 1, 1);

particleSystem.colorDead = new BABYLON.Color4(0, 0, 0, 0);

 

particleSystem.maxLifeTime = 4;

 

particleSystem.gravity = new BABYLON.Vector3(0, 0, 0);

particleSystem.direction1 = new BABYLON.Vector3(-1, -1, -1);

particleSystem.direction2 = new BABYLON.Vector3(1, 1, 1);

 

 

 

 

 

particleSystem.minAngularSpeed = 0;

particleSystem.maxAngularSpeed = Math.PI;

particleSystem.minEmitPower = 1;

particleSystem.maxEmitPower = 1;

 

particleSystem.updateSpeed = 0.001;

// Start the particle system

particleSystem.start();

 

- - - - - - -

 

And here is also a link to my demo :

http://www.peru-lab.com/bishop/bishop

 

And a playground Wingnut created for those who would like to help me ? ( Thanks again Wingnut ! )

[Wingnut]

Hi gang!  Here's the url to that playground - http://playground.babylonjs.com/#ZVNDN

But ohhh... I misunderstood something, here.  Floof, the shader code that is currently in that demo... is not the reason why your particles are doing fade-out.  Your .colorDead setting is causing that fade-out... or at least I THINK so.

Deltakosh/others... why can't .color1 be invisible, .color2 be full white, and .colorDead be invisible?  It seems that should make the particles fade-in and fade-out... without the need for a shader/particleEffect.  Thoughts?  Anyone?

Sorry, Floof... I think Deltakosh short-sheeted you a bit.  If you want to use a fade-in 'effect' done with shader code (as deltakosh mentioned), then you/we need to change your current shader code.  That shader code is designed to make holes in particles, and not fade-in particles.

But, back to my first comments, I think that the correct combination of color1, color2, colorDead... will do the same thing WITHOUT a shader.  I'm sure I'm being stupid, but why are lines 50 and 51 seemingly failing?  Anyone have thoughts?  Thanks. 

Floofs, again, sorry for the wild goose chase.  When you first showed me your code, I could not understand why it had a shader in it.  But after seeing Deltakosh's response, I now understand.  (I'm old, it takes time for me to catch-up) 

[GameMonetize]

Hello, it mainly depends on the blend mode you want. You can use Standard mode (aka Alphablending):

http://playground.babylonjs.com/#ZVNDN#1

Or you can use additive mode:

http://playground.babylonjs.com/#ZVNDN#2  (In this case color1 == color2 to slightly move from black to white)

[Wingnut]

Nice!  Thanks DK.   #2  has a nice fade-in, but we lost the fade-out.  Now they are doing blink-out.

 

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

 

Spawn invisible, full white at half life, die invisible.  Not possible, I bet. 

 

Would we need 50/50 mode?  Additive mode till half lifetime and then subtractitive mode for the second half?  heh.

 

We'd probably need a .color2HangTime property...  what percentage of the total particle lifetime... does the particle STAY at color2.

 

errr...  hmm.  This would allow us to set the shape/plateau of the color transitioning parabola!  WOW!  I just scared myself.

[GameMonetize]

This has to be done using a custom effect:(

[Wingnut]

We're on it.   

 

Well Floofenstein, looks like we got us a convoy.  Calling all shader coders... we need a treehouse team.  Michelobs around the fire afterwards.

 

Floof, don't you worry a bit.  We got CYOS, and we got some of the best shadermeisters in the world... right nearby. I'll run and get the beer while smart people work on this challenge. 

[Floof]

haha thanks for your helps guys !

I'll also try to find a way to resolve this mystery...

[Wingnut]

Whelp, here I am, studying time-based shaders... http://playground.babylonjs.com/#ZVNDN#3

I just re-turned-on the shader 'effect' on Floof's star thing... and re-installed the registerBeforeRender function that sends the time parameter to the effect.  Oh yeah, I made the particles monster-sized, too. 

This is the starter kit, Floof.  I have seen a few other time-driven shaders... such as our fireProceduralTexture and the CYOS wave shader.  Both looked more complicated than DeltaK's particleEffects demo.  Besides, we are wanting a particle effect, right Floof?  So, we might just as well start-with a time-varying particleEffect shader, yes?  You bet.  Oh, I just found another time-based shader ... the water shader... near the bottom of our Convincing World tutorial.  It is from the old pre-ShaderMaterial days, when we had to do our own shader binding.  ShaderMaterial made all that BS go away, thanks DK! 

Floof, I think what you/we/someone need to do... is set .color1, .color2, and .colorDead, to full white.  Then we use time, somehow (duh?). 

Take note that none of Deltakosh's "rings" are at the same place in their animation.  They each have a unique animation.  This is also what we need for the fade-in, fade-out shader.  We want the stars doing that... at individual unique times.

In the registerBeforeRender animation loop, we can see that time is ping-ponging between 0 and 100.

And that's all the info I have so far.  Floofs could vary particle material .diffuseColor (maybe) OR... alpha transparency.   I think alpha is wiser.   I think we are wanting our particles to start transparent, ease (quickly) to visible, stay there for SOME time, then ease to transparent again... sometime near the end of the particle's .maxLifeTime.

That sound right, Floof?

Okay you guys... kick this thing's butt.  Hack that shader code, and that time-sending animation func... let's get Floof a fade-in/fade-out star field shader.  The spirit of Massachusetts is the spirit of America... errr...  nevermind  (it's a Family Guy thing).   Can I ask what part of the world you are calling-from, Floof?  It's okay if you don't want to tell, of course.

 

PS: Off-topic, but, our friend Alby is missing.  We're going to need a team of volunteers to head to Australia and find out what's shakin'.  Last I heard, he was sick.  I sure hope he's okay.

[Floof]

Hi Wingnut ! 

Thank you very much for your work ! It helps me a lot. Your time-varying particleEffect shader can be very useful for this star field. I am going to change some settings and see what happens

 

Talking about the result I am looking for : a particle system with a smooth fade in, a long life-time and a long fade out for each particle. If we could not "sense" when they born or die, it could be perfect.

 

To answer your question, I am a movie maker from France (Paris) and I try to create a 3D star field with planets linked to other worlds or levels, hide in these worlds some .obj linked to music ( http://www.peru-lab.com/bishop/bishop.html for the moment there is just one other level and an audio mixtape linked to the star-field)

 

Again, thanks a lot for your help ! 

[GameMonetize]

Ok so here is your solution

Just redefine the updateFunction:

http://playground.babylonjs.com/#ZVNDN#4

[Floof]

Thank you Deltakosh ! it works perfectly well !

Mission accomplished !

[GameMonetize]

[Wingnut]

Well wasn't that terrifyingly easy?  Nice!  Thanks dk!

Here's a slightly spruced-up version.... http://playground.babylonjs.com/#ZVNDN#7

Tasty starfield, Floofa-loompa!  Maybe the best I've seen per bytes-needed.  They'll be partyin' in the streets tonight! 

But really, we should learn time-based shaders just the same, ya know?   heh

	particleSystem.minEmitBox = new BABYLON.Vector3(700, -700, 700); // Starting all From	particleSystem.maxEmitBox = new BABYLON.Vector3(-700, 700, -700); // To...

I don't think ANYONE has EVER tried an emitBox that big.  Floof, you're a genius!  Galaxy building 101!

Addenda:  http://playground.babylonjs.com/#ZVNDN#8  Heavy twinkling looks good too, but, it damages the fade-in/out a bit.  (lines 67/68, I'm twinkling stars < size 3)   

[Floof]

haha Godrays ! very good idea Wingnut, it looks pretty cool !

 

I could not help but play with your playground http://www.peru-lab.com/bishop/kapol.html# it could be an interesting level by the way...

 

I think I am going to work on some kind of wormhole for this starfield, maybe with this water shader you told me about, if you fancy

 

Thanks again for your help, guys !

[RaananW]

This thread makes me wanna program a stars-related game.

[jerome]

babylon 5 ? alien ? E.T ? gravity ? star gate ? star trek ? star wars ? star peace ? (not sure this last still exists ... you could thus use the name  )