How to Reduce UGUI Overdraw: 3 Practical Techniques That Work
If you've ever looked at your UI in Overdraw mode and seen bright white areas everywhere, you know how wasteful UGUI Overdraw can be. Every drawn transparent pixel wastes GPU fill rate, and the problem adds up quickly with complex UIs. Using a real weapon UI panel as an example, this section covers three practical techniques—Tight mesh, transparent culling, and 9-slicing—that significantly reduce Overdraw while keeping visuals intact.
How to Check Overdraw First, you need to see where the Overdraw is happening. In Unity's Scene panel, you can enable the Overdraw display mode: 1. Switch to the Scene view 2. In the top left corner, change the Shading Mode dropdown to Overdraw In Overdraw mode, brighter areas indicate higher Overdraw—meaning those pixels are being drawn multiple times. Darker areas are better. In our example weapon UI, the UI elements on the left and right sides, as well as several circles in the background, showed relatively high brightness, indicating significant Overdraw. Technique 1: Optimize Sprite Mesh Shape with Tight Meshes The Problem with Default Quad Meshes Circular UI elements often have high Overdraw because their meshes are simple quads rectangles . The common characteristic is large transparent areas in the middle—areas that still get drawn even though nothing visible is there. For a circular sprite, the default mesh is a rectangle that surrounds the entire sprite, including all the transparent corners. Every one of those transparent corner pixels contributes to Overdraw. The Fix: Tight Mesh Type Change the sprite's Mesh Type from the default Full Rect to Tight . Here's how: 1. Select the sprite in the Project window 2. In the Inspector, set Mesh Type to Tight 3. Apply the change Then, on the Image component: 1. Set Image Type to Simple 2. Enable the Use Sprite Mesh option this appears after you set Mesh Type to Tight Results After enabling Tight mesh and Use Sprite Mesh, the Overdraw changes noticeably. The quad becomes a polygon that closely follows the sprite's visible shape, and fully transparent parts are removed. Before optimization: The center area is brighter higher Overdraw from the full quad mesh After optimization: Brightness drops significantly, while the visual result remains unchanged Fine Tuning with Extrude Edges When you switch to Tight mesh, you may notice that the wireframe is relatively dense—Unity generates many polygons to closely match the sprite outline. You can reduce the polygon count by adjusting the Extrude Edges parameter. In our example, reducing Extrude Edges to 6 produced a clean result without affecting the visual quality. Fewer polygons means less vertex data to process, which can also help with mesh rebuild cost. Technique 2: Cull Elements with Alpha Set to 0 The Hidden Cost of Hidden Elements Many UI systems use to hide elements—for example, the selected state background of weapon items might be hidden this way until a weapon is selected. However, in UGUI, elements with Alpha set to 0 are still rendered by default . The GPU still processes all the pixels, even though they're completely transparent. This causes unnecessary Overdraw and GPU cost. The Fix: Cull Transparent Mesh Enable the Cull Transparent Mesh option on the Canvas Renderer component: 1. Select the UI element 2. Find the Canvas Renderer component 3. Check Cull Transparent Mesh When this option is enabled and the element's Alpha is 0, Unity skips rendering it entirely—no vertices, no fragments, no Overdraw contribution. Important: This only works when Alpha is exactly 0. If you're using fade animations with intermediate alpha values, those frames will still render normally. Technique 3: Use 9 Slicing to Optimize Hollow Frames The Problem with Frame Sprites Frame or border sprites—like the frame around each weapon item—often have a large transparent area in the center. The frame itself is just the border, but the sprite's mesh covers the entire rectangular area, including the transparent center. The Fix: 9 Slicing 9 slicing divides a sprite into 9 regions 4 corners, 4 edges, 1 center so that the corners stay at their original size while the edges and center stretch to fit the target dimensions. For hollow frames, you can disable the center fill entirely. Here's how to set it up: 1. Select the sprite in the Project window 2. Open the Sprite Editor 3. Drag the green handles to define the 9 slice borders—position them at the inner edge of the frame 4. Apply the change Then, on the Image component: 1. Set Image Type to Sliced this option only appears after 9 slicing is set up 2. Disable Fill Center since the frame is hollow Results After the change, the visual result remains unchanged—the frame looks exactly the same. But in Overdraw mode, the transparent center area becomes noticeably darker, meaning those pixels are no longer being drawn. This technique works for any UI element that has a frame/border shape with an empty center: buttons, panels, item slots, etc. Summary of Results All three techniques together significantly reduced Overdraw in the weapon UI example: Background circles: optimized with Tight mesh + Extrude Edges adjustment Hidden selected states: optimized with Cull Transparent Mesh Weapon frames: optimized with 9 slicing + Fill Center disabled The best part: none of these optimizations change the visual appearance of the UI. They simply stop drawing pixels that the player never sees anyway.