ブレンドモード 実践編-1 〜 Vectornator スタイルタブその⑤。

デフォルトは通常。

こんにちは、「ふ」です。
前回⬇︎はVectornatorのブレンドモード（理解編）ということでブレンドモードの基本的な仕組みや概要を紹介しました。

• ブレンドモードについて（理解編） 〜 Vectornator スタイルタブその④。
  

  2020.05.02
  〽️ 理解してから使うとスムーズ。

今回からはいよいよ実践編を進めていきたいと思います。
実際にオブジェクトを重ね合わせて、その効果や使い所に迫っていきましょう。

◼︎ デフォルトは「通常」。

まづは「通常」から。これは特に説明の必要はないですね。Vectornator〜というかCGアプリ全般において、デフォルトは「通常」モードで描画されます。
オブジェクトを重ねてみましたが、もちろん何も起こりません。

比較（暗）〜自然な重なり。

暗くなる系１つ目は、比較（暗）。合成色と基本色のRGB値それぞれを比較し、小さい方の値を組み合わせたものが結果色。
「自然な色の重なり」と言った印象です。

透明なパネルを重ね合わせたような表現にしたいとき、使えそうですね。

結果色の算出方法が理解できていると面白いこともできます。比較（暗）は合成色の全てのRGB値が基本色のRGB値より大きいとき、結果色のRGBには全て基本色のものが採用されます。

全てのRGB値を大きくした合成色を重ねてみました。
「ふ」のボデーは見た目は何も変わらず。白い部分（R:255 G:255 B:255）である耳の中やマグカップだけにフィルターを掛けることができました。

乗算〜背景への溶け込み。

「乗算」です。まづ合成色と基本色のRGB値を掛け合わせます。それだと最大値の255を超えてしまうのでさらに255で割ったものが、結果色のRGB値に採用されます。
画像のようにただ単に重ねたものだと、「比較（暗）」とほとんど変わりませんね。

テキストを乗算モードで重ねてみました。「背景に溶け込ませる」という点では、すごく綺麗な効果が得られます。

「比較（暗）」との違いを検証していきます。
「ふ」の画像を複製して、比較（暗）モードと乗算モードで重ね、比べてみましょう。

合成色を「比較（暗）」で重ねた場合は全く同じRGB値を比べているので、結果色は変化しません。

こちらは「ふ」がこんがり日焼けしています。

「乗算」の場合は「基本色に（合成色 / 255)を掛けている」と考えることができます。

RGB値の最大値は255なので、（合成色 / 255）は１より小さくなる。したがって結果色は基本色より暗くなるのですね。

そして基本色が白（RGB: 255 255 255）の部分だけは、（合成色 / 255）= 1となるので、影響を受けません。

（合成色 / 255）の考え方を使うと、「特定の成分だけを暗くする」という使い方もできるのです。
まづここに完全な赤、緑、青があります。「赤の成分だけ暗くする」というのをやってみますね。

こんな合成色を作りました。
緑と青には影響をあたえないように、（合成色 / 255）が１になるように指定しています。

乗算モードで重ねてみると、赤の成分だけ暗くすることができました。

比較（明）〜黒を消し、白を抜く。

今度は「明るくなる」シリーズです。
比較（明）は（暗）の逆の処理をします。合成色と基本色のRGB値それぞれを比較し、大きいほうの値を結果色の成分に採用します。「値が大きい」ということは、イコール明るくなるということですね。

比較（明）は合成色が暗いほうが効果が顕著です。RGB全ての値が「ふ」のボデーより小さい色を重ねてみました。
ボデーの色はそのまま採用され、輪郭線など黒い部分（R:0 G:0 B:0）だけがチョコレート色になりました。これ、パッケージに使えそうだな。

今度は逆に、RGB全ての値が「ふ」のボデーより大きい色を重ねてみました。
体全体は合成色に隠れてしまい、白（R:255 G:255 B:255)だけが抜けましたね。

この画像、テキストの背景に長方形があるように見えますが、実際は長方形を「比較（明）」でテキストの上に重ねたものです。テキストのRGB値全てが長方形より大きいので、前方に抜けてしまっているんですね。

長方形の値をいじって「B」の成分だけ大小関係を逆転させました。テキストと長方形の重なった部分がうまく混ざり合いましたね。

スクリーン　〜重ねるほどに明るく。

「明るくなるシリーズ」その２、スクリーンです。
先ほどの「乗算」の計算式を思い出してみましょう。

「スクリーン」は基本色のRと合成色のRを足したものから、「乗算」の計算結果を引いたものです。
効果についても「乗算」と真逆のものに成増。

これは「ふ」の上にスクリーンモードのオブジェクトを３枚重ねたものです。
「比較（明）」だと同じものを重ねても変化はみられませんが、「スクリーン」は重ねるほどに明るくなっていきますね。

「乗算」の時のように、同じ「ふ」をスクリーンで重ねてみます。

「ふ」が黄色くなりました。体調がよろしくなさそう。しかも慢性的な意味で。

円形グラデーション（中央：緑　外側：白）の長方形をスクリーン重ね。回想シーンに出てくる「ふ」です。

「乗算」のところでも実験した、完全な赤緑青。ここにR成分のみのオブジェクトを「スクリーン」で重ねてみました。
式にしたがって計算するとわかるのですが、赤は変化なし、緑と青だけに効果が表れました。興味深い。

関係付けられる４種類。

Vectornatorのブレンドモード実践編、今回は５種類紹介しました。「通常」はさておき、そのほかの４つは性質によって関係付けることができますね。

ブレンドモードは写真加工でもよく使われる手法です。「フォトショ　ブレンドモード」で検索してみるとたくさんの記事がヒットするので、参考にすると良いでしょう。

しかしVector陣営（← ? )も負けてはいられません。引き続きブレンドモードについて紹介していきたいと思います。