better fog

青旅半醒 2022-07-15 01:53 142阅读 0赞

[website][] [articles][]

better fog

### **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.

<table> 
 <tbody> 
  <tr> 
   <td><img src="http://iquilezles.org/www/articles/fog/gfx00.jpg" alt=""><br> <em>Without fog it's not easy to know the scale of what we see</em></td> 
   <td>&nbsp;</td> 
   <td><img src="http://iquilezles.org/www/articles/fog/gfx01.jpg" alt=""><br> <em>With fog we immediatelly understand the size the terrain</em></td> 
  </tr> 
 </tbody> 
</table>

However we should note that fog can also provide more information than that. For example, the color of the fog can tell us about the strengh of the sun. Even more, if we make the color of the fog not constant but orientation dependant we can introduce an extra level of realism to the image. For example, we can change the typical bluish fog color to something yellowish when the view vector aligns with the sun direction. This gives a very natural light dispersion effect. One would argue that sucha an effect shouldn't be called fog but scattering, and I agree, but in the end of the day one simply has to modify a bit the fog equation to get the effect done.

<table> 
 <tbody> 
  <tr> 
   <td> <pre><span style="font-family:Courier,sans-serif; font-size:1em; color:rgb(64,192,64); text-align:center; vertical-align:text-top">
vec3 applyFog( in vec3  rgb,       </span><span style="font-family:Courier,sans-serif; font-size:1em; color:rgb(208,208,80)">// original color of the pixel</span><span style="font-family:Courier,sans-serif; font-size:1em; color:rgb(64,192,64); text-align:center; vertical-align:text-top">
               in float distance ) </span><span style="font-family:Courier,sans-serif; font-size:1em; color:rgb(208,208,80)">// camera to point distance</span><span style="font-family:Courier,sans-serif; font-size:1em; color:rgb(64,192,64); text-align:center; vertical-align:text-top">
{
    float fogAmount = 1.0 - exp( -distance*b );
    vec3  fogColor  = vec3(0.5,0.6,0.7);
    return mix( rgb, fogColor, fogAmount );
}</span></pre> </td> 
   <td>&nbsp;</td> 
   <td> <pre><span style="font-family:Courier,sans-serif; font-size:1em; color:rgb(64,192,64); text-align:center; vertical-align:text-top">
vec3 applyFog( in vec3  rgb,      </span><span style="font-family:Courier,sans-serif; font-size:1em; color:rgb(208,208,80)">// original color of the pixel</span><span style="font-family:Courier,sans-serif; font-size:1em; color:rgb(64,192,64); text-align:center; vertical-align:text-top">
               in float distance, </span><span style="font-family:Courier,sans-serif; font-size:1em; color:rgb(208,208,80)">// camera to point distance</span><span style="font-family:Courier,sans-serif; font-size:1em; color:rgb(64,192,64); text-align:center; vertical-align:text-top">
               in vec3  rayDir,   </span><span style="font-family:Courier,sans-serif; font-size:1em; color:rgb(208,208,80)">// camera to point vector</span><span style="font-family:Courier,sans-serif; font-size:1em; color:rgb(64,192,64); text-align:center; vertical-align:text-top">
               in vec3  sunDir )  </span><span style="font-family:Courier,sans-serif; font-size:1em; color:rgb(208,208,80)">// sun light direction</span><span style="font-family:Courier,sans-serif; font-size:1em; color:rgb(64,192,64); text-align:center; vertical-align:text-top">
{
    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), </span><span style="font-family:Courier,sans-serif; font-size:1em; color:rgb(208,208,80)">// bluish</span><span style="font-family:Courier,sans-serif; font-size:1em; color:rgb(64,192,64); text-align:center; vertical-align:text-top">
                           vec3(1.0,0.9,0.7), </span><span style="font-family:Courier,sans-serif; font-size:1em; color:rgb(208,208,80)">// yellowish</span><span style="font-family:Courier,sans-serif; font-size:1em; color:rgb(64,192,64); text-align:center; vertical-align:text-top">
                           pow(sunAmount,8.0) );
    return mix( rgb, fogColor, fogAmount );
}</span></pre> </td> 
  </tr> 
 </tbody> 
</table>

The effect can be done much more sophisticated. For example the exponent of the dot product between the sun and view vectors (which of course controls the influence of the directional color gradient) can be varyied with distance too. With the right settings one can fake glowing/blooming and other light scattering effects without actually doing any multipass or render to texture but a simple change to the fog equation. Color can change with altitude too, or any other parameters you might think of.

<table> 
 <tbody> 
  <tr> 
   <td><img src="http://iquilezles.org/www/articles/fog/gfx02.jpg" alt=""><br> <em>Note how fog colors tints to yellow in the background mountains near the sun</em></td> 
   <td>&nbsp;</td> 
   <td><img src="http://iquilezles.org/www/articles/fog/gfx03.jpg" alt=""><br> <em>Final image (<a href="http://iquilezles.org/prods/index.htm#elevated" style="color:rgb(255,160,96); text-decoration:none" rel="nofollow">Elevated</a>, 2009)</em></td> 
  </tr> 
 </tbody> 
</table>

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 "extintion", and the second term can be interpreted as the "inscattering". We note that this way of expressin fog is more powerfull, because now we can choose independent fallof parameters ***b*** for the extintion 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.

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 ***b*** 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.  
  
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 soluting to the formulas is analytical. Let's see. We start with this exponential density function, which depends on the height ***y*** of our point:  
  
![for00.png][]  
  
The parameter ***b*** 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 infinte 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

<table> 
 <tbody> 
  <tr> 
   <td><img src="http://iquilezles.org/www/articles/fog/for01.png" alt=""><br> <br> we have that the total amount of fog is<br> <br> <img src="http://iquilezles.org/www/articles/fog/for02.png" alt=""><br> <br> where&nbsp;<em><strong>T</strong></em>&nbsp;is the distance from the camera to the point. This integral can be solver analytically, giving&nbsp;<br> <img src="http://iquilezles.org/www/articles/fog/for03.png" alt=""><br> <br> so that our non-constant-density-fog shader is</td> 
   <td>&nbsp;</td> 
   <td><img src="http://iquilezles.org/www/articles/fog/gfx06.png" alt=""><br> <em>The integral of the fog density function d(y) over the ray gives the final amount of fog</em></td> 
  </tr> 
 </tbody> 
</table>

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 = c * 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 heigh based fog (note that the rest of the formula is constant for a given frame).

<table> 
 <tbody> 
  <tr> 
   <td><img src="http://iquilezles.org/www/articles/fog/gfx05.jpg" alt=""><br> <em>Note low altitude parts get extra fog</em></td> 
   <td>&nbsp;</td> 
   <td><img src="http://iquilezles.org/www/articles/fog/gfx04.jpg" alt=""><br> <em>Without height based fog</em></td> 
  </tr> 
 </tbody> 
</table>

Again, there are many variations that one can add to this constanst-vertical-exponential-fallof-density-function shader.  
  
![gfx07.jpg][]  
*A raymarched terrain with non constant fog density*

[website]: http://iquilezles.org/index.html
[articles]: http://iquilezles.org/www/index.htm
[for00.png]: /images/20220715/37c32e229b1847aabf0c2663185e5db2.png
[gfx07.jpg]: /images/20220715/166f15b2dd014f27a84ffa76649b1d1e.png