I tried to document what is happening. Your best bet would be to look at the default shaders. I would strongly recommend duplicating the Unshaded material as a “base” material for all of your experiments and trying out stuff on that. Let me know if you get stuck but I’m sure a lot of it will come together as you play about.
In my material definition somewhere…
Float FogDistance : 100.0
varying float dist;
dist = distance(vec3(0, g_CameraPosition.y, 0), (g_WorldMatrix * modelSpacePos).xyz);
vec4 original_output; // your original gl_FragColor (presumedly).
// get the middle distance. Biased for effet.
float mid = m_FogDistance * 0.45;
float fade = min(1.0, (m_FogDistance - dist) / mid);
// lets do some math using default values.
// (100 - distance of camera) Divided by mid ( = 45.0 )
// Pick any distance, say 90% of the furthest distance, so that would be a nice round 90.
// fade = (100.0 - 90.0) / 45.0; = .0.2r
// about 22% fade because we biased the original mid-point.
// The result is polar to our requirement. Make note of that.
// Choose a fog color.
// some kind of very-slightly blue-grey....
vec3 fogColor = vec3(0.65, 0.65, 0.71);
// mix the original output with the fog color by the fade value.
// Note the value is polar, so ensure the order of input to reverse the effect.
vec3 resultCol = mix(fogColor, original_output.rgb, fade);
gl_FragColor = vec4(resultCol.rgb, 1.0);