Jump to content

Particles : Smooth birth


Recommended Posts

  • 6 months later...

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);
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
- - - - - - -
And here is also a link to my demo :
And a playground Wingnut created for those who would like to help me ? ( Thanks again Wingnut ! )
Link to comment
Share on other sites

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)  :)

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 ! 

Link to comment
Share on other sites

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)   

Link to comment
Share on other sites

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 !

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...