### Intro

Fog is very popular element in computer graphics, so popular that in fact we are always introduced to it early in textbooks or tutorials. However these textbooks, tutorials and even APIs only go as far as a simple distance based color blending, and stop there. Even advanced demos, interactive applications and games go no further that the simple color blending. Hopefully one can do much better and introduce some extra beauty and/or realism to the images with very little additional work on top of the basic idea.

### Colored fog

Traditionally fog is introduced as being the visual element that gives distance cues in an image. And indeed the fog quickly helps us understand the distances and therefore scale of objects, and the world itself.*Without fog it's not easy to tell the scale of the terrain*

*With fog we immediately understand the size the terrain*

vec3 applyFog( in vec3 rgb, // original color of the pixel
in float distance ) // camera to point distance
{
float fogAmount = 1.0 - exp( -distance*b );
vec3 fogColor = vec3(0.5,0.6,0.7);
return mix( rgb, fogColor, fogAmount );
}

vec3 applyFog( in vec3 rgb, // original color of the pixel
in float distance, // camera to point distance
in vec3 rayDir, // camera to point vector
in vec3 sunDir ) // sun light direction
{
float fogAmount = 1.0 - exp( -distance*b );
float sunAmount = max( dot( rayDir, sunDir ), 0.0 );
vec3 fogColor = mix( vec3(0.5,0.6,0.7), // bluish
vec3(1.0,0.9,0.7), // yellowish
pow(sunAmount,8.0) );
return mix( rgb, fogColor, fogAmount );
}

*Note how fog colors tints to yellow in the background mountains near the sun*

*Final image (Elevated, 2009)*

Another variation of the technique is to split the usual mix() command in its two parts, ie, replace

finalColor = mix( pixelColor, fogColor, exp(-distance*b) );

with

finalColor = pixelColor*(1.0-exp(-distance*b)) + fogColor*exp(-distance*b);

Now, according to classic CG atmospheric scattering papers, the first term could be interpreted as the absortion of light due to scattering or "extinction", and the second term can be interpreted as the "inscattering". We note that this way of expressing fog is more powerfull, because now we can choose independent fallof parameters

*for the extinction and inscattering. Furthermore, we can have not one or two, but up to six different coefficients - three for the rgb channels of the extintion color and three for the rgb colored version of the inscattering.*

**b**vec3 extColor = vec3( exp(-distance*be.x), exp(-distance*be.y) exp(-distance*be.z) );
vec3 insColor = vec3( exp(-distance*bi.x), exp(-distance*bi.y) exp(-distance*bi.z) );
finalColor = pixelColor*(1.0-extColor) + fogColor*insColor;

This way of doing fog, combined with the sun direction coloring and other tricks can give you a very powerfull and simple fog system, yet very compact and fast. It's also quite intuitive, and you don't have to deal with tons of physics, maths and magic constants for Mie and Rayleight spectral constants and stuff. Simple and controlable is the win.

### Non constant density

The original and simple fog formula has two parameters: the color and the density (which I called*in the shader code above). Same way we modified it to have non constant color, we can also modify it so it doesn't have constant density. I'm gonna follow Crytek's trick in this one, but you can play and get some cool results with your own formulas too, although the derivation in that case might be a bit more complex.*

**b**Real atmosphere is less dense in the height athmosphere than at the sea level. We can model that density variation with an exponential. The good thing of the exponential function is that the solution to the formulas is analytical. Let's see. We start with this exponential density function, which depends on the height

*of our point:*

**y**d(y) = a⋅e

^{-b⋅y}

The parameter

**controls, of course, the fallof of this density. Now, as our ray traverses the atmosphere from the camera to the point, it will be accumulating opacity as it traverses the athmosphere. The amount of fog it gathers in each of these infinite amount of infinitelly little steps is driven by the fog density (that we just defined) at those points. So we have to add them all together. But of course, adding an infinte amount of ridiculosuly small things is called "integral" in maths. So, given our ray**

*b*
r(t) = o

we have that the total amount of fog is

where

so that our non-constant-density-fog shader is

which means that by adding no more than one division to the original formula we can get some cool height based fog (note that the rest of the formula is constant for a given frame).

_{y}+ t⋅k_{y}we have that the total amount of fog is

where

*is the distance from the camera to the point. This integral can be solved analytically, giving***T**so that our non-constant-density-fog shader is

vec3 applyFog( in vec3 rgb, // original color of the pixel
in float distance, // camera to point distance
in vec3 rayOri, // camera position
in vec3 rayDir ) // camera to point vector
{
float fogAmount = (a/b) * exp(-rayOri.y*b) * (1.0-exp( -distance*rayDir.y*b ))/rayDir.y;
vec3 fogColor = vec3(0.5,0.6,0.7);
return mix( rgb, fogColor, fogAmount );
}

which means that by adding no more than one division to the original formula we can get some cool height based fog (note that the rest of the formula is constant for a given frame).

*The integral of the fog density function d(y) over the ray gives the final amount of fog*

*Note low altitude parts get extra fog*

*Without height based fog*

Again, there are many variations that one can add to this constanst-vertical-exponential-fallof-density-function shader.

*A raymarched terrain with non constant fog density*