Jump to content

Create a stream of particles


Recommended Posts

Hi everyone ! 

I've seen that a particleSystem as an emitter attribute, where the particles come from. However I didn't see anything about a "receiver" attribute,  in order not only to emit particles from one point but to really create a stream of particles between 2 points. I know I can kind of simulate that with the direction of the particles, their speed, their lifetime, etc... but the point here is to have a simple way to change emitters and receivers so we can create stream between 2 objects on demand. 

Is there a way to do so ? 

Big thanks ! 

Link to comment
Share on other sites

Hi L!  Cool idea.  For now, I think you will need to use direction1/2.

Can I ask... do you want particle stream to get wider in the middle?  That would require making the particle stream target.... be a "particle attractor".

But think about this:  If you use a box as particle emitter, you can...
  - Set direction1/2 to something like vector3(0,0,1)
  - Set min/max emitbox to vector3(0,0,0)  [particles start at center of box]

Now, there is a narrow stream of particles departing "front" (forward vector) of box.

Now just use emitter.lookAt(someMeshTarget), and the particle stream will automatically aim-at the target.

After that, you need no more direction1/2 adjusting.  Just aim the emitter at some target [using lookAt()]... and the particle stream will aim that direction.

Here is a playground demo that G.I. JS  @Gijs used yesterday... to show how to do lerped/animated lookAt().  I added a particle system, and set its emitBox values so the particles start at the tip of the cone.  Then I set its directions to emit in one direction... (+y in this case), and here we go.


Working good, eh?  Why re-aim the particleSystem directions... when you can simply re-aim it's emitter.  The emitter could be invisible, too.

This might work for you, eh?  It's not as cool as a particle "attractor point"... but it is sure easier to code.  :) 

Be sure to answer my question about wanting/not... the particle stream to get wider in the middle and narrow as it arrives at target.  That will be more difficult, but maybe still possible.  Party on!

Link to comment
Share on other sites

Oh yeah this behaviour is  near the one I want to implement ,   I can easily change the lookAt target to redirect the stream toward any mesh I want  and act like a receive point. Thanks for the idea !  

Other thing now is to handle some collisions and stop the stream when it reaches the target, and after that it would be just as cool as a real emitter/receiver stream.


To answer your question, my need is to create a 3D interface, acting like a "digital twin" to represent a real time factory, so i need streams betweens my machines, thus the stream provided in the PG is definitely ok for me

Link to comment
Share on other sites

Cool.  You understand perfectly.  And thx for the info about your streams not needing to be fat in the middle.

There is a STATIC method/function on vector3 objects... called .Distance().


You can get the distance... between target and gun. 

var distance = BABYLON.Vector3.Distance(gun.position, target.position)

Sometimes, if gun or target has be translated/moved in its LocalSpace, you might wish to use  .getAbsolutePosition() in place-of .position.

So, now, you have a distance.  Now, you need a fancy converter function.

var setParticleSystemMaxLifeTimeAndMaxEmitPowerFromDistanceValue = function (particleSystem, distanceValue){code stuff};  WOW, huh?  :)

No colliding involved... but this function will need some basic math formulas, and serious trial'n'error tweaking.  Should be do-able, though.

I wonder if the function will stay in "calibration" when FPS changes, and when run on machines with different performance traits.  hmm.


There might be other ways.  Particle systems allow a "custom update function" which COULD test each particle... to see if the particle is too far from emitter, and stop/kill it, if it is.

There are actually THREE easily-customizable functions in a BJS particleSystem.  You can see them here... http://playground.babylonjs.com/#1PQT7P#13  lines 18-75..

They are "installed" in the particleSystem... in lines 89-91.

The my_updateFunction() is the one we would be interested-in.   Lines 53-57... I did some experimenting with distance between particle position... and emitter position.

Currently, particles are free-flying, but if you de-activate line 53, and activate lines 55-57, you can see that we have limited the flying distance.  I did not KILL the particle if it flies too far, but I keep it from further flying... with lines 55-57.

Now you know all the fancy stuff about BabylonJS particleSystems.  You should be able to take over the world, now.  :)

Update:  I fixed code typos in 5th and 8th sentences.

Link to comment
Share on other sites

That's a lot of stuff to deal with ! :o 

Thanks a lot for your time and your precise answers, I will take some time to read this all and to try these functions, I'm pretty sure there's everything here to fulfill all my dreams about particles streams !

(and if not i'll be sure to reply to this topic and to expose you my problems ;) )

Link to comment
Share on other sites

@Wingnut @Sebavan  I've found a simpler and easier way to do it :

You take a basic object, let's take a sphere,  you animate it between a point A and a point B, and you add to this sphere a particleSystem with direction1/2(0,0,0). Then you make your sphere invisible and you're done !  Just play a little with the life time and the speed of the particles to have a perfect effect, but the result is very clean :) 


edit : i did a short example on the pg, not optimized at all but still works  :https://playground.babylonjs.com/#QR20Y9#9


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