Particles circle effect

[Boz]

Hello !

I started a question, but finally got the answer I can't delete this topic, so why not share it ?

I created a ParticleSystem emitting particles along a circle, for a "tube" effect : http://www.babylonjs-playground.com/#U64HVU#1

This has been done by redefining the startPosition() function for manually positionning particles at launching.
I had to add a variable to know the total number of emitted particles : just create a particleSystem.cpt var and increment it at the end of the function.

Memorizing the total number of particles can help achieving nice effects with trigonometry.

Enjoy

[JohnK]

Is this something close to what you want? http://www.babylonjs-playground.com/#U64HVU#3

[Wingnut]

  Or perhaps http://www.babylonjs-playground.com/#U64HVU#4

[Boz]

I was looking for Wingnut solution's, and I like John's one

Thanks both !

[Wingnut]

Yeah, me, too.  I think... if you needed a wiggly snake-like tube... to emit along the entire "run" at the same time, you can set the emitter-tube invisible, just like I did... and then set the .emitBox with Z-values that are the same as the length of the tube.  Then it will emit along the entire length of the tube (continuously from all spots, like JohnK's demo).

Here is a demo, using a 10-length "bar" as the emitter.  Notice the +5 and -5 Z-values in lines 119/120.  User also preferred that particles only emit sideways and up, but not in any other directions (one z-quadrant of four).  That was accomplished (badly) with careful .direction settings in lines 117/118.   Fun stuff!  I think it can also be done... by emitting straight-up (90-degree spread-angle) and then rotate the ebar around its z-axis a bit. 

I wonder how things would "act" with a torus as the emitter.  Lots of emitBox fun to experiment-with, there.  A bit off-topic, but still interesting, I hope. 

Ever seen particles from verts?  (that whole PG series ROCKS!)  Ever seen "sparticles"?  (sparkly particles - custom particle coloring, sizing, etc... inside a customUpdate func.)  LOVE THEM SPARTICLES!    Gotta have a "faerie dust" working environment for your particles workshop, right?  Ok bye.

[BangTao]

@Wingnut

Hello Wingnut!Me again~

9 hours ago, Wingnut said:

Ever seen particles from verts?

I'm confused about the PG you said above~I turn off the rotation and gravity,and here is the PG;

I don't know why the particle will shoot from a vertex with three directions?

Would you please simply explain why is that ?

Thank you!haha 

[Wingnut]

  Hi BT! 

First, let it be known that I did not invent "vert-particles", nor did I code it.  (I just played with it a lot.)  I can't remember who coded it for me, but it WAS a request I had.  I wanted to recreate a per-vertex particle thing that I created decades ago, in 3D Max (v4, I believe). (boring story, eh?)  A good forum search will discover who coded this, because I, surely, danced around and went crazy with happiness.   

Maybe the author will introduce.  The use of the word "perticles" will surely give it away, eventually. 

It would have taken ME 4-times that much code.  (I'm a pretty bad coder)

Wingnut's Attempted Answer.  Potential wrongness warning!  heh

The BabylonJS "box" is a little different-than boxes from lesser engines.

    console.log(verticesPositions.length);
    console.log(verticesNormals.length);

72.  (...for an 8-corner box?)  Now divide 72 by 3 - because we need 3 values (x,y,z) for EACH vertex position (vector3-like) and for EACH lighting normal. 

For .positions, these are positional Vector3's.  For the lighting normals, they are directional Vector3's.  More on that, later.  You will be working-with both "usages" of Vector3's... extensively... in BabylonJS and similar systems.

So, 24 tri-values (each vector3-like - xyz values) for an 8-corner box.  WHY 24 vertices for a box that SHOULD have 8?

I THINK it is because... BJS boxes allow color-per-side and texture-per-side.  Some might say that they are "flat-shaded by default".  Three verts, three normals, and on SOME mesh, three colors... on EACH corner of the BJS box.  (I believe Jerome and Deltakosh were integral in this decision... to make BJS boxes be 24-vert flat-shaded by default.)

At first, I was worried that users would complain about the added rendering time and storage space needed for a 24 vert box, but the users actually LOVE the color-per-side and texture-per-side power.  Also, our boxes are nicely "defined", visually.  You can easily see where the edges are-at, where the corners are-at, etc.  With a 8-vert smooth-shaded box, it is difficult to see where ONE side ends and another begins.  This was because there was no lighting differences on each side of two edge-connected sides.  It looked like the two sides just "smeared together"... difficult to see its cube-like definition.

How's that for an answer?  Pretty bad, huh?  *nod* 

Forum hero @JohnK wrote a TASTY document about all this.  http://babylonjsguide.github.io/advanced/Normals  I don't necessarily agree with his 36-entry table, there.  I think it should be 24, but... he's substantially smarter than I am - he could be correct.  He also provides some EXCELLENT illustrations and playground demos for visualizing this phenomena.

Enough?  Too much?  Need soak-in time?  *nod*.  So, that is why... three streams of particles from each box corner.  They are using the "direction" of the lighting normals... for particle flight-directions.

When Vector3's are used for .position, they are easy to understand.  When Vector3's are used for directions (and magnitudes OF that direction), they are a little more difficult to understand.  I spearheaded the addition of... anylight.setDirectionToTarget(any positional vector3)... into BJS core, simply because I struggled SO MUCH with setting the direction vector for directionalLights and spotLights.    Hope this helps.

PS:  If you need to re-direction the three normals at each corner... so it ACTS like there is only one, you can.  It probably requires "averaging" the direction of all 3 normals, and then writing that data back-into the box's vertexData normalsKind array.

[JohnK]

59 minutes ago, Wingnut said:

I don't necessarily agree with his 36-entry table

Nor should you. When I was teaching I would have said "A deliberate error to check you are listening" but now I have no excuses other than senility

Document corrected thank for the heads up @Wingnut

[Wingnut]

Cool!  Hi John, good to see you, as always.

Did you make those gray-background drawings... yourself?

They are SO good!  If there was ever a prime example of "a picture paints a thousand words"... it's those.  Are those "grabs" from the playground?  Yeah, I think they are.

You're an excellent tutorial writer, John.  Seriously thorough.  I think the publishing houses will be pursuing you, soon. 

Embarrassingly, I had not THOUGHT OF checking your BabylonJSGuide site... for assistance in this topic.  BUT, I did a Google IMAGE search for "flat shaded box normals"... looking for a good illustration, and your picture returned #2 hit.  hehe.

"OH, Yeah, THERE is the perfect picture.  Who's site?  JohnK's guide!  DUH, Wingy!"  hehe.  So, it was one of your pictures... that saved the day. 

[Wingnut]

Hey BT... if you get bored, I made a little "plotting demo" with numbered vertex identification boxes, and color-per-vertex settings, and and and... well, it's a fun playground to learn about plotting mesh.  http://www.babylonjs-playground.com/#1UHFAP#67

You can also test the difference between drawing indices clockwise, or counterclockwise (one way creates a FRONT-side triangle facet, the other way... BACK-side).

Another type of vertexData... which is sometimes-present, and sometimes not present (often not present on imported models)... is UVs (UV-Kind).  Do you know that "UVW" == XYZ for textures?  Yep, they needed 3 more alphabet characters... so they chose they 3 letters that happened before XYZ in the alphabet.  Goofy, huh?

Anyway, UVs (or XY's hehe)... are used to "map" a texture onto a mesh.  In version 68 of the above demo, I turn OFF the colors-per-vertex (colorKind data) (although it CAN remain ON.  Colors under textures is common, especially for partially-transparent textures) (those with alpha).  Next I create and install a material with diffuseTexture, and I start PLAYING with the UVs... having fun "mapping" the grass onto the mesh.

Here is another recent experiment and user-issue.  In this playground, we were mapping a texture onto a piece of "ribbon" mesh... from Jerome's cool ribbon-making code.

Each UV is a 2-value thing (Vector2-like), and often, the value is between 0 and 1 inclusive.  The lower left corner of a texture... is UV (XY) 0, 0.  The upper right... 1,1.  SO, you can think of them as percentages.  If you want the CENTER of a texture... to position-at some vertex point, you would set THAT UV... to 0.5, 0.5, yes?  You bet.  50% RIGHT from the lower left corner, and 50% UP from the lower left corner (of the texture).  Understand?  I hope so.

There, now you, and future readers of this thread... are experts in mesh plotting and mesh data-kinds, yes?  Help all your friends learn it, and show them the usefulness and fun... of BJS.   

Oh, indicesKIND, you ask?  Three indices/index values for each triangle facet, and they are each WHOLE INTEGERS (blue box numbers).  They define the order (clockwise/counter) of every 3-vertex triangular facet.  They are the "connect-the-dots" data.  You can think of them as "drawing the wireframe", but keep in mind the clockwise/counterclockwise connecting ORDER... determines whether that triangle is FRONTface or BACKface.

Ok, NOW you know everything.    But don't ask ME about those UV2, UV3,UV4,UV5 and UV6 values.  I have not learned about those, yet.  The other data seen at that last link... I know a LITTLE-about.  The matricesIndices/extras and matricesWeights/extras are used for connecting skeleton/armature "skin textures" onto "bone transforms".  If a bone bends/transforms, and if it is weight-indexed onto one or many skin-points, the skin texture will transform the same way... WEIGHT-amount.

That's all I know... and some of it could be wrong.    Party on.  Apologies to Pouet for derailing his topic.

[BangTao]

Thank u Wingnut ,i'll take a look and have a try.BTW,seems i can't find PG by Search PlayGround ~ it retuens nothing

[BangTao]

15 hours ago, Wingnut said:

Here is another recent experiment and user-issue.  In this playground

Does the issue means we can hardly mapping the texture onto a piece of "ribbon" mesh?

@Wingnut

[Wingnut]

  Good question.  More likely, Wingnut stupidity.  heh

Here is a ribbon from our playground "basic elements" built-in demo.

https://www.babylonjs-playground.com/#1164YH#2

It maps the texture QUITE NICELY, but you can see that this ribbon is far more than two triangles.

Again, the 2-triangle UV demo that I provided earlier... is likely MY screw-up.  User who had the issue... found another way to solve, and I never learned what I was doing wrong, if anything.  I'll give you a big Wingnut hug... if you can adjust those #15 playground UVs to be "better", and then teach us what you learn/did. 

It could be a "clamping" issue.  Know about that?  I think it has to do with letting a texture stretch/slide, or not.  *shrug*

[BangTao]

Well,hah.First i did some test on #17 & #18:

http://www.babylonjs-playground.com/#21VLCN#17

As for #17,i annotated line 32-39,and write some code (line 40-45),annotated line 77-79,and change the vOffset to 0:

http://www.babylonjs-playground.com/#21VLCN#18

As for #18,i didn't change the vOffset,but i changed the UVs.Seems there missed something~~~

 

Keep testing~Then there's #19.haha.

http://www.babylonjs-playground.com/#21VLCN#19

 

And Finally,Here is want i learned:

But it should be :(something like that)

That's all.I'm cracking the planet now,need workers.will you come as a volunteer?HAHA~

@Wingnut

[Wingnut]

hehe.  Hey, great analysis!  Well done!  Excellent diagrams and narratives! 

I noticed that the picture is not square (it is 2,592px × 1,944px) and is not "power of 2".  I wonder how well a 1024x1024 image would look/work.  hmm.

I might do some more experiments.  You can, too, of course.

I find CORS-approved images (for using in our playground)... with Google Image Search.  I can filter for "free for re-use" and even exact sizes.  Anything that comes from wiki, wikipedia, wikimedia commons, etc... is all CORS-clear for re-use.

Here is a tinyURL of an example.  https://tinyurl.com/n6ojxng

It is a search for "horizon" and it filters-out pictures from pixabay and flickr (both DON'T have CORs-clear images, and clutter/contaminate the search returns/report). 

As you can see, the search above... returns many wikimedia-based images of horizons... all 1024 x 1024.  Bookmark that link, and when you need a CORS-clear picture to use in our playground, start with that link, perhaps.  Change "horizon" to ANYTHING, change size to anything, and hit search.  It seems to always return a good amount of re-use-OKAY images.  Paste their URL's into a playground... they work (almost) every time.    Handy. 

I don't understand the "power of two" requirement/preference for webGL textures.  I'll let you read about that on the web and with a forum search.  Something like... both dimensions should be divisible by 128?  64?  256?  I can't remember, and probably never knew it, so how COULD I remember?  heh. 

I think I'll do some experiments with some of those 1024 x 1024 images... see what can be learned.  Most of the things you discovered... seem to be pointing-to image size and image width-to-height ratios.

Wow, again, I can't believe what a GREAT JOB you did with this UVS research and in teaching us what you discovered.  Very nicely done!  You are certainly qualified to help us with our documentation/tutorials, should you ever wish to do so.  I am seriously impressed.  THANK YOU!  Fantastic!  I bookmarked that post in my browser.  TWICE, in fact.

Update:  Here is a 1024x1024 using your #19 playground.  Looking pretty good.  Interesting!  You're a genius, BT!  You are DEFINITELY on the correct trail, here.  Soon, we will have horizon line being parallel to ground, crossing between points 4 and 0.  Yay! 

Errr... is that what the objective is?  I dunno, I can't remember.    I guess we can learn, and have fun, no matter WHAT the objective is.   

[BangTao]

Aha,Good to hear that.Thanks.

16 hours ago, Wingnut said:

https://tinyurl.com/n6ojxng

I've bookmarked that link.

16 hours ago, Wingnut said:

i don't understand the "power of two" requirement/preference for webGL textures.

erm,I can't understand this too...()

16 hours ago, Wingnut said:

we will have horizon line being parallel to ground, crossing between points 4 and 0.  Yay! 

This is a little make me confused,But i'll keep trying~

I found that if we add a texture(1024*1024) on the two triangles directly,the texture will be stretch,The problem is that these two triangles are not "Isosceles Right Triangle",and here i changed the vOffset to 0,and adjusted the positions to make it looks better.

and here i changed the vOffset back to "0.3"

【Update:】OH,that's a mistake,these two triangles still not a Isosceles Right Triangle .seems we can not make them be a Isosceles(cause point0 & point4 is on the Axis,so we can't).

 

[Wingnut]

Cool!  Hey, you accomplished the task... horizon line between 4 and 0.  Well done. 

I think it is "un-natural" for a square picture to be mapped onto a diamond shape. 

Perhaps the BEST way... is to create a horizon picture that is rotated 45 degrees... in 2D painting/image software.

I wonder if we would see ALL 0.0 and 0.5 and 1.0 UVs... if that was done.  hmm. 

I wonder if texture.wAng (texture z-rotation) will be involved.  hmm v2.0.    These darned UVs sure are goofy things, huh? 

https://raw.githubusercontent.com/wingnutt/misc/master/diagorizon01.jpg  (diagorizon02.jpg available, too - rotated 45 degrees the OTHER way)

Ok, now we have a 45 degree horizon line.  Feel free to re-publish those pictures on any server you wish, if wanted/needed.

I installed diagorizon01.jpg in a playground, but I didn't experiment with the UVs yet.  (ok, I did a LITTLE, but they didn't do what I expected AT ALL)  heh

http://www.babylonjs-playground.com/#21VLCN#25

I'm not sure what we might discover.  I think I'll get a HUGE cup of coffee before I start playing.  Perhaps some heavier drugs, too.  heh.  You know about control-drag... to move-around the arcCam target, right?  Often handy. 

Thanks for your time/testings!  I am enjoying working with you... and working on this little experiment.  I think others are learning and enjoying, too.  Be well, party on!  Keep those cards and letters coming. 

Pouet, sorry for all the notifications, if you have them turned-on.    Did you know that EACH standard BJS particle... is a "quad", just like this ribbon?  Yep, except not bent in the middle.  And they are EACH part of a single mesh, like a subdivided ground grid, except their indices are done in a way... so that each grid cell appears as-if each is a unique, separate mesh.  This is what makes them so high-performance.  Standard BJS particles are not really flying mesh... but instead... flying vertices.    We have a Solid Particle System (SPS) that can emit/fly actual mesh.

Actually, all mesh transforms... position, rotation, scaling... are done with moving the vertices, I believe.  I don't like to think... at that low-level, though.  It sort-of hurts my brain.  BJS makes it easy, yet doesn't block the way if we want to "get difficult". 

How's that for circling the topic "back home"?  hehe.  Pretty bad attempt?  Yeah.  lol

[Wingnut]

I'm beginning to think that the diagonal texture is not a workable solution.  heh.  This is WHY Mister Wingnut still doesn't have his UVs pilot's license. 

My "newest idea" is that the picture needs to be upright and level, but also diamond-shaped on square backdrop.  Here is an approximation:

http://www.babylonjs-playground.com/#21VLCN#26

Pretty close to perfect.  AND, all with 0, .5, and 1.0 UVs and NO WANG (texture.wAng)!  YAY!    But, there is probably a LOT of "Wang" where you live @BangTao, yes?    Okay, okay, that joke COULD BE in bad taste, sorry.  But still, pretty funny. 

Okay, I just checked my mailbox.  My UVs "Learning Permit" arrived.  I can drive UVs, but only during daylight hours, and only under supervision of a UV-licensed adult.   

Back into CorelPaint I go, to find a "45-degree corner crop" feature.    I'll be back - someday.

Update:  Alright, I'm back, and... yessir, things are starting to look more sane... with the diamond crop mask thing.  hmm, interesting.  I really like the non-negative and numerically-friendly values... for the UVs, too.  Neat.

[BangTao]

Sorry for late reply~ It's a busy weekend(Study English...Any suggestion?Haha),I'm gonna sleep ,i'll back to work tomorrow ! and take a deep look ~Yeah!

On 2017/4/14 at 8:58 PM, Wingnut said:

I wonder if we would see ALL 0.0 and 0.5 and 1.0 UVs... if that was done.  hmm. 

you  mean that " Set all the U/V-Offset to 0 ? to .5? to 1.0" or ?

On 2017/4/14 at 8:58 PM, Wingnut said:

I'm beginning to think that the diagonal texture is not a workable solution

Look at this,i dont know if this is the output~

On 2017/4/15 at 1:30 PM, Wingnut said:

But, there is probably a LOT of "Wang" where you live

Yep!There a lots of "Wang" in china~it's the second surname(about 7.41% of chinese).

(And...There are some "WEIRD" words(Never saw them before) that i can't understand for now,but i think it's interesting!I'll finger it out~)

[aWeirdo]

My 5 cents on a circular spell-effect, 
imagine something like this with a texture actually made for it; http://www.babylonjs-playground.com/#WHV9W2

Alright, have a nice sunday  

[Wingnut]

On 4/16/2017 at 8:57 AM, BangTao said:

you  mean that " Set all the U/V-Offset to 0 ? to .5? to 1.0" or ?

Yeah.  But... there's nothing wrong with your .75 values, too.  Those are 'sane' values, as well.  And... you successfully nailed ANOTHER version of a 0-4 horizon line... using a diagonal image.  COOL!

I'm learning.  I can smell it.  Thx for the stuff, guys.  I think @kaitek666 is hanging-around with us now, too.  He was the originator of the "corner ribbon" issue.  (that rotten son-of-a-... errr I mean... what a great learning adventure he started!) 

UVs are SO aWeird!  Not as aWeird as @aWeirdo's last playground, though.  I can't get my eyes to focus on that cylinder, and I'm not even hung-over.    Wow!  (Wingy bangs on the camera, but it doesn't help)  heh

Oh yeah, on a different subject... do either/any of you guys have touch-screen devices?  Would either/both/anyone want to test/troubleshoot a (supposedly) touch-active playground?

It uses absolutely-positioned html.  https://www.babylonjs-playground.com/#143CL7#3

(It MIGHT need to be RUN... twice.  If error, press RUN again, I guess)

I don't have any touch devices, but if this thing is working, it SHOULD produce output to console... with touch-dragging on the two blue HTML nodes.  Thx for tests/reports/repairs... by anyone/everyone.    Perhaps, even the red nodes in the middle... move during dragging, too.  JQuery touch code stolen from here.  Thx guys, party on.

[kaitek666]

@Wingnut about touch devices, I have a tablet with Windows 10. If you want my help, I can help you.  Onda V80 Plus

[Wingnut]

Hi gang.  I'm still looking for anyone with mobile device touchscreen... to test https://www.babylonjs-playground.com/#143CL7#3

(might require extra click on RUN)  I have no access to touch devices.

Testers... do you see 2 virtual joystick blue boxes with red boxes inside?  Please open console and do some touch-dragging, see if good messages are going to console... please?  Thx.

This uses abs-positioned HTML, with jQuery.  Main objective... get left VJ (and its graphics) working properly... when placed atop editor area of playground... without using extra html canvas.

thx agn for tests/reports. If broken, fix at will, of course.    Might require bigger blue and red boxes... adjust freely, make more saves a-ok.

(I should probably start a new thread or move this topic to Wingnut Chronicles, eh?)  *nod*

[kaitek666]

I'm really sorry I haven't been able to help you. I had some trouble irl, and now I'm back into game dev I'll message you ASAP

Oh dear, that was supposed to be a private massage to @Wingnut! I cannot delete this now

[Wingnut]

It's all cool.  You'd think, though, that one of these other tablet/touch users would have tested that playground by now.  It's a 30 second test... it's not like I'm asking for the moon and the stars.   

Oh well.  No pressure, k666, thx for being willing to boot it up and give a short report about how broken it is.    Anything goes, here or pm, or both.  party on.

Hope your irl troubles are cleared-up.  That's the most important thing.