2017. 9.13.
石立 喬

Visual C#とWin2DによるUWPでの画像処理（５）

――― BlendEffectクラスのModeプロパティを色々と変えて画像を混合する ―――

　Win2DのCompositeEffectクラスによる画像の合成については、前項で説明した。ここでは、Background画像にForeground画像を一定の基準で加味して混合するBlendEffectクラスについて、Modeプロパティを変えて、いろいろな機能を確認した。ただし、ここで使用されている各モードはPhotoshopのものと同じなので、その内容や使用方法の詳細については省略する。

BlendEffectクラスによる画像混合
　使用するBlendEffectクラスは、Backgroundと呼ぶ背景画像に対して、Foregroundと呼ぶ前景画像を混合する。処理の種類を決めるModeプロパティは、BlendEffectMode列挙子で、Multiply、ColorBurn、ColorDodgeその他多数あり、これらの動作は、W3C勧告による標準仕様を含み、Photoshopに使われている描画モードと同じである。
　PhotoshpでBase Color（基本色）と呼ぶものがBackground、Blend Color（混合色）がForegroundに相当する。

BlendEffectMode列挙子メンバーの動作
　Photoshopに使われているものがそのまま使われており、その動作は、Photoshopの解説に詳しいので、詳細な説明は省略する。面白いのは、昔の写真の引き伸ばし技術の用語が使われていることで、Burn（焼き込み）は、長時間露光して印画紙上の像を濃くすることで、Dodge（覆い焼き）は、手などで露光を遮って部分的に印画紙上の像を薄くすることなので、分かり易い。

Background画像とForeground画像を同一にしての各モードの比較
　Background画像とForeground画像を同一にすると、Blend（混合）ではなく、単なる画像補正としてしか動作しないが、各モードの特徴を示すのに都合が良いので試みた。各画像のAlpha（不透明度）は1（不透明）にしてあるので、画像の全域が対象になる。

プログラム
　BlendEffectクラスの中で、まずは、特徴あるMultiply、Screen、Overlayの３種類のモードについて、BackgroundとForegroundを同一にして各モードの処理結果を確認した。図１と図２は、すでに以前の稿で示したと同様の原画像の読み込みと各モードの設定、および、結果を表示するプログラムである。


図１　Background原画像を読み込み、３種類のBlendEffectクラスを設定する



図２　３種類のモードでの結果を、Background原画像とともに表示する


得られた結果
　図３は得られた結果で、Multiplyモードは全体的に暗くなり、Screenモードは明るく、Overlayモードはコントラストが増強されている。


図３　特徴ある３種類のモードで得られた結果


各モードについて処理を実行した結果のまとめ
　すでに上記で説明したモードを含めて、 Phitoshopのメニューの順に従って、各モードの処理結果を調べた。BackgroundとForegroundを同一にしたので、当然とはいえ、つまらない結果になっているものもある。
　下記で、BはBackgroundの各ピクセルのR、G、B個別の値、Fはforegroundの同様な値である。
◎結果の画像が暗くなる処理（Darker Modes）
Darken --------- BとFを比較し、小さい方を出力する。BとFが同一なので、画像に変わりはない（図省略）
Mulpiply --------- B * F を出力する。BとFは同一で、1以下なので、乗算すると、1付近を除いて、値が大幅に小さくなり、暗くなる
ColorBurn ------- 1 - (1 - B)/Fを出力する。暗部が潰れ、暗くなる
LinearBurn ------ B + F <= 1では0を、それ以外ではB + F - 1を出力する。こちらの方が更に暗く感じる
DarkerColor ----- BとFの各ピクセル値から輝度を求め、小さい方を出力する。B = Fなので、画像に変わりはない（図省略）

図４　暗い方向に変化するモード


◎結果の画像が明るくなる処理（Lighter Modes）
Lighten -------- BとFを比較し、大きい方を出力する。BとFが同一なので、画像に変わりはない（図省略）
Screen -------- 1 - (1 - B)(1 - F) = B + F - B * Fを出力する、中間部と明部がより明るくなる
ColorDodge ----- B / (1 - F) を出力する、明部が白飛びする
LinearDodge ---- B + Fを出力する。BとFが同一なので、２倍の明るさになる
LighterColor ---- BとFの輝度の大きい方を出力する。BとFが同一なので、画像に変わりはない（図省略）

図５　明るい方向に変化するモード


◎結果の画像のコントラストが高くなる処理（Contrast Modes）
Overlay --------- Bが50%以下の時は2 * Multiply、50%以上ではScreenを出力し、コントラストが上がる
SoftLight -------- 非常に複雑な式を使う、Overlayよりは効果がやや穏やかである
HardLight -------- Overlayと似ているが、Fが50%以下か以上かで判断する、B = FではOverlayと同じ（図省略）
VividLight -------- Fにより複雑な式を使う、コントラストが非常に高くなる
LinearLight ------- Bにより、明部はLinearDodge、暗部はLinearBurnを使う、コントラストが高くなる
PinLight --------- Fが50%以上ではmax(B,2 * F - 1)、以下ではmin(B,2 * F)を出力、B = Fでは画像に変わりがない（図省略）
HardMix --------- B + Fが1以下で0、1以上で1、B >= Fで1、B < Fで0、二値画像で極端な原色になる

図６　コントラストを高めるモード


◎結果の画像が反転する処理（Inversion Modes, Cancellation Modes）
　一般には反転するが、B = Fの特殊な場合なので、1や0が出力される。
Difference ------- F - Bの絶対値を出力する。 B = Fならば0（黒）が出力される（図省略）
Exclusion -------- F + B - 2 * F * B を出力する。B = Fならば、明部と暗部が暗くなり、中間部が明るめになる
Subtract --------- B - Fを出力する。B = Fならば0（黒）が出力される（図省略）
Division --------- B / Fを出力する。ただし、B = F = 0なら0が出力される。この場合はB / F = 1（白）になる（図省略）


図７　B = Fでも、Exclusionモードは中間部のみが明るい特殊な振舞いをする


◎結果の画像の色調が変化する処理（Component Modes）
　一般には変化するが、B = Fの特殊な場合なので、画像に変化はない（図省略）。彩度が0の場合には、Backgroundの白黒化画像が出力される。
Hue ---------- Fの彩度が0以外では、Fの色相、Bの彩度、Bの明度によるRGB値が出力される
Saturation ----- Bの彩度が0以外では、Bの色相、Fの彩度、Bの明度によるRGB値が出力される
Color --------- Fの彩度が0以外では、Fの色相、Fの彩度、Bの明度によるRGB値が出力される
Luminosity ----- Bの彩度が0以外では、Bの色相、Bの彩度、Fの明度によるRGB値が出力される

CompositeEffectクラスの紹介で使った画像での各モードの比較
　全稿で使用したDestination画像とSource画像を、BackgroundとForegroundに使用して、各モードを比較したので紹介する。プログラムは省略する。 　ここでの使用方法に限り、実質的に、Darken、ColorBurn、LinearBurnはMultiplyと同じ。ColorDodge、LinearDodge、LinearColor、HardLight、VividLight、LinearLight、PinLight、HardMixはScreenと同じ、ExclisionはDifferenceと同じであったので、これらの図による紹介は省略する。
　図８および図９は得られた結果で、
Multiply ------ 背景はそのままで、赤文字はやや暗くなる
Screen ------ 白地に少し淡い赤文字になる
Overlay ------ 暗かった背景は明るくなり、明るかった部分は白く飛ぶ、赤い文字はほぼそのまま
SoftLight ---- 背景はやや明るく、赤文字はやや暗くなる
Difference --- 背景は反転し、赤文字は暗くなる
Subtract ----- 背景は黒で、文字は暗いシアンになる
Division ----- 背景はそのままで、文字は明るいシアンになる
Hue -------- 背景は白黒化し、文字は赤だが背景の彩度と明度に従う
Saturation --- 背景は白黒化し、文字は背景の色相に従う
Color ------- 背景は白黒化し、文字は赤に保たれ、背景の明度のみに従う
Luminosity --- 背景は白（Luminosity = 1）になり、文字は背景の色で表示される
のようになっている。



図８　BackgroundとForegroundが異なる例、前稿での画像を使用

図９　いろいろなモードでの例


色々な色を含んだ画像での結果
　ここでは、比較的分かり易く、鮮やかな結果を示したもののみを図１０と図１１に紹介する。これにより、BlendEffectの効果が理解できるものと思う。Blend（混合）は、Composite（合成）のディジタル的（backgroundを採るかforegroundoを採るか）な処理と異なり、アナログ的で、backgroundとforegroundの両者を使用して演算を行うものが多い。


図１０　色のより豊富な画像を使用しての確認



図１１　foregroundの文字が見えにくくなる例が多い


感想
　Photoshopを使わなくても、同等の画像処理がWin2Dでできるのはありがたい。しかし、芸術的に優れた合成、混合画像を得るには、原画の選択が難しく、意外と応用範囲が限られるようである。






「Visual C++の勉強部屋」（目次）へ