UGUI Overdraw Optimization: Tight Meshes, Transparent Culling, and 9-Slicing

Problem / Scenario

Overdraw—pixels drawn multiple times by overlapping UI elements—is a major source of GPU cost in UGUI, especially on mobile devices. For a weapon UI panel with circular backgrounds, item frames, and hidden selection states, the Overdraw was visibly high when viewed in Unity's Overdraw mode. The goal: reduce Overdraw without changing any visual output.

What We Observed

Using Scene view's Overdraw shading mode, we identified three problem areas:

1. Background circles — very bright, indicating high Overdraw from full-quad meshes
2. Selected-state backgrounds — elements hidden via Alpha=0 still contributing to Overdraw
3. Weapon item frames — hollow frames drawing full rectangles of mostly transparent pixels

How to Analyze It

Overdraw mode color intensity correlates with the number of times pixels are overdrawn:

• Dark/black: no Overdraw (drawn once)
• Bright colors: high Overdraw (drawn many times)

For each bright area, we asked: is all this drawing necessary? In all three cases, the answer was no.

Optimization Techniques

1. Tight Mesh for Sprites with Transparency

Problem: Circular and irregular sprites use rectangular (quad) meshes by default. The transparent corners and edges of the quad are still rasterized, wasting GPU fill rate.

Solution: Use Unity's Tight mesh generation.

Steps:

1. Select sprite asset → Inspector → Mesh Type: Tight
2. On Image component → Use Sprite Mesh: enabled
3. Adjust Extrude Edges parameter to control mesh polygon count

How it works: Unity generates a polygon mesh that tightly wraps the visible alpha contour of the sprite. Fully transparent areas are excluded from the mesh entirely, so they never reach the rasterizer.

Polygon count tuning: The default Tight mesh can be quite dense (many vertices for smooth contours). Reducing Extrude Edges lowers vertex count while maintaining visual quality. For our circular sprites, a value of 6 produced clean results with minimal polygons.

2. Cull Transparent Mesh for Alpha=0 Elements

Problem: UI elements hidden by setting color.a = 0 are still submitted for rendering. The mesh is built, the draw call is issued, and the fragment shader runs for every pixel—all producing nothing visible.

Solution: Enable Cull Transparent Mesh on the Canvas Renderer component.

When this option is enabled and the element's final alpha is 0, Unity culls the entire element from rendering. No vertices, no draw call, no Overdraw.

Limitations:

• Only works when alpha is exactly 0
• Fading animations (alpha from 1 to 0) still render during the transition
• Only the final element alpha matters, not parent canvas group alpha

3. 9-Slicing for Hollow Frame Sprites

Problem: Frame/border sprites have large transparent centers. The default mesh covers the full rectangle, including all that empty space.

Solution: Use 9-slicing with Fill Center disabled.

Steps:

1. Open the sprite in Sprite Editor
2. Drag the 9-slice border handles inward to match the inner edge of the frame
3. Apply changes
4. On Image component → Image Type: Sliced
5. Disable Fill Center

How it works: 9-slicing divides the sprite into 9 regions. With Fill Center disabled, the center region produces no geometry at all—only the 4 corners and 4 edges generate vertices. The result is a frame shape with no center fill.

Root Cause

The common thread across all three techniques: UGUI draws more pixels than necessary because it defaults to simple rectangular meshes and renders even fully transparent content. Most Overdraw in UGUI isn't from UI elements overlapping each other—it's from individual elements drawing invisible pixels.

Key Takeaway

Overdraw optimization in UGUI mostly comes down to "don't draw what the player can't see." Three techniques cover the vast majority of cases:

Technique	Best for	Effort	Impact
Tight Mesh	Circular/irregular sprites	Low	High
Cull Transparent Mesh	Elements hidden via Alpha=0	Very low	Medium
9-Slicing (no Fill Center)	Frames, borders, buttons	Low	High

All three preserve visual quality while reducing GPU fill rate usage. They should be standard practice in any UGUI project targeting mobile devices.