グラフィックを知る

ブレンドモード

Blend Modes別名：描画モード、合成モード、レイヤーの合成モード

概要

上のレイヤーを下のレイヤーに重ねるとき、二つの色から結果の色を決める計算の種類。上の色で置き換えるだけでなく、掛けて暗くする、明るさを足す、コントラストを強めるといった重ね方を選べる。

デモ

デモを読み込んでいます
白い線をドラッグすると、通常の重ね方と、選んだモードを見比べられます。上のレイヤーは、上端が白、中央が純色、下端が黒で、右端の列だけ白から黒への灰色です。絵の上にカーソルを乗せると、その画素の下の色、上の色、結果が表示されます。

使われる場面

  • イラストの影と光

    塗りの上に乗算のレイヤーで影色を重ね、スクリーンや加算のレイヤーで光を足す。下の線画や塗りを残したまま、陰影だけを別のレイヤーで調整できる。

  • 質感や色味の調整

    紙やキャンバスの質感の画像を、オーバーレイやソフトライトで絵全体に重ねる。灰色を基準にした画像なら、明暗の模様だけが乗る。

  • ゲームのエフェクト

    炎、光、魔法のパーティクルを加算で重ね、重なった部分ほど明るくする。

  • 画像の比較

    差の絶対値で二枚の画像を重ね、違う部分だけを浮かび上がらせる。一致する部分は黒になる。

判断基準

こういうときこうする
影を付けたい、色を濃く重ねたい乗算を使う。上が白の部分は変化せず、下の線や模様が透けて残る。
光や発光を足したいスクリーンか加算を使う。スクリーンは 1 を超えないので穏やかに明るくなり、加算は重なるほど強く明るくなって白く飛びやすい。
明暗のコントラストや、紙の質感を全体に乗せたいオーバーレイかソフトライトを使う。上が 50% の灰色の部分は変化しないので、灰色を基準にした質感の画像を重ねられる。
二枚の画像の違いを確かめたい差の絶対値を使う。一致する画素は黒になる。
3D の描画で、光の足し合わせを正しく扱いたいリニアな値で合成する。sRGB の値のまま加算すると、重なった部分が明るくなりすぎる。

こう見えたら

指示の例

  • 影のレイヤーを重ねたら、下の線画まで灰色に濁った。影は乗算で重ねて

  • 光を足したところが白く飛びすぎる。加算をやめて、スクリーンで重ねて

  • 紙の質感を絵全体に乗せたい。灰色を基準にした質感の画像を、オーバーレイかソフトライトで重ねて

  • 二枚の画像の違いを確かめたい。差の絶対値で重ねて

詳細

二つの色から結果を決める計算

レイヤーを重ねると、各画素の色は、下のレイヤーの値 aa と上のレイヤーの値 bb から決まる。この計算の種類をブレンドモードと呼び、チャンネルごとに関数 f(a,b)f(a, b) として定義される。上のレイヤーの不透明度 α\alpha は、下の色と ff の結果を混ぜる割合として働く。

C=a+α (f(a,b)−a)C = a + \alpha\,\bigl(f(a, b) - a\bigr)

「通常」は f(a,b)=bf(a, b) = b であり、不透明度 100% なら上の色で置き換わる。

代表的なモード

  • 乗算：a⋅ba \cdot b。結果は必ず下より暗くなる。上が白なら変化せず、黒なら黒になる。色のついた透明なフィルムを重ねた状態に近い。
  • スクリーン：1−(1−a)(1−b)1 - (1 - a)(1 - b)。乗算を明暗で反転させたもので、結果は必ず下より明るくなる。上が黒なら変化しない。
  • オーバーレイ：下が 0.5 以下なら乗算、0.5 より上ならスクリーンに近い計算をする。暗い部分はより暗く、明るい部分はより明るくなり、コントラストが強まる。上が 50% の灰色なら変化しない。
  • ソフトライト：オーバーレイと同じ方向に働くが、変化が穏やかである。式は実装によって少しずつ違う。
  • 加算：min⁡(1, a+b)\min(1,\ a + b)。重なるほど明るくなり、1 で頭打ちになる。
  • 差の絶対値：∣a−b∣|a - b|。同じ色どうしは黒になる。

デモでは、上のレイヤーの上端が白、下端が黒になっている。乗算では上端で、スクリーンでは下端で、下の絵がそのまま見える。オーバーレイでは、右端の灰色の列の中ほど（50% の灰色）で、下の絵がそのまま見える。

vec3 multiply(vec3 a, vec3 b) { return a * b; }
vec3 screen(vec3 a, vec3 b)   { return 1.0 - (1.0 - a) * (1.0 - b); }
vec3 overlay(vec3 a, vec3 b) {
  return mix(2.0 * a * b, 1.0 - 2.0 * (1.0 - a) * (1.0 - b), step(0.5, a));
}

sRGB の値で計算するか、リニアで計算するか

イラスト制作のソフトでは、多くの場合、ブレンドモードを sRGB の値のまま計算する。オーバーレイの境目の 0.5 が見た目の中間の明るさにあたるなど、各モードの効き方はこの値を前提に作られている。デモも sRGB の値のまま計算している。

リニアな値で計算すると、モードによって結果が変わる。乗算は、sRGB の値がおおよそ光の量のべき乗なので、(a2.2b2.2)1/2.2=ab(a^{2.2} b^{2.2})^{1/2.2} = ab となり、ほぼ同じ結果になる。加算とスクリーンは大きく変わる。たとえば sRGB の値 0.5 どうしを足すと、値のままなら 1.0 になるが、光の量として足すと約 0.69 にとどまる。3D の描画では、パーティクルの加算などの合成は、光の足し算として正しくなるようリニアな値で行うのが一般的である。

見分け方と落とし穴

同じ名前のモードでも、ソフトによって式が違うことがある。特にソフトライトや、加算に近いモードは実装の差が大きく、別のソフトに持っていくと仕上がりが変わる場合がある。

乗算、スクリーン、加算、差の絶対値は、上下のレイヤーを入れ替えても結果が同じである。オーバーレイは入れ替えると結果が変わり、入れ替えたものはハードライトと呼ばれる別のモードになる。

関連