Volumetric fog

[eljuko]

Hello there,

 

I was wondering how to create volumetric fog for my future project. First i was thinking to make the fog with particles somehow, but i guess it can't look that good.

 

Any hope getting similar results as in the image below?

 

[julien-moreau]

According to the screenshot, I think you can do it using a post-process with the depth renderer instead of adding objects in the scene but not sure

I'll try it for my pleasure ^^

[Wingnut]

And for my pleasure.    Low-laying fog is very cool.  I'd love to see it laying in the valleys of a heightMap ground.  Unfortunately, to REALLY get great, rolling, low-laying fog, I think we would need to use "fluid dynamics".  Fog acts like a liquid, sometimes.

And, fluid dynamics in JS?  phew.  My cpu would explode from over-torque. 

I thought about using a giant "slab" rectangle for eljuko's challenge... setting half-transparency and then using a post-process BLUR or post-process rendering pipeline BLUR on it.  The only problem is that when the camera is inside-of a half-alpha box, the view is clear... no fake fog.  It looks good when the camera is outside-of the blur/fog box, though. 

Fog is a different system than your average BJS system, that's for sure.  Engine-based.  Unique.  Eljuko, our current fog system can be seen and played-with... at #13 Environment playground demo... http://playground.babylonjs.com/?13 and is documented here.  (environment doc) 

I see no simple way to make the fog lay-low.  I'm not sure how a person would make fog happen only in the area that is.... say... 3 units above y=0.  (waist-deep fog above ground plane).  But there's some real smart people nearby, including professional BJS helper-God Luaacro.  He's a genius.  Superhero.  He's gonna kick this issue's butt. 

[eljuko]

Hello,

 

Thanks for the replies.

 

i suppose i could you use just a plain "plane" and scroll some nice textures on it hoping it wont look completely stupid (i'm no rocket scientist).

 

But let see if Superhero(s) have interest in this 

[spritefire]

I think having a fog that is all the one level of height shouldn't be too difficult to achieve. Just use a pane that covers the area that uses a texture that is grainy and has opacity along with FOD for the horizon. To have the fog move you could use a dynamic moving texture moving very slowly and for when you view below the fog line having a grainy opacity texture on a pane that is in front of the view port (and the pane raises and lowers to meet the horizon of the fog) to give the illusion of immersion and thickness. Maybe also could add the very, very, very slightest reflection (like how the water effects are done) just to make it awesome.
That said this same technique (pane in view port) could also be used for underwater effects too.

That way it is super light weight on the processor (would work on mobile) and easy to achieve.

I don't think you would need fluid dynamics unless you wanted it to have a smoke affect where wind would create currents (which would be awesome) however that unit of the course I am doing to create shaders etc is a few months away so can't create something like that (just yet).

 

[jahow]

I don't think making a textured plane is enough to achieve the result shown on the first post. The trick is that the further away in the fog volume a pixel is, the stronger the fog color will be on that pixel.

 

First of all, there's already a volumetric light effect in BJS that may be interesting to check out: http://www.babylonjs-playground.com/?24

 

I've found this article which may be of interest, if any of you has the time & courage to dive into it Hope that helps.

[Wingnut]

Great comment and link, jahow!  Wow.  Might be #25.

 

Spritefire, getting a still-pic to look like that... yeah, trickery is possible.  Being able to nav a character around and have it continue to look good... much harder.  (you know)   haha

 

Using our new volumetric light scattering (VLS) system... to make a low-laying fog bank, eh?  Now there's an interesting idea.  hmm.  I might try that. 

[eljuko]

Hi,

 

will keep this all in my mind once i jump in to it.

 

Wingnut, can you throw a snapshot if you get nice results? i'd gladly see what's the VLS capable of.

 

 

- thanks 

[Wingnut]

Hi again, eljuko, and other forumers!  Hope you (and the rest of the forum gang) are well.

Well, my intent was to just try radiating some VLS godrays up from a basic ground plane... but...  that seemed too boring for a Saturday morning (you know, cartoons and all). 

So... the particles system.  erf.

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

(that PG - temporarily broke, check back soon)

It's ok, and not ok.    That's some THICK FOG, eh?  *nod*  Around 29000 particles in a low-laying rectangle.  61 rows/units by 61 columns/units... 7 units deep.  (1 unit spacing between particles)  Alternating rows are shifted .5 units toward -x (to make it look less like a farmer's field - fill in the gaps between particle columns a bit).

Like so many of my other particle demos (see The Wingnut Chronicles pig-thread), I localize (put it into my code) the entire BJS ParticleSystem, and then hack-away at it.  In this demo, I made modifications to about 30% of the BJS ParticleSystem, so, when optimized/cleaned, about 70% of the particle system code can be removed from the playground/project.

Set line 21 to true, and you have each particle being a VLS godray emitter, too.  Can you say FPS hog? 

Other fun adjustments include particle color1, min and max sizes, particle texture, godrays exposure.  I have color1 set to dark grays, currently (line 548), but there is such a HUGE concentration of particles in a single place... that it all appears white... and still quite thick. *scratch scratch*

There's TONS of things to tweak/adjust in that demo... and I can explain more about "the hack" later, if you want to hear more.

Anyway, grab a zip, take it home, hack away, consider it your code.  Or play in the playground and make more saves (anybody)... and tell us the URL's to successes (or to failures, too).

Or maybe ignore the demo, and me, because... it just "ain't doin' it". 

Good luck, be well.  I may still try a VLS godrays solution WITHOUT using particles. It depends on which cartoons I watch for the rest of the day.  Or maybe I'll watch a John Wayne movie and try some super-macho solution.  heh

There have been SOME reports that the fog isn't working the first time.  Reload until it works (in theory).

An interesting challenge, eljuko!  For being a newbie, you sure do know how to bring us "professional-grade" adventures to try. 

[Wingnut]

Ok, I tried another version of the "low-laying fog" challenge 

http://playground.babylonjs.com/#5R8A1

50 layers of thin white boxes with decreasing .visibility as the stack gets taller.  Looks ok as long as you don't nav-around too much.

The shift variable should be set to 0 for a linear stack.  I made the stack shift sideways a bit, just for fun.

This playground has a little extra feature.  It talks to you (text).  Yet another way for Wingnut to yap. 

[Vousk-prod.]

Nice !!

Wingy your fog is really convincing from above. Not sure this method of multi layering could be applicable in real case, but it's nicely done.

Also love your yapping HTML DOM text! Great idea, as always!!

[jerome]

Wingy

Well, it's slow on my old computer at home (10 fps)

But really really convincing !!!

And so funny   : speaking PG !

I like this way of faking too... maybe 10 layers only would have do the job with best perfs ?

http://playground.babylonjs.com/#5R8A1#1

less convincing... : 10 layers only, but bigger to give impression of far distance, greater scaleY too (30 fps)

[jerome]

Both example run at 60 fps on my pro desktop computer, yeeaah

nice job Wingy !

[Wingnut]

Thx.  Fun.  We could probably increase performance even more by NOT putting a different material on every box.  Since .visibility is not a .material property, all the layers could use the same material.

 

But as it is, a person COULD change the diffuseColor of each layer... slightly.  They could even put a black and white (all grays) fire texture on some middle or upper layer(s)... and its moving "vapors" could be seen from above.... because the upper layers are very transparent.

 

And how about an all-grays fireTexture on EVERY layer?  Wow. All the same fireTexture?  Each layer has its own?  Lots of fun to be had... when using "the stack" method.  Fisher-Price and Playskool, eat your hearts out.    Ain't NO toybox like a BJS toybox.

[jerome]

Another idea... don't know

Well, when you give to vertices of a same face different colors, the GPU interpolates colors when rastering

 

Let's know imagine you could do the same with alpha, not color.

Probably a new fragment shader would be needed (well, a new kind of material) to create some alpha gradient along the height of the mesh.

 

So we'll do the job with a lone mesh with this kind of material.

 

 

Any thoughts, GLSL experts ?

[eljuko]

Hello,

 

Sorry for late reply, been kinda busy at work playing heroes of the storm  .

 

Wingnut, that sure looks amazing! Getting stable 60fps with both, no problems. I'll look closer once i land back to my PC

 

For being a newbie, you sure do know how to bring us "professional-grade" adventures to try.  

 

    - I'll do my best 

[Wingnut]

Thanks Eljuko... good to hear that we might be on-track to accomplish the challenge.    It's been fun so far.

 

Jerome... just maybe, we have alpha interpolation already built-in.

 

https://github.com/BabylonJS/Babylon.js/blob/master/Babylon/Materials/babylon.standardMaterial.js#L302

 

Only mentioned once in that class...

 if (mesh.hasVertexAlpha) {    defines.push("#define VERTEXALPHA");}

Where is it used?  In the default shader (a gorgeous work of art, by the way)...

 

https://github.com/BabylonJS/Babylon.js/blob/master/Babylon/Shaders/default.fragment.fx#L677 ...

#ifdef VERTEXALPHA    alpha *= vColor.a;#endif

This means... if we use Color4 data for our vertex colors (which includes an alpha component in the 4th slot), and set the mesh.hasVertexAlpha = true... we should be fartin' through silk.

 

And we are:

 

http://www.babylonjs-playground.com/#1UHFAP#5

 

Line 132... blankmesh.hasVertexAlpha = true;  // Turn on the magic!

 

Line 78 area - the colors array.  All are now type color4.  Points 0 & 1, no alpha... they are at the top of the mesh.  Points 6 & 7, half alpha... they are halfway-up the mesh.  The remainder of points... all low on the mesh and high on the alpha. 

 

SO cool.  Deltakosh sure takes good care of us, eh?  There's MANY toys in our BJS toybox that we haven't even discovered, yet.  I'm going to build a statue of Deltakosh on my rental apartment front lawn.

 

Jerome, since you were the one to think-up this idea (the second time - apparently Deltakosh nosed you out for first time)... then you should be the first to try the one-box low-laying fog.  (if you wish).  I think you are going to hit one big show-stopper.  When the camera goes inside-of the fog box, I think the camera view will go "clear"... showing no fog.  That is prevalent in my demo, too.  Alpha is a surface thing, not a "volumic" thing. (Wingy grins at Jerome about the term "volumic", again.)  We had this issue with the other attempts, as well.

 

But still...good job, Jerome and Deltakosh.  This "dithered alpha" has lots of applications/uses, but maybe not for this.  All in all, this is still a feature/idea that rocks!  I love it.  Party on!

[jerome]

http://www.babylonjs-playground.com/#1UHFAP#6

 

You were right : alpha is interpolated as well by default !

 

Just changed quickly the shape (convex now), colors (only white), alpha (from 0.4 to 1) and deleted the speculars.

It could do the job after some refining, I guess : no more light reflection and better gradient. Or a better material applied.

Don't know ...

[Wingnut]

nod... that demo was used to experiment with the red and green specular "triangle" reflections that would "travel" in-to and out-of the concave areas... when you navved the camera in a certain way.

 

I was doing puppy-level experiments with lighting normals and light placements... to see if/how I could enhance those pretty specular triangles that happened in the dents. 

 

Lighting for plotted mesh... 101.    The scene has (had) lots of unnecessary debris from those experiments.

 

http://www.babylonjs-playground.com/#1UHFAP#7 (full alpha)   See the exciting green specular triangle in the hole?  Some mathematics somewhere... decided that should be there.  heh

 

And then we puppies learn about BJS "supercolors"... the abilites to crank color levels all the way up to level ?.

 

http://www.babylonjs-playground.com/#1UHFAP#9

 

line 16... I use a supercolor level 3 for my light's specular color.  BOOM, the triangle lights-up like neon.

 

Maybe someday we'll allow BABYLON.Color3.Blue(5) =>  Color3(0, 0, 5)  (mad scientist at work)

[jerome]

I didn't even know we could go higher than 1 for rvb values !

[julien-moreau]

Hey I still never tried to do using a post-process !

But, the effect you're searching for, will you set the camera into the fog ? Or always over it ?

 

Maybe you can use a procedural texture applied to a plane ? I'm maybe wrong, what do you think ?

This method is according to the Wingnut method with the planes (2nd example)