Overdraw

Overdraw is when the GPU shades the same pixel on screen more than once in a single frame. Unity's Overdraw view shows it directly: objects drawn as transparent silhouettes whose "transparent colors accumulate, making it easy to spot places where one object is drawn over another" (Unity Manual: Scene view View Options toolbar).

A little overdraw is normal. A lot of it, concentrated in one place, can make a scene GPU-bound even when its triangle and draw call counts look healthy.

#Causes of overdraw

• Translucent materials. A translucent surface cannot hide what is behind it, so everything behind is shaded too, and then the translucent layer on top. Intel's Unreal optimisation guide says "opacity is a major performance hit and causes a lot of overdraw" (Intel Developer Zone: Unreal Engine 4 Optimization Tutorial, Part 4).
• Foliage cards. A leaf card is a quad with an alpha mask; the cut-away parts still cost shading. Epic found on Fortnite that "negative space in the alpha maps adds additional overdraw cost" (Unreal Engine tech blog: Bringing Nanite to Fortnite Battle Royale in…). Intel names opacity as "a main component of foliage and particle systems" (Intel Developer Zone: Unreal Engine 4 Optimization Tutorial, Part 4). See opacity, masked and translucent materials.
• Particles. Epic's view-mode documentation notes that particle effects "tend to cause performance spikes with a large amount of overdraw for a short period of time" (Unreal Engine documentation: Viewport Modes in Unreal Engine).
• Stacked decals. Each decal layer shades the pixels beneath it again.
• Many tiny triangles. GPUs shade pixels in small groups called quads (Intel Developer Zone: Unreal Engine 4 Optimization Tutorial, Part 4). Intel explains that when "multiple polygons are all overlapping and being rendered within the same quad", work is repeated, and "the smaller the visible triangles of a mesh, the more are within a quad" (Intel Developer Zone: Unreal Engine 4 Optimization Tutorial, Part 4). This is why distant meshes need level of detail.

Backface culling helps with solid objects: hidden back faces of closed surfaces are removed "before expensive Rasterization" (OpenGL Wiki: Face Culling). It does nothing for overlapping translucent layers.

#Viewing overdraw

Unreal Engine has three relevant view modes:

• Shader Complexity: green to red is a linear scale from "very inexpensive" to "expensive", and "pink and white indicate a large jump to "very expensive" pixels" (Unreal Engine documentation: Viewport Modes in Unreal Engine).
• Quad Overdraw: "Colored according to the quad coverage" (Unreal Engine API documentation: EViewModeIndex). It shows where small or overlapping triangles waste pixel-quad work (Intel Developer Zone: Unreal Engine 4 Optimization Tutorial, Part 4).
• Shader Complexity & Quads: "Colored according to shader complexity, including quad overdraw" (Unreal Engine API documentation: EViewModeIndex).

Unity: the Scene view Overdraw draw mode (Unity Manual: Scene view View Options toolbar). Bright areas are where many layers stack.

#Common mistakes

• Translucent where masked would do. A hard-edged leaf, fence or grate rarely needs smooth translucency.
• Oversized particle sprites. Large, mostly transparent sprites close to the camera cover the whole screen with several layers each (Unreal Engine documentation: Viewport Modes in Unreal Engine).
• Judging from one camera angle. Walk into the bush or the smoke; overdraw peaks when the camera is inside the effect.
• Leaving dense meshes at full detail far away. Tiny triangles pile up in each quad (Intel Developer Zone: Unreal Engine 4 Optimization Tutorial, Part 4).

Related terms: draw calls, opacity, masked and translucent materials, foliage and vegetation, impostors and billboards, level of detail, decals, performance and profiling.

#Further reading and watching