Gerade auf Mobile ist Overdraw ein Performance-Killer. Er entsteht, wenn sehr viele transparente Objekte über einander liegen. Es werden also oft Pixel gerendered, die später im Rendervorgang überschrieben werden, weil sie tatsächlich verdeckt sind. Das trifft auf die Gesamte UI und die meisten Sprites zu.
Unity bietet Möglichkeiten an Overdraw zu visualisieren, welche es gibt ist abhängig von der verwendeten Renderpipeline. Der Modus für die Built-in-Renderpipeline sieht beispielsweise so aus:
Abbildung 1: Der Overdraw Shader färbt stellen mit überlagernder Transparenz heller ein
Es ist also allgemein ratsam beim Bau von Elementen darauf zu achten, dass alle statischen Elemente zu einer Textur zusammengeführt werden. Ein Bereich in Abbildung 1 mit sehr viel Overdraw sind die Warenangebote auf der linken Seite. Eines davon soll im Folgenden als Beispiel dienen:
Abbildung 2: Ein Warenangebot aus einem prototypischen Shop
Abbildung 3: Die Grafik besteht aus sehr vielen Einzelteilen
In den Abbildungen 2/3 kann man sehen, dass die unscheinbare Karte tatsächlich aus vielen Einzelteilen besteht. Diese Einzelteile liegen übereinander und werden trotzdem alle voll gezeichnet, bevor sie von dem nachfolgenden Element übergemalt werden.
Abbildung 4: Ein Rahmen mit transparenten Pixeln in der Mitte
Abbildung 5: Der Bogen ist sehr unvorteilhaft rotiert
Wenn wir dann noch die Rahmen für Ware und Namen gesondert betrachten sehen wir viele transparente, also leere, Pixel auf den Texturen. Tatsächlich kosten uns diese leeren Pixel trotzdem Performance, weil sie erst beim Rendern aussortiert werden. Noch schlimmer ist es beim Bogen in Abbildung 5, dessen Rotation die Textur unnötig mit Leerraum füllt. Man sollte also bereits beim Export von Grafiken darauf achten, dass sie möglichst wenig leere Pixel enthalten und auch nicht unvorteilhaft rotiert sind.
Abbildung 6: Zusammengefügter Hintergrund für die Ware
Abbildung 6 zeigt, wie eine bessere Version aussehen würde. Alle Einzelteile sind zu einer einzelnen Textur reduziert worden. Um der schlechten Rotation des Bogens Herr zu werden, gibt es in Unity noch die Option "Use Sprite Mesh". Dadurch wird für den Sprite ein mehr oder minder genaues Mesh erstellt, anstatt die Textur auf einem Quad aufzuspannen.
Abbildung 7: Wireframe-Ansicht; Der Bogen aus Abbildung 5 ist nun ein Mesh
Durch diese Einstellung erzeugt der Bogen weniger Overdraw, allerdings kann man in Abbildun 7 auch sehen, dass er nun mehrere Dreiecke braucht, während es vorher nur zwei waren. Es wird ebenfalls die Einstellung "Mesh Type - Tight" beim Import benötigt.