Unity Fog Effects: Complete Implementation Guide with Examples

Ever wondered how a simple fog effect can transform a bland game environment into a chilling horror scene or a mystical forest? Fog creates atmosphere, depth, and visual interest. It enhances immersion and improves performance by obscuring distant objects. This guide covers fog effects in Unity, from built-in options to custom shaders.

If you’re looking for high-quality assets to enhance your game’s fog effects, consider exploring a marketplace like Strafekit. You might even find some useful visual effects shaders like Buto to further enhance your fog.

Understanding Fog: The Basics

Fog simulates the obscuring of distant objects. Instead of simply listing parameters, let’s understand their impact first. Fog can rapidly obscure objects, creating a quick falloff effect. This is achieved through Exponential fog, where density increases exponentially. Alternatively, fog can increase density even more rapidly, useful for very dense, localized fog; this is Exponential Squared fog. Or, density can increase linearly from a start to end point, offering more control over the fog’s range with Linear fog.

Key parameters include Fog Color, which impacts scene mood by tinting the scene’s visuals; Density, which controls how quickly fog obscures objects, influencing visibility; and Start/End Distance (in Linear mode), which define where fog begins and reaches maximum density, allowing you to control the fog’s reach.

Performance is key. Higher density and complex fog reduce frame rates. Consider the target platform.

Breathing Life into Your Scene: Implementing Built-In Fog

Unity’s built-in fog is configured in the Lighting window (Window > Rendering > Lighting Settings).

Steps:

1. Open the Lighting window (Window > Rendering > Lighting Settings) to access the fog configuration options. This is your central control panel for environment lighting.
2. Navigate to the “Scene” tab to find the environment lighting settings. Don’t confuse this with other tabs; the “Scene” tab holds the fog settings.
3. Enable the “Fog” checkbox to activate the built-in fog system. This is the most common oversight; ensure it’s checked to activate the fog.
4. Adjust parameters (Color, Mode, Density, Start, End) to fine-tune the fog’s appearance. Experiment with different values to achieve the desired effect.

Adjust fog parameters based on the scene type:

• Indoor: Subtle fog, low density for depth.
• Outdoor (Day): Light fog color, moderate density for haze.
• Outdoor (Night): Dark fog color, higher density for mystery.

Troubleshooting Built-In Fog: Common Issues

• If fog is absent: Ensure the “Fog” checkbox is enabled in the Lighting window. Sometimes, it’s the simplest solution that’s overlooked.
• If fog fails to render: Verify camera rendering path (‘Forward’ or ‘Deferred’). Especially with custom shaders, ensure compatibility with the rendering path.
• If fog is not visible: Custom shaders may be incompatible. Test with a standard shader to isolate the issue.
• Fog too dense: Reduce density or adjust start/end distances. Overly dense fog can obscure the entire scene.
• Fog color incorrect: Adjust fog color to match the scene’s lighting. Mismatched colors can look unnatural.

Fine-Grained Control: Advanced Fog with Post-Processing

The Post-Processing Stack provides more control and allows combining fog with other effects.

Steps to use the Post-Processing Stack:

1. Install the Post-Processing package (Window > Package Manager). This is essential for accessing post-processing effects.
2. Create a Post-Processing Profile to store the post-processing settings. Think of this as a container for your fog and other effects settings.
3. Add a Post-Processing Volume and assign the profile to apply the effects to the scene. Without a volume, the post-processing effects won’t be visible.
4. In the profile, add the “Fog” effect to enable post-processing fog. This activates the fog effect within the post-processing stack.
5. Adjust parameters (Color Mode, Color, Density, Start, End) to customize the fog. Experiment with different values to fine-tune the fog’s appearance.

Combining fog with other post-processing effects:

• Color Grading: Match scene color to the fog color.
• Bloom: Add a glow effect in the fog.

Optimizing post-processing fog:

• Reduce fog intensity.
• Use a lower resolution for the post-processing stack.

Crafting Your Own Atmosphere: Custom Fog Shaders with Shader Graph

Shader Graph allows you to create custom fog shaders without writing code, giving you precise control over how fog interacts with your scene. The goal is to create a shader that blends the object’s original color with a fog color based on its distance from the camera, allowing for customized fog effects.

Steps to create a simple fog shader:

1. Create a new Lit Shader Graph. This provides a base for creating a shader that interacts with lighting.
2. Create a Color property for fog color. This allows you to easily change the fog color in the material inspector.
3. Create a Float property for fog density. This controls how quickly the fog obscures objects.
4. Use the Scene Depth node. This node provides the distance from the camera to each pixel.
5. Connect the Scene Depth node’s output to the input of the Linear Fog node. The Linear Fog node calculates the fog factor based on the scene depth.
6. Use the Lerp node to blend the original color of the object with the fog color, based on the fog factor calculated from the scene depth. Lerp smoothly transitions between the object’s color and the fog color.
7. Assign the shader to a material. This applies the shader to objects in your scene.

Adding height-based fog:

1. Add a Position node (Object space). This provides the position of each pixel relative to the object.
2. Use the Y component for height. The Y component represents the vertical position.
3. Create a Float property for fog height. This controls the height at which the fog starts.
4. Use a Step node to create a sharp mask, separating areas above and below the fog height. This creates a clear distinction between areas with and without fog.
5. Multiply the fog factor by the height mask. This applies the height-based fog effect.

Implementing volumetric fog using noise textures:

1. Create a Texture2D or Texture3D property. This allows you to use a noise texture to create a more natural-looking fog.
2. Sample the noise texture using world position. This maps the noise texture to the world space.
3. Modulate fog density with the noise value. This adds variation to the fog density based on the noise texture.

Immersive Environments: Volumetric Fog Implementation

Volumetric fog simulates fog as a 3D volume.

Techniques:

• Raymarching: High-quality, performance intensive.
• Billboards: More performant, less accurate.

Optimizing volumetric fog:

• Render to a low-resolution render texture.
• Use lower resolutions.

Examples:

• Clouds: Realistic cloud formations.
• Mist: Ground-level mist.
• Weather Effects: Sandstorms, blizzards.

Performance Matters: Optimizing Fog Effects

Optimization is crucial. If you find yourself facing Game Dev Burnout due to performance issues, remember to take breaks and approach optimization systematically.

Optimization techniques:

• Reduce Fog Density: Improves performance.
• Reduce Fog Distance: Reduces calculations.
• Lower Resolution Render Textures: Reduces memory bandwidth.
• Implement Fog in Specific Areas: Apply selectively.
• Profiling: Use the Unity Profiler.

Lighting’s Partner: Fog and Lighting Considerations

Fog interacts with lighting.

Interaction with lighting models:

• Forward Rendering: Per-object, less accurate, more performant.
• Deferred Rendering: Screen space, more accurate, more performance intensive.

Enhancing fog effects with lighting:

• Light Cookies: Create patterns.
• Volumetric Lighting: Simulate light scattering.

Adjusting fog color:

• Match the lighting scheme.

Creating god rays:

• Use light shafts or volumetric lighting.

Practical Application: Examples and Use Cases

• Horror Game: Dark gray fog, high density, flickering lights casting long, distorted shadows. The dark gray fog creates a sense of dread, while the flickering lights add to the unease.
• Fantasy Environment: Light blue mist, clinging to the base of ancient trees. Add floating dust to enhance the magical atmosphere.
• Sandstorm: Thick, yellowish-brown fog, reducing visibility to near zero. Swirling sand adds to the disorienting effect.
• Blizzard: Dense, white fog, accumulating on every surface. Snow particles obscure the environment.
• Ocean Scene: Dark blue fog, obscuring the deep sea trenches. Bubbles and plankton create a sense of depth.