Fog can be added and configured using the TCastleFog component. The component is available in CGE editor, so you add and configure your fog even without writing any code.

The usage is simple:

  1. Add a fog component anywhere to the design using "Add Non-Visual Component → Fog (TCastleFog)" in editor.

    Adding fog component
  2. Set the fog as active for given viewport by adjusting the TCastleViewport.Fog property.

    Making fog component active on viewport
  3. Adjust the fog parameters, like TCastleFog.Color and TCastleFog.VisibilityRange.

    Adjust fog parameters
  4. Optionally, also adjust the background color to match the fog color. The fog looks most natural in this case.

    For example adjust the TCastleViewport.BackgroundColor and leave TCastleViewport.Background empty (nil) for a simple background color.

    Or can make background horizon color, or background skybox, visually match the fog. See more about backgrounds.

    Fog and background colors matching
The fog is applied in the final (sRGB) color space, this allows to match fog color perfectly to background color or UI easily. This means that Linear color space (gamma correction) doesn’t affect fog application.

To improve this documentation just edit this page and create a pull request to cge-www repository.