LerpworksAcademy
On this page

Graphics › The frame

Fog and post-processing

Know first: Direct and indirect light, How an engine draws a frame: passes and the G-buffer, Depth buffer: what is closer to the camera, Interpolation: lerp, smoothstep and remap

The frame is drawn and the light is computed, but it cannot go to the screen yet. The numbers in the frame run from hundredths to thousands, and the screen shows only 0 to 1. Post-processing is like developing a photograph: it picks an exposure, squeezes the bright parts with a curve, grades the color, and adds fog, bloom, blur and shading in the crevices. This lesson covers why each step exists, why their order matters, why fog fades exponentially, and how to avoid overloading the picture. It is lesson 11 of the course “How an engine draws a frame.”

Why this matters

The same scene can look different in two games: a warm evening with haze in one, a cold morning with hard shadows in the other. The models and the lights are the same. The difference is in the last steps of the frame. Until you know these steps, a few things stay puzzling:

  • why the sun and a lamp end up the same white on the screen, and how to give them their difference back;
  • why a bright orange fire turns yellow;
  • why distant mountains are blue, and how fog knows the distance;
  • why some effects come before others, and how quickly a picture turns to mush.

Further in the article

  1. Developing the frame
  2. Exposure and eye adaptation
  3. Tone mapping: squeezing light into the screen
  4. Color grading
  5. Fog: light scattered along the way
  6. Bloom
  7. Lens flare, vignette, aberration and grain
  8. Depth of field and motion blur
  9. Screen-space shading of crevices
  10. Order and cost
  11. In engines and Blender
  12. Where it breaks
  13. Connections: the same idea in other fields
  14. Key points
  15. Test yourself