Alle, die schon mal einmal ebenenbasiert mit Bildern, bspw. in Photoshop, Affinity Photo oder Gimp, gearbeitet haben oder in Substance 3D Designer zwei Knoten zusammenführen wollten, werden über Blending-Modes gestolpert sein. Aber was genau verbirgt sich dahinter, wie funktionieren sie und welcher Mode bietet sich für welche Anwendungsfälle an? Genau das versuche ich, mit diesem Artikel zu beantworten.

Für ein besseres Verständnis nutze ich Graustufenbilder (Wertebereich: 0 - 1), da man so pro Pixel nur einen Wert hat. Natürlich lässt sich das auch auf RGB-, CMYK- oder sonstige Farbformate übertragen, nur dass man da dann mehrere Werte pro Pixel hat.

Was ist ein Blending-Mode?

Blending kommt aus dem Englischen und heißt mischen / mixen, d.h. mit Hilfe des Blending-Modes wird festgelegt, wie die einzelnen Pixel der einzelnen Knoten miteinander verrechnet werden, um ein neues Bild zu erzeugen. In der Regel werden die einzelnen Pixel an der jeweiligen Position beider Knoten miteinander verrechnet, sozusagen, die Pixel, die beim Aufeinanderlegen beider Knoten direkt übereinander liegen würden.

Die folgende Auflistung ist nicht vollständig, aber es sind die verbreitetsten Blending-Modes, die vermutlich von allen Anwendungen unterstützt werden:

• Copy
• Add (Linear Dodge)
• Subtract
• Multiply
• Add Sub
• Max (Lighten)
• Min (Darken)
• Divide
• Screen
• Overlay
• Soft Light

Copy

Copy (a.k.a. Normal) ist der einfachste Modus und bei den meisten Programmen der Standard-Modus. Es wird einfach der Pixel vom Vordergrund-Knoten übernommen: \(p_\text{new} = p_\text{fg}\)

• Sinnvoll, wenn die Deckkraft reduziert wurde
• Sinnvoll, wenn der Vordergrund Transparenzen (Alpha) hat
• Sinnvoll, wenn eine Maske verwendet wird

Add (Linear Dodge)

Bei Add (Linear Dodge) werden Vordergrund- und Hintergrundpixel miteinander addiert: \(p_\text{new} = p_\text{bg} + p_\text{fg}\). Das Ergebnis ist in der Regel ein helleres Bild.

• Praktisch für Glüh- und Leuchteffekte. (Danke an Simon)
• Bei der Addition können Werte > 1 auftreten, d.h. es können bei SDR dadurch Details verloren gehen, da dort der Maximalwert 1 ist.
• Operation ist kommutativ, d.h. Vorder- und Hintergrundknoten können vertauscht werden.

Subtract

Bei Subtract werden die Vordergrundpixel von den Hintergrundpixel subtrahiert: \(p_\text{new} = p_\text{bg} - p_\text{fg}\). Das Ergebnis ist in der Regel ein dunkleres Bild.

• Bei der Subtraktion können Werte < 0 auftreten, d.h. es können dadurch Details verloren gehen, da der Minimalwert 0 ist.

Multiply

Bei Multiply werden Vordergrund- und Hintergrundpixel miteinander multipliziert: \(p_\text{new} = p_\text{bg} * p_\text{fg}\). Jeder Pixel, der nicht weiß ist, dunkelt das Ergebnis ab. Hellere Pixel verändern das Ergebnis weniger stark als dunklere Pixel.

• Operation ist kommutativ, d.h. Vorder- und Hintergrundknoten können vertauscht werden.

Add Sub

Bei Add Sub werden die Vordergrundpixel zu den Hintergrundpixeln addiert oder von ihnen subtrahiert. Die ausgeführte Operation hängt dabei vom Wert des Vordergrundpixels ab. Bis 0,5 wird subtrahiert, ab 0,5 wird addiert.

Aber vor der konkreten Operation gibt es zuvor noch eine Wertebereichsanpassung, damit die Werte beider Operationen generell wieder zwischen 0 und 1 liegen und zusätzlich werden die Werte vor der Subtraktion invertiert, sodass dunkle Bereiche stärker abdunkeln als hellere Bereiche. Die Beschreibung klingt komplizierter als die eigentliche Formel dann wirklich ist: \(p_\text{new} = p_\text{bg} + ((p_\text{fg} - 0.5) * 2)\)

• Bietet sich an, wenn man Teile des Hintergrunds aufhellen und andere Teile abdunkeln möchte. Im Vergleich zu einzelnen Add- und Subtract-Aufrufen, hat man aber einen um 50% eingeschränkteren Wertebereich.
  • Liefert oft gute Resultate beim Blenden von Mustern in Höheninformationen. (Danke an Simon)
• Es gelten die gleichen Einschränkungen wie bei Add und Subtract.

Max (Lighten)

Bei Max (Lighten) wird der hellere Pixel genommen: \(p_\text{new} = \text{Max}(p_\text{bg}, p_\text{fg})\)

• Gut, wenn man bei Heightmaps bspw. Felsen aufeinander zu stapeln möchte

Min (Darken)

Bei Min (Darken) wird der dunklere Pixel genommen: \(p_\text{new} = \text{Min}(p_\text{bg}, p_\text{fg})\)

• Gut für Risse und Spalten

Divide

Bei Divide werden die Hintergrundpixel durch die Vordergrundpixel geteilt: \(p_\text{new} = \frac{p_\text{bg}}{p_\text{fg}}\)

• Divide ist praktisch um pre-multiplied Alpha in straight Alpha zu verwandeln (also RGB/Alpha). (Danke an Simon)
• Divide kann genutzt werden, um Farben zu neutralisieren bspw. bei farbstichigen Bildern.

Screen

Screen ist das Gegenteil von Multiply: \(p_\text{new} = p_\text{bg} + p_\text{fg} - p_\text{bg} * p_\text{fg}\). Jeder Pixel, der nicht weiß ist, hellt das Ergebnis auf. Hellere Pixel verändern das Ergebnis stärker als dunklere Pixel.

• Operation ist kommutativ, d.h. Vorder- und Hintergrundknoten können vertauscht werden.

Overlay

Overlay kombiniert Screen und Multiply miteinander. Bei Hintergrundpixeln bis 0,5 wird Multiply verwendet, ansonsten Screen. Wie man im Ergebnis sehen kann, ist der Übergang (bei 0,5) sehr hart.

• Praktisch für klassisches / manuelles Shading, um so bspw. einfach Metall-Highlights zu erzeugen. (Danke an Simon)

Soft Light

Soft Light versucht die Schwächen von Overlay auszugleichen, indem durch Interpolation zwischen den verwendeten Algorithmen der Übergang weicher geschieht. Bei meinen Recherchen ist mir aufgefallen, dass unterschiedliche Softwares Soft Light sehr unterschiedlich umsetzen. In der Dokumentation von GIMP heißt es sogar, dass in manchen Versionen von GIMP Soft Light und Overlay identisch sind bzw. waren. Substance Designer nutzt dabei den gleichen Algorithmus wie Photoshop und zusätzlich habe ich zwei andere Ansätze finden können, die ähnliche (aber nicht identische) Ergebnisse erzielen:

1. Soft Light Photoshop: \( p_\text{new} = \begin{cases} 2 p_\text{bg} p_\text{fg} + p_\text{bg}^2 (1 - 2 p_\text{fg}) & p_\text{fg} \lt 0.5 \\ \sqrt{p_\text{bg}} (2 p_\text{fg} - 1) + 2 p_\text{bg} (1 - p_\text{fg}) & \, \text{sonst} \end{cases} \)
2. Soft Light PegTop: \(p_\text{new} = (1 - 2 p_\text{fg}) * p_\text{bg} ^ 2 + 2 p_\text{bg} p_\text{fg} \)
3. Soft Light Illusions.hu: \(p_\text{new} = p_\text{bg} ^ {(2 ^ {2 (0,5 - p_\text{fg} )})}\)

Der Vergleich zeigt, dass alle Algorithmen einen weichen Übergang erzeugen. Die Ergebnisse der unterschiedlichen Soft Light-Algorithmen unterscheiden sich auf den ersten Blick nur geringfügig und werden für die meisten vermutlich erst im direkten Vergleich sichtbar.

Dabei ist festzuhalten, dass die Substance Designer-/Photoshop-Version von Soft Light insgesamt am meisten aufhellt. Die Illusions.hu-Version ist fast identisch zur Photoshop-Version, gewichtet die dunklen Bereiche des Hintergrunds aber etwas stärker, was meiner Meinung nach zu einem sanfteren Übergang führt. Die PegTop-Version gewichtet die dunklen Werte des Hintergrunds nochmals etwas stärker als die beiden anderen Algorithmen.