solved Fog Density

[DylanD]

Hello everyone,  

I was wondering is there a way I could use scene.fogStart and scene.fogEnd, but with the scene.fogMode = BABYLON.Scene.FOGMODE_EXP,  or EXP2, where fogStart and fogEnd just changed where the fog starts to show, that way there is not hard maths involved(just a simple if(fogPos>fogstart){fog.alpha = alpha}else{fog.alpha = 0}. something like this).  Im not sure how to go about this because from what I understand fog is a function in the BABYLON.Scene, which I dont think I should edit, and dont know how I could edit and still keep it in my game. 

So what I would like to know is, can it be done, changing the fog to the above ideas, and if it can be done how should I go about it, is changing how scenes work really the only way, would it even be as difficult as I think?

[DylanD]

to add on this, my understanding of fog in BABYLONjs, 

I am under the impression that with fog linear, the fog starts from the camera position plus the fogStart, in a sphere around the entire camera, then another sphere that is fogEnd, which is where the fog stops.  Inbetween the two spheres is fog that gets thicker the farther away it is from fogStart sphere.

I would like this similarly with fog density but I would like to be able to start it offset from the camera so that the player can see better.

[Guest]

Hello you can find how the fog is computed in shaders right here: https://github.com/BabylonJS/Babylon.js/blob/master/src/Shaders/ShadersInclude/fogFragmentDeclaration.fx#L13

To keep shaders fast, we cannot add "if" statement as this will drop the performance drastically

[DylanD]

is there a way I could override the fragment portion of that shader, without impacting anything else?

In just my game.

[Guest]

Sure, just write the new code to BABYLON.Effect.IncludesShadersStore["fogFragmentDeclaration"]

[DylanD]

I did not think it would be that easy.

Would this overwrite the fogFragmentDeclaration permanently or only while the new declaration would be in my code?

I dont want to start changing this if its going to cause a large problem.

[Guest]

It will change it permanently (I mean for the page lifetime)

[DylanD]

2 minutes ago, Deltakosh said:

It will change it permanently (I mean for the page lifetime)

hmm just to make sure I understand, 

if I put this in my code:

BABYLON.Effect.IncludesShadersStore["fogFragmentDeclaration"]='#ifdef FOG

#define FOGMODE_NONE    0.
#define FOGMODE_EXP     1.
#define FOGMODE_EXP2    2.
#define FOGMODE_LINEAR  3.
#define E 2.71828

uniform vec4 vFogInfos;
uniform vec3 vFogColor;
varying vec3 vFogDistance;

float CalcFogFactor()
{
	

	return 0;
}
#endif';

then it will over ride it, if I load my page,  I will look like the shader above describes.  

But if I take that declaration out of the code,  then reload the page it will be back to normal as if I changed nothing?

[Guest]

Correct

[DylanD]

Hey @Deltakosh, I just started trying to edit the fog, I thought it would be the same as making a shader for shaderStore, but I can't seem to even figure out how to declare it... 

Here is what I tried:

https://playground.babylonjs.com/#5WJ0FD

but that didn't seem to work at all, the console doesn't say anything.

How should I go about starting the declaration?

[Guest]

Here we are: https://playground.babylonjs.com/#5WJ0FD#2

you need to use ` instead of ' to create multiline strings in JS

[DylanD]

Oh my gosh, how did I miss that ? , that is frustrating

Thanks DK!

[DylanD]

This worked great!!

https://playground.babylonjs.com/#5WJ0FD#3

[Guest]

Glad to hear

[DylanD]

On 8/29/2018 at 12:44 PM, Deltakosh said:

Sure, just write the new code to BABYLON.Effect.IncludesShadersStore["fogFragmentDeclaration"]

Hey, im trying to clean up my code, and put shaders in files, and then organize then into a shaders folder.  I tried putting this. fogdeclaration into a .fx file just like the rest of my shaders.  However it doesn't get instantiated like the other shaders i believe, so it doesn't directly call this shader file.  Any ideas about how i could keep this shader in its own file, without over writing the original shader permanently.  Just calling this one...

 

[Guest]

You cannot have your file in a separate folder unfortunately. But you can trick it to make it work: Just add some code that will first do an xhr to read all your files and store the results in the Effect store.