I need this vertical fog shader converted from threejs to babylonjs (latest) code.
In addition, I will also need a typescript BJS implementation done (playground works too).
Basically looking for the same result that can be found in the link below, but written with babylon instead of three.
Link to threejs implementation here.
The result should work with GLTF/GLB files as well (example showcases just simple meshes but I assume that’s not an issue).
Hello and welcome 
You can have a try using the Node Material Editor using the Y coordinates as alpha for example.
And then import the shader in the Playground
++
Tricotou
Hi there and thanks for the warm welcome!
The effect you compiled looks great however it’s not what I’m looking for.
If you check out the threejs version you will see what I mean.
It makes use of RTT and is basically a shader material that is assigned to a plane mesh which you can then shift around the scene, thus getting a vertical fog effect.
The orange blocks are just there for the demo, their material is not updated.
Maybe you can use this node material as a base to modify for your purposes?
Linear Dissolve Effect | Babylon.js Playground (babylonjs.com)
Alternatively create your own color set. The shader is only for considering the alpha channel. demo
Hey there and thanks a lot for these useful Playground links however this is not what I’m looking for in terms of end results.
Please take a minute and check out the threejs example so you can better understand what I mean.
I am not looking to replace any materials on meshes in the environment but rather create a Plane mesh to which I assign this ‘Directional Fog’ shader material in order to obtain the desired effect.
You can use the depth map of the scene and use it for the plane material by doing an exponential blend with the background based on the depth value
Ok I see. Sorry for misunderstanding.
I think what you want is a custom post process : Playground
That way you can code your own VertexShader + FragmentShader and apply the whole scene regardless of any other materials on meshes
That way you can take into account any direction for the fog, input a mesh coordintate as parameter, or whatever
++
Tricotou
So far I can understand you need a volumetric fog which I found recently in the docs of Babylon:
Examples: Load glTF model | Babylon.js Playground (babylonjs.com)
i know it is a bit unrelated but I also like that approach: Low Lying Fog | Babylon.js Playground (babylonjs-playground.com)
Hah if only it were this simple!
Using particle systems was one of my original attempts.
I gave it up due to the particle textures clipping into scene geometry. (PG)
I am currently looking into what the guys above suggested and will revert asap.
Ok I updated in a poor way the volumetric fog sample:
Examples: Load glTF model | Babylon.js Playground (babylonjs.com)
look at line #297, I create a top vector to compute the distance from.
The rest of the code use that to evaluate the fog
Thanks, I get what you did with the ‘top’ vector and this is definitely a good start!
Is there an easy way to make this shader output a “rectangular” fog rather than a circular one like it does now?
The distance is based from a center but you can only make it based on distance on Y
Bingo! It works!
Here’s the updated PG with working directional (Y-only) fog (sloppily written but anyone’s welcome to improve it!).
Thank you @Deltakosh @CodingCrusader @Tricotou @CrashMaster for all your useful input!
