Overdraw

What is Overdraw

Overdraw refers to the situation in rendering where the same screen pixel is written to the color buffer multiple times. This is often caused by multiple opaque or semi-transparent objects overlapping, or multiple faces of an object overlapping. Each write requires executing the fragment shader and possibly blending, consuming GPU computation and bandwidth resources.

Causes of Overdraw

• **Opaque object overlap**: If rendering order is improper, distant objects are drawn first and then covered by near objects, causing waste. Although depth testing prevents final color errors, the fragment shader has already executed.
• **Transparent objects**: Transparent objects require blending and cannot be fully culled by depth testing; each transparent layer increases overdraw.
• **Complex geometry**: Models with overlapping internal faces, or heavy particle system stacking.
• **UI elements**: Multiple layers of UI overlapping cause overdraw.
• **Post-processing**: Full-screen post-processing effects may sample and write multiple times.

Impact of Overdraw

Overdraw directly increases fill rate pressure, i.e., the number of pixels the GPU needs to process per second. On high resolutions or mobile devices, fill rate is often a bottleneck. Overdraw can lead to:

• Decreased frame rate
• Increased power consumption
• Device heating

How to Detect Overdraw

• **Rendering debug tools**: Many engines provide overdraw visualization modes. For example, in Unity's Scene view, you can enable Overdraw mode, where different colors represent draw counts.
• **GPU performance profilers**: Such as NVIDIA Nsight, Android GPU Inspector, etc., can report overdraw rates.
• **Custom debugging**: Use replacement shaders that output colors based on draw count.

Strategies to Optimize Overdraw

1. Optimize Rendering Order

• **Opaque objects front-to-back**: Draw near objects first, using depth testing to reject distant occluded pixels, reducing overdraw. However, in practice back-to-front is often used to reduce state changes; trade-offs are needed.
• **Transparent objects back-to-front**: This is standard practice to ensure correct blending.

2. Reduce Coverage of Transparent Objects

• **Use alpha test instead of alpha blend**: For cutout effects, alpha test avoids blending but may cause aliasing.
• **Simplify transparent geometry**: Use simpler meshes to lower coverage.
• **Limit particle count**: Optimize particle systems to reduce overlap.

3. Optimize Geometry

• **Avoid overlapping internal faces**: Ensure models have no hidden internal faces.
• **Use occlusion culling**: Cull objects fully occluded at CPU or GPU stage to avoid drawing.

4. Optimize UI

• **Reduce UI layering**: Merge UI elements and use atlases to reduce draw calls and overdraw.
• **Clip UI areas**: Only draw visible parts.

5. Use Depth Prepass

For complex scenes, render depth buffer first, then in main rendering use depth test equal (or less) to skip occluded pixels, reducing overdraw.

Summary

Overdraw is a common performance bottleneck in real-time rendering. By optimizing ordering, reducing transparent complexity, and optimizing geometry and UI, overdraw can be effectively reduced, improving performance.