あひるが完全に消えましたね。

明度(Value)と明度(Lightness)と輝度(Luminance)の話

色相(Hue)を扱う色空間は、よく使われるのがHSV色空間とHSL色空間の２つです。
HSV色空間は色相(Hue)、彩度(Saturation)、明度(Value)の３で構成されます。

HSV色空間 -Wikipedia

HSL色空間は色相(Hue)、彩度(Saturation)、輝度(Lightness)の３つで構成されています。

HSL色空間 -Wikipedia

Wikipediaでは、HSL色空間の輝度(Lightness)と記載されていますが、これは輝度(Luminance)とは異なります。
ここらへんの単語の混乱は、いろいろなページで見られるので注意が必要です。

RGBから輝度(Luminance)へ変換する一般的な数式は以下のとおりです。

r * 0.298912 + g * 0.586611 + b * 0.114478

HSLのL(Lightness)への変換式は以下の通り。

(MAX(r, g, b) - MIN(r, g, b)) / 2

ハッキリいって全く違いますね。
Lightnessの訳は「明度」や「輝度」など資料によって訳され方がまちまちですので、混乱しないようにすることが重要です。

SetSatの解釈について

W3Cの計算式にSetSatという擬似コードの関数が記載されています。

SetSat(C, s)
    if(Cmax > Cmin)
        Cmid = (((Cmid - Cmin) x s) / (Cmax - Cmin))
        Cmax = s
    else
        Cmid = Cmax = 0
    Cmin = 0
    return C;

この擬似コードを最初に見た時は、意味がわかりませんでした。
CminはRGB成分の中の最小値、Cmaxは最大値、Cmidは中央値となります。

例を出すとC=RGB(0,8, 0.6, 0.3)とするなら、CminはB要素(0.3)、CmaxはR要素(0.8)、CmidはG要素(0.6)となります。
計算式は以下のとおりになります。

G = (((G - B) x s) / (R - B))
R = s
B = 0.0

という事になります。
ちなみにRGB(0.1, 0.1, 0.5)やRGB(0.5, 0.5, 0.1)のようにCminやCmaxが２つある場合はどうなるかは書いていません。
正解はどうなるかはわかりませんが、以下の条件さえ満たせば、値は何でも良いようです。

max(Cred, Cgreen, Cblue) - min(Cred, Cgreen, Cblue) == s

Python(pillow)での実装

計算式がわかったので、Pythonの画像ライブラリであるpillowで実装します。pillowは実質的にPython標準の画像ライブラリと言って良いでしょう。OpenCVのように高度な機能はありませんが、様々なライブラリへデータコンバートが可能で、コンパクトで高速な画像処理が特徴です。

PIL/Pillow チートシートで記載されているように、ブレンドモードの実装はImageMathモジュールを使います。

例としてhard-lightの実装をしてみましょう。

from PIL import ImageMath


def _hard_light(a, b):
    _cl = 2 * a * b / 255
    _ch = 2.0 * (a + b - a * b / 255.0) - 255.0
    return _cl * (b < 128) + _ch * (b >= 128)

bands = []
for cb, cs in zip(backdrop.split(), source.split()):
    t = ImageMath.eval(
        "func(float(a), float(b))",
        func=_hard_light,
        a=cb, b=cs
    ).convert("L")
    bands += [t]

Image.merge("RGB", bands)

ImageMathモジュールを使うと、要素の計算を数値のように計算できるので便利です。
"Separable blend"のような単純な処理に関しては、こんな感じで実装ができます。

問題は"Non-separable blend"です、意外と計算量も多くトリッキーな処理もあり結構難しいです。
実装に関しては後でコードを公開していますので、興味がる方は見てもらうとして、ImageMathモジュールの非公開な関数を駆使して実装しています。
他言語で移植するのであれば、GLSLなどを使用すると思います、参考になれば幸いです。

「Image4Layer」モジュール

これらの処理を「Image4Layer」というモジュール名でパッケージ化しました。
画像処理系などでoverlayの合成などはよく使うので、結構使いドコロはあると思います。

インストールはpipで簡単に行なえます、実行にはpillow(PIL)があらかじめインストールされている必要があります。

$pip install image4layer

使い方は簡単です、color-dodgeモードで合成する例です。

from PIL import Image
from image4layer import Image4Layer

source = Image.open("ducky.png")
backdrop = Image.open("backdrop.png")

Image4Layer.color_dodge(backdrop, source)

簡単ですね、以下、対応しているブレンドモード一覧です。

ブレンドモード	画像
Image4Layer.normal
Image4Layer.multiply
Image4Layer.screen
Image4Layer.overlay
Image4Layer.darken
Image4Layer.lighten
Image4Layer.color_dodge
Image4Layer.color_burn
Image4Layer.hard_light
Image4Layer.soft_light
Image4Layer.difference
Image4Layer.exclusion
Image4Layer.hue
Image4Layer.saturation
Image4Layer.color
Image4Layer.luminosity

CSS3にはありませんが、Photoshopに搭載されているブレンドモードもついでに実装しました。

ブレンドモード	画像
Image4Layer.vivid_light
Image4Layer.pin_light
Image4Layer.linear_dodge
Image4Layer.subtract

ライセンスはMITですので、商用、個人利用とわず無料で使えます。

追記

Version0.4にPython2で動作しないことと、RGBA同士の演算にバグがありました、0.43で修正されています。

あとがき

Compositing and Blending 日本語訳には、想定される描画と実際にブラウザの表示があるのですが、Chromeでアクセスすると以下のようになります。

あれ・・・？色味が結構ちがくない？
ここら辺の表示は各ブラウザによって色味がかなり違ってきそうですね。

追記

Chromeのバージョンによって色味は違いそうです、私の環境はUbuntu環境で、どうやらbackdrop.pngに設定されているアルファ値の合成にバグがあるようです。

ちなみにImage4Lyaerの表示結果はChromeの結果とほぼ一緒です、おそくらく同じ実装をしているものと思います。
何か情報があれば、随時記事にしていきます。