CG系雑学 その他 その他

ブレンドモードの研究 <明るくする系>

AEやphotoshopのブレンドモードで、加算や乗算、スクリーンなどはよく使う。
なんとなく処理の仕組みは理解していたが、覆い焼き、比較(明)などは敬遠してたので、今回全部できるだけ詳しく調べてみた。
計算処理までキチンと把握していきたい。

最初は一番使うことが多い、明るくなる系

素材

背景                   重ね素材
重ね結果
加算 比較(明) スクリーン
覆い焼きカラー 覆い焼きカラー(クラッシック) 覆い焼きリニア
カラー比較(明)

加算


とにかく強く光らせたい時などに使うモード
RGBの値を単純に足し算する
RGBは加法混色のため、光の重なりと同じ効果がある
分かりやすく効果が出るので、とりあえずで使いがちだが、
すぐにRGB(255,255,255)つまり限界値の白トビ状態になってしまうので注意が必要。
真っ白はそこから先の処理に何の発展性もなくなってしまうので、なるべく避けたい。
最高でもRGB(245、245、245)などに抑えたいところ。

<処理例>
RGB(143、 13、 17)   ■■■
RGB(241、195、109)   ■■■
======↓結果↓============
RGB(255、208、126)   ■■■

比較(明)


RGBの3つの値を比較し、明るい方(数値の高い方)を選ぶ
キノピオの顔辺りの状態がとても分かりやすい
キノピオの色がそのまま残っている場合は、RGBの3つが全て背景の数値に勝っている場合
どちらの色でもない場合は、2勝1敗などのとき

<処理例1> 1勝2敗パターン
RGB(143、 50、 17)   ■■■
RGB( 50、122、 19)   ■■■
======↓結果↓============
RGB(143、122、 19)   ■■■

<処理例2> 全敗パターン
RGB(143、 50、 17)   ■■■
RGB(150、122、 19)   ■■■
======↓結果↓============
RGB(150、122、 19)   ■■■

スクリーン


RGB(255,255,255)に到達させずに明るくできる
複雑な計算をしているが、重要なのは、BG、重ね素材、どちらもRGB(255,255,255)の白トビ状態でない限り、明るめの素材同士を重ねても白トビしないことだと思う
この計算処理を理解するにはRGBを8bit数(0~255)ではなく、(0~1)として考えた方がよさそう。

RGB(245、128、  4)
====↓上限を1にした場合↓====
RGB(0.96、0.50、0.02)

それではスクリーンの計算式を見ていこう

<背景をA、重ね素材をBとした場合の式>
スクリーン処理結果=1-{(1-A)×(1-B)}

式から括弧を外し、組み替えるとA+B-ABとも言える
A+Bは加算、ABは乗算なので
スクリーン=加算した値から乗算した値を引いた数値
と考えれば計算処理自体は少し分かりやすい気がする。

AとBどちらかが0ならば計算結果はそのまま
AとBどちらかが1ならば計算結果は1
AとBどちらも1でなければ計算結果は1より小さくなる

<処理例>
RGB(240、 50、 17)   ■■■
RGB(200、122、  0)   ■■■
======↓結果↓============
RGB(252、148、 17)   ■■■

<処理例のRの値のみに注目する (四捨五入あり)>
240÷255≒0.94
200÷255≒0.78

結果=1-{(1-0.94)×(1-0.78)}
結果=1-{0.06×0.22}
結果=1-0.0132
結果=0.9868

0.9868×255≒252

覆い焼きカラー


コントラストを高めつつ、明るくなる

より詳しく言うと
背景のRGB数値の差が大きくなりつつ、明るくなる

加算やスクリーンは背景と重ね素材が逆でも、結果は一緒だが、覆い焼きは上下で結果が変わるので注意したい。

こちらも8bitRGB(0~255)ではなく(0~1)で考える

<背景をA、重ね素材をBとした場合の式>
覆い焼きカラー処理結果=A÷(1-B)

この式から結果をイメージするのは難しいが、
(1-B)は1以下だから、結果は絶対にAの背景より明るくなるはず
また、Bの値が大きければ大きいほどAを小さな値で割ることになる
つまり、Bの値が大きければ大きいほど、Aの値も大きくなる

下記の例のGの値見ると分かるが、背景の値が小さいと、重ね素材の数値が極端に高くない限り、それほど結果の数値は上がらない。それに対してAの値は同じ100の値を重ねても、かなりの効果があることがわかる。この差がコントラストを生んでいるのだろう。

<処理例>
RGB(100、100、100)   ■■■ 重ね素材
RGB(200、 13、125)   ■■■ 背景
======↓結果↓============
RGB(255、 21、206)   ■■■

<処理例のBの値のみに注目する (四捨五入あり)>
100÷255≒0.392
125÷255≒0.490

結果=0.49÷(1-0.392)
結果=0.49÷0.608
結果=0.8059

0.8059×255≒206

覆い焼きカラー(クラッシック)


旧バージョンAEの覆い焼きカラーと互換性を持たせるためのモードらしいので
基本的に無視してよさそう。
これは調べても通常の覆い焼きカラーとの計算処理の差は分らなかった
一応通常の覆い焼きカラーと結果に差は出ているけど(キノピオの腹辺り)、なぜだろう????

関係ないけどAEのバージョンによる互換性の無さは酷いので何とかしてほしい・・・

覆い焼きリニア


計算方法は加算と全く同じ
だから加算と覆い焼きリニアどちらを使っても同じ見た目になる

半透明な素材を重ねると話が変わってくる。

不透明50% 加算 不透明50% 覆い焼きリニア
半透明の素材を重ねると明らかに差が出る。
印象としては覆い焼きリニアは不透明度80%程度でも、重ね素材がかなり薄くなるので調整が難しい。
なので、半透明な素材を光らせる場合は加算を使用した方がよさそう
追加で検証が必要なモードだ

カラー比較(明)


比較(明)と似ているが、重ね素材と背景どちらの色を選択するかの方法が結構違う。
比較(明)の場合はRGBの3つの値の大きい方を選択していくが、
カラー比較(明)はRBGの合計値{RGB(30、100、11)なら30+100+11で141}の大きい方が選ばれるので、重ね素材か背景のどちらかの色が必ず結果として出る。

<処理例>
RGB(143、 50、 17)   ■■■ 合計210
RGB( 50、122、 19)   ■■■ 合計191
======↓結果↓============
RGB(143、 50、 17)   ■■■ 


gesomaをフォローする
CGすくいどる

コメント

  1. 匿名 より:

    分かりやすい記事ありがとうございます。
    スクリーンの計算式のところですが、
    「AとBどちらかが0ならば計算結果は0」
    ではなく、
    「AとBどちらかが0ならば計算結果はそのまま」
    になると思います。
    ご確認お願いします。

    • gesoma より:

      ご指摘ありがとうございます。
      とても助かります。
      おっしゃる通り、間違っていたため修正しておきます。