luan_ngo

Particle Alignment

Recommended Posts

Hi everybody,

I'm trying to create a ship wake effect similar to the one below.

 w8.jpg

 

I'm using a particle texture but am having difficulty aligning the texture properly. 

I've turned off billboard based particles, so that it would not face the camera. But, it current is aligned in the direction that the particles are being emitted. I'd like to rotate it 90 degrees along the y-axis but can't figure out how. Any suggestions?

 

 

 

wake.png

Share this post


Link to post
Share on other sites

Hi LN, welcome to the forum.

I did some playing... using two particle systems.  I didn't worry too much about particle textures.  I just used a simple "flare" texture.

https://www.babylonjs-playground.com/#1WROZH#61

I actually did lots of playing with... particle directions, emitter locations, and emitboxes (nozzle dimensions)... making sure the particle sprays were flat.

And, I made them spread outward, and connected some of the ps1 and ps2 values... to ship.throttle.  (for testing fun)

Ps1... on the bow... uses a tiny emitbox (nozzle).  The ps2 stern sprayer... uses a wider emitbox/nozzle... but its particles don't fan-out as wide as ps1.

Gravity on both particle sprayers... are aimed -z.  That is a strange direction for gravity to pull, but it works good for making waves/wakes, eh?

Now you can think and play, do some edits, save more playgrounds, have some fun.  You can't hurt anything in the playground app.  Make edits, saves, grab zips, paste-in code from other playgrounds, have a good time.  Paste URL's to more saves... into fresh comments here... if you want to talk about one of your saved playgrounds.

I hope this method will work for you.  Less worry about textures, but more concern about fan-outs and gravity, etc.  Notice that no emitbox values or directions... have any Y-values.  That's what keeps the particles spraying "flat". 

Feel free to ask questions, make comments, show your versions, and maybe wait for ideas from more forum folk.  Talk soon.

A little extra:  particle system emitters... can be vector3's as I used... OR mesh/objects.  These mesh object particle emitters can be invisible, and parented to the ship (probably what you want).  In this case, you would reduce the maxEmitPower on the particle systems... making them emit at about half the speed I used.  Why?  If you look at the wake of a real ship... the "thrust boil" is indeed moving away from the ship, but also... the ship is moving away-from the thrust boil.  In short, the ship is leaving the particles... and the particles are also leaving the ship-emitters (which would now be carried WITH the ship - parented).  It will take some "tweaking" to determine HOW it looks best.

https://www.babylonjs-playground.com/#1WROZH#62  A little more goofing around... parenting emitters to ship, turning off gravity, moving the ship around a bit.  Rough.  :)  Luan_ngo /others can surely improve this.

Share this post


Link to post
Share on other sites

 

Wow, thank you for the incredibly detailed and helpful response. I was able to achieve a similar result with CesiumJS and wanted to play with other approaches to achieve the wake effect. The problem in Cesium is that it consumed a lot of processing power, but I'll play with BabylonJS to see whether it's more efficient under this approach. 

Thanks for your help!

wake2.png

Share this post


Link to post
Share on other sites

Here's my attempt to hack together a scene:

https://playground.babylonjs.com/#BF7SWW#36

The lines relating to the particle begin at 177.

Also, I searched the forums and saw that there is a limitation re: particles and alphas. Is it still the case that particles won't display overtop of meshes with alpha channels or has this since been resolved? 

Finally, I want to say great work with the documentation and examples. At first, I was fairly intimidated to make the switchover from CesiumJS to BabylonJS. But, it only took me a day or so to put together a rough scene that I was happy with. A lot of it is thanks to the detailed documentation on the website. 

Share this post


Link to post
Share on other sites

All good! It works pretty well. 

https://playground.babylonjs.com/#BF7SWW#41

But, I've moved to a SPS because my ground tiles have opacity textures. 

https://playground.babylonjs.com/#BF7SWW#43

You can see my implementation of it in the picture below. Thank you both for your help on this. 

I am experiencing issues with screen flicker across my entire scene, but that's likely because my scene spans some couple of hundred thousand pixels. I'll ask questions about this in another topic!

wake3.png

Share this post


Link to post
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.

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

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.