Physical Engine==>Custom Firework demo needs help

[BangTao]

helllo.i wanna create a firework(which can get every instant of it),here is the PG/

http://playground.babylonjs.com/#OHXA1#0

 

I can hardly controll the explode range(line 35-37).

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

 

is there some  ways that  can optimization it to make it more Fluent?

[Wingnut]

Hi BT.  Did you mean "more fluid"?  I don't know much about Fluent programming techniques, sorry.

Can you use particles instead-of physics mesh?  Particle systems have a .manualEmitCount that allows pulses of particles that CAN simulate fireworks explosions.

http://playground.babylonjs.com/#206JUO#12

Getting a spherical or circular emit-pattern from our STANDARD emitters/fountains (mesh or vector3)... is not necessarily easy.

BUT, once upon a time, I did particles in 3DS Max... that emitted from each vertex of a mesh, and the particles that emitted from each vertex... were colored the vertexColor of THAT vertex-emitter.  Some local hero created the same thing for us, here.  (Can't rem who, but I would hug them again. I LOVE LOVE LOVE particles spraying from verts.) 

http://playground.babylonjs.com/#2A4NUR#16

Demos #2A4NUR 1-15 are cool, too... worth touring for fun.  Above (#16), I am NOT using a .manualEmitCount (instead continuous flow)... and I am scaling the emitter/fountain sphere.  Looks cool, huh?  You could make the emitter sphere invisible, then use .manualEmitCount to "pulse" the particles out-of the sphere.  Doing that, I think you could get spherical/circular shapes to your fireworks explosions (even MORE realistic).

BJS particleSystems also have provisions (thx DK) for easily using 2 custom functions (you can override default funcs).  One u-change-it func is for starting and initially-positioning spawned particles.  Another over-ride-able is for updating each particle during each "step" of their flight.

So, for example, using a custom update function, you can change per-particle parameters mid-flight. It is a little CPU-heavy, but fun. 

Below... is a playground that uses custom startPosition and custom update funcs.  The update function does particle color and size changes... on-the-fly... for each particle. (lines 26 & 27)  It makes them sparkle! (with the help of an excellent "star" texture created by someone unknown.) 

http://playground.babylonjs.com/#1CMD3G#18

You'll see me "wedge-in" the custom update and custom startPosition funcs at lines 136 and 139.  Here's a link that talks more about it. 

http://www.html5gamedevs.com/topic/27266-sps-and-gryff-the-end-of-the-world-as-we-know-it/?do=findComment&comment=156718

Anyway, too much talk.  I hope you consider using particles instead of physics.  Particles have good performance (when not doing demented Wingnut experiments that slow them down). They react well to scene gravity, or allow a custom gravity, and their flight trajectories are pretty good, especially when being emitted by vertex points.    (I wonder what a heightMap per-vertex-emitter would look like)  heh.

You can also use many particleSystems at the same time, and they can share emitter mesh or emitter vector3 points.  Particles are a decent (and safe) fireworks tool.    Be well, party on.

PS: Particles ARE mesh... or... actually... each particle is one "quad" of a sub-divided ground or gridded plane.  Highly efficient.  Each particle flies through space... by moving its few vertices... and not via standard mesh .position or .rotation.  Each particle "billboards" - it stays facing the camera.  (not necessarily true in our Solid Particle System, but we'll talk about that... another day.)

[BangTao]

@WingnutI've tried to use particleSystems,and。。。。。Haha ,it's did better than physics,and i can also get the particle's position after i read this:

20 hours ago, Wingnut said:

http://www.html5gamedevs.com/topic/27266-sps-and-gryff-the-end-of-the-world-as-we-know-it/?do=findComment&comment=156718

and there still has problems:

1.   I still can't get the max particle's(X、Y、Z) and min particle's(X、Y、Z) range(it's like the BoundingBox's Size),,,is there a method or a formula that i can do some calculations to get these values?
2. see this PG(please wait 10 sec),why the explosion didn't look like a sphere but a Box?any other ways to set the direction?(I only fonud direction1&direction2)

[Wingnut]

Hi BT.  I think you are doing great.  Keep experimenting.

1.  If you DID have upper left and lower right positions of a single particle "bounding area", would that be somehow useful?

1a.  Are you wanting values for the upper left and lower right of the entire "group" of particles?  Would that be somehow useful?

2.  The square-ness of the fountain... MIGHT be caused by having .minEmitBox and .maxEmitBox == 000.  Consider using different values, there.

Advice:  Turn off physics/launch (the mortar and shell) for now, and work-on ONLY the "report" (the blast/pop).  Perhaps build BangTao's Particle Popper Laboratory.  A confetti popper factory.  heh.   REAL fireworks "report patterns" come from shell-packing methods... AND fancier tech.  They sometimes use "bouquet" shells, which are shells with other shells inside.  This allows for different "stars" to travel at different speeds... after the pop.  So, if you REALLY REALLY want to get realistic fireworks... you will need multiple particle systems operating at the same time. 

You could also "hack" our current particle code, and turn it into a "multi-channel" particles system, but the perf results could be similar.  The BJS particle system is somewhat easy to understand and easy to hack-on.  For now, let's pretend you will use more than one PS.

Notice that directional updating... is done in the update function.  So, YOU get to say how each particle flies.  You also are allowed a custom start-position function, so you control where they start, too. Think about that power.  YOU are the God of your particle systemS.

Shooting particles from the verts of a sphere... is easy.  The code is in the playgrounds above... and if you would become a professional at setting sphere vertex colors (colorKind data on the vertexData object for the sphere)... then you could make colored "stripes" on the sphere.  Next, squish it like a pumpkin... squatty.  Set its subdivs real high... and .manualEmitCount = 5000.  POOM.  Was it pretty?

The important part... learning how to "paint" a sub-divided sphere... using colorKind data (color per vertex).  When you use that nicely colored sphere... to fire stars from its vertices... it SHOULD look nicely multi-colored.  You can hide the sphere with .visibility, like line 17 in this pg.  Now pretend there are FOUR hidden spheres, with a particleSystem hooked to EACH ONE.  WOW.  Or, maybe one little sphere, one medium torus, and one tall thin cylinder. 

And guess what.  BangTao is going to turn-on .manualEmitCounts on everything, all at the same time, for 1 second.  POOM!   heh

Multiple particle systems, multiple particle sizes, multiple colors, directions, and multiple "spheres".  Cool. 

Yeah, I know... firing stars from vertex points on mesh... IS a bit slow.  But, it is somewhat already coded.  Again, you can do custom particle systems with custom "start" and "update" if you wish.  I think... direction1 and 2 define a range... the upper and lower limits of system-provided random values.

Remember custom startPosition and custom updateParticle.  Using simple sine and cosine, a person could "start" particles in a circular pattern.  In update func... each particle can be checked.  Investigate its property values.  Fancy stuff COULD be done (like a BJS particle system custom designed for fireworks).  But if you can afford perf loss, then consider using hidden (custom painted) mesh and firing particles from their verts... to get patterns.

SOME people can live-move particle start locations, perhaps managing an "emitter state", and make pretty Fibonacci snail patterns and fancy junk... with math from their brains.  Not me, though.  Math hates me. 

So, are you going to enter sphere-coloring school?  Become a God of setting vertex colors on mesh? 

Remember PlayDoh Fun Factory?  You "pumped" the PlayDoh through "cookie cutter" templates... to make pretty shapes.  In a way, emitting particles from mesh vertices... is similar.  The shapes and colors of the (hidden and highly-colored) mesh... is the cookie cutter.  Sort of like swap-able "nozzles" on the fireworks machine.    Collect a toolbox of sphere colorizers... little pieces of code... each makes a different color mesh... for spraying particles-from. 

Sorry, Wingnut just RAMBLING on and on... no real purpose.  heh

[BangTao]

@Wingnutaha,this is really a good "RAMBLING",I benefited a lot。thank u so much,and with your help,i did some changes,look at this PG. Although i still not familiar with PS,but i found that  it become more and more interesting（Imagination is "Power"）,i'll keep investigating and perfecting fireworks.

I don't know what to say but thankful for your support,。

and i know one thing which is "Why it explode like a square not a sphere",

cause the direction1&&direction2's range==>Eg:X from -1 to  1;Y from -1 to 1;Z:from -1 to 1,that's exactly a Box,how come it'll be a sphere?

[Wingnut]

  My pleasure.  Good to hear, thx!  

Why is 'emitBox' not a sphere?  GOOD QUESTION!   I think we need to be math professors to understand why.  heh.

BUT... did you see my dome-of-stars demented experiment?  http://playground.babylonjs.com/#J6ZLH#5

Line 10 is the particle start-position custom func.  Line 20 is the update-each-particle-each-step custom function.

Look at lines 31-39.  That is code from BJS normal particle updater.  I just ignore it.  Nope, Mister JS, you won't be doing any addInPlace or scaleToRef (flying) MY particles.  I need MY particles to stay where they started.  At lines 140-152... I don't even set gravity or direction 1/2 values.  MY custom update function ignores them, anyway. 

GOD of particles.  Taking control.    Particle Choreographer.  Can you "design" a particle dance number... with 5000 particle dancers, and not have any stage stumbles? 

(how le femme)

Anyway, I had to steal code from the Cartesians, and then Theta and Phi got involved, and it all got ugly.  My startPosition needed lots of help. 

Apparently, getting things "spaced" in a spherical way, is not easy, worldwide. 

And apparently folks don't like the "flocking" near the poles, either.  Flocking poles.  hrmf.  I guess they want perfect distribution/dispersion of particles.... whomever "they" are.  (Wingy tosses a k-ration from a Russian military plane as if flies over the north pole). 

Circular things... (flat, not spherical)... are a little easier.  Check out lines 3-11 on THIS circle-maker playground.  Not sure, but I think I have seen SOME fireworks... be tilted upright, or aimed relative to the launch point.  That type would be less-reliant on gravity, and more a "blast it toward/away-from the audience" report.  Let's call that... a "vectored report", ok?  Easier to type.  Target-able report, rotation-wise, including aiming straight up or down... but not dependent upon gravity to accomplish that.  SIGH.  Damn, describing stuff SUCKS.  I'm pooped!  heh.  Like ANY of us REALLY wanted to study fireworks technology at this time in our lives.

You could easily mod my wall-of-emitters... into a circle-of-emitters, right?  Perhaps a very tiny circle.  Notice they are not mesh.  Each nozzle is a vector3.  Each nozzle shoots almost straight up (see lines 167-168, and lines 29-32 where those directions are applied to the particles).

You would do start-position settings based-upon sin and cosine stuff in lines 8-9 of the circlemaker.  Try to avoid pre-making the positions like I did.  Try to "derive" the next position... "just in time".  "Stream" a "flow" of vector3's into ps.emitter.  It's a propeller, when you get it working properly. 

But... what if you could do direction updating (all the addInPlace/scaleToRef stuff)... based-upon the sin and cosine, too?  You would then have 18 vector3 emitters... in a circle... all firing (direction'd) outwards.  Spokes generator.  Many of today's fancier fireworks... do a fast spokes-background first... beams or flower petals.  Can you make a "Spokes Nozzle"?  (Opposite of the low-powered water-bubbler nozzle).

Okay, now you have some more formulas for your "fireworks nozzle design company". Grab a fresh toddy and The Spherical Coordinates Manual, and may your horse be with you.    Anything is possible.

[Wingnut]

@Richard C and I have been working on some particle emit-patterns... doing some playing.  Richard is now at the point... where he MIGHT want to try using custom functions that can easily be installed in our standard Babylon particleSystem.  These three functions (and easy user-intervention/customization points)... can be used to really "take command" of a particle system.

Anyway, I was making a playground for the Richard C project, and I thought it would be handy for THIS thread, too.

http://playground.babylonjs.com/#1PQT7P#27

Just a deep box, using large .emitBox Z-axis values, and also with .direction1/2 set to spray particles into the upper-left quadrant (up and left).  Nothing TOO fancy, there.

BUT, this demo has all three customizable funcs... already "hijacked" into the playground (lines 17-57)  (big-time hacking fun areas!)

They are still "default"... essentially identical-to BJS 2.5 core code.  No customization has been done at all (to the 3 custom funcs). 

So, this playground is a nice "experimenter's starter kit"... for those who want to play-with custom functions for a standard BabylonJS particleSystem.  Do experiments, make mores saves, grab a zip, try to blow up the world!  Talk more soon... party on.

[BangTao]

@Wingnut

Hi,Wingnut,Check this

http://playground.babylonjs.com/#ZXI9H

Is there a way to delay method execution?these two explosion are happened at the same time...(Lines:77-79,and the "version1Firework" Func is at Line 130)

(I-|)

[Wingnut]

NICE!!!  Well done!  Yeah, you can use the JS setTimout method... to delay a func execution.  Lines 156-160 of this fascinating playground.  msWait ==1000 means about 1 second delay... between box spawnings.  Currently set to 200 (about 1/5 second) in line 166. 

Keep up the pro fire-working, BT.    Looks great.

[BangTao]

@Wingnut 

Yeap!and that works~

But there is a new problem that i can't use "PS.dispose()" method,cause this seems will dispose all of the ParticularSystem(i'm trying to create more than 5 PS.)~~~~

http://playground.babylonjs.com/#ZXI9H#2(Line 81)

how can i remove each PS's particulars and it's meshes?(Like it didn't created?),i can not control it.

I'll keep working 

 

I've solve!

[BangTao]

@Wingnut

Check this.haha

http://playground.babylonjs.com/#J6ZLH#6

[Wingnut]

BEAUTIFUL!!!  Coooooool!  I bookmarked that one twice.