Fog of War Rendering Techniques in Strategy Games

In strategy game development, the “fog of war” is a crucial gameplay mechanic that limits a player’s visibility to only the areas occupied by their units. This article explores the primary rendering techniques developers use to calculate, update, and display this dynamic visual effect in real time, covering grid-based calculations, texture-based rendering, raycasting, post-processing shaders, and compute shaders.

1. Dynamic Texture-Based Visibility

The most common approach for rendering fog of war is using a dynamic, low-resolution 2D texture (often called a “fog texture” or “visibility buffer”).

• How it works: The game world map is mapped to a 2D texture where each pixel or texel represents a coordinate on the map. The texture stores visibility states in its color channels (e.g., Red for unexplored areas, Green for explored but currently hidden areas, and Blue for currently visible areas).
• Rendering: During each frame, unit positions are projected onto this texture, and circles of light are “drawn” onto it to represent unit vision. This texture is then projected onto the 3D terrain.
• Smoothing: Because the texture is low-resolution to save memory, bilinear filtering or custom blur shaders are applied to prevent the fog from looking blocky or pixelated, creating smooth, soft edges around the visible areas.

2. Mesh-Based Projection and Raycasting

For games requiring precise line-of-sight calculations—especially those with verticality, walls, or obstacles—developers use raycasting to generate visibility meshes.

• Raycasting: The engine casts mathematical rays outward from a unit’s position in a 320-degree circle. When a ray hits an obstacle (like a cliff or wall), it stops.
• Polygon Generation: The intersection points of these rays are connected to form a 2D visibility polygon.
• Rendering: This polygon is rendered into a stencil buffer or an offscreen render texture. The resulting mask is used to blend the fog of war overlay on top of the game world, ensuring that areas behind walls remain realistically hidden.

3. Screen-Space Post-Processing and Depth Reconstruction

Modern 3D strategy games often apply the fog of war as a screen-space post-processing effect rather than applying it directly to individual object materials.

• Depth Buffer Reconstruction: The rendering pipeline uses the camera’s depth texture to reconstruct the 3D world position of every pixel on the screen.
• Texture Projection: Once the 3D world position is known, the pixel’s coordinates are mapped back to the 2D visibility texture.
• Color Blending: The shader blends the scene’s final color with the fog color (usually black or grey) based on the visibility value of that coordinate. This technique is highly efficient because it runs in a single full-screen pass and works uniformly across all static terrain, dynamic units, and water.

4. GPU Compute Shaders

When a strategy game features thousands of units, calculating line-of-sight on the CPU can cause severe performance bottlenecks.

• Parallelization: Developers offload visibility calculations to the GPU using compute shaders. Compute shaders can process thousands of unit positions, calculate their overlapping sight radiuses, and write the results directly to the visibility texture in parallel.
• Interpolation: To keep performance high, the visibility calculation can be run at a lower tick rate (e.g., 10 times per second instead of 60). The rendering engine then interpolates (fades) between the old visibility state and the new visibility state every frame to ensure the transition looks smooth to the player.